From a1e6f9ce0b3135a17faf312782e578ce800c140d Mon Sep 17 00:00:00 2001
From: Sathya Gunsasekaran <gsathya.ceg@gmail.com>
Date: Fri, 12 Apr 2024 15:25:40 +0100
Subject: [PATCH] [Devtools] Look for a ReactMemoCacheSentinel on state

The polyfill doesn't have access to the fiber, and it simply uses state,
which makes it not work with the devtools.

With this PR, devtools will look for this special sentinel on very first
hook's state for this sentinel and display the Forget badge if present.

The poylfill will add this sentinel to it's state (the cache array).
---
 .../react-devtools-shared/src/backend/ReactSymbols.js    | 4 ++++
 packages/react-devtools-shared/src/backend/renderer.js   | 9 +++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/ReactSymbols.js b/packages/react-devtools-shared/src/backend/ReactSymbols.js
index 2a79ce83ae0a4..35e64abbeded0 100644
--- a/packages/react-devtools-shared/src/backend/ReactSymbols.js
+++ b/packages/react-devtools-shared/src/backend/ReactSymbols.js
@@ -67,3 +67,7 @@ export const SUSPENSE_LIST_SYMBOL_STRING = 'Symbol(react.suspense_list)';
 
 export const SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED_SYMBOL_STRING =
   'Symbol(react.server_context.defaultValue)';
+
+export const REACT_MEMO_CACHE_SENTINEL: symbol = Symbol.for(
+  'react.memo_cache_sentinel',
+);
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 1d1bcb15eb39b..2e6cc9b287812 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -86,6 +86,7 @@ import {
   STRICT_MODE_SYMBOL_STRING,
   PROFILER_NUMBER,
   PROFILER_SYMBOL_STRING,
+  REACT_MEMO_CACHE_SENTINEL,
   SCOPE_NUMBER,
   SCOPE_SYMBOL_STRING,
   FORWARD_REF_NUMBER,
@@ -474,8 +475,12 @@ export function getInternalReactConstants(version: string): {
     }
 
     let resolvedContext: any = null;
-    // $FlowFixMe[incompatible-type] fiber.updateQueue is mixed
-    if (!shouldSkipForgetCheck && fiber.updateQueue?.memoCache != null) {
+    if (
+      !shouldSkipForgetCheck &&
+      // $FlowFixMe[incompatible-type] fiber.updateQueue is mixed
+      (fiber.updateQueue?.memoCache != null ||
+        fiber.memoizedState?.memoizedState?.[REACT_MEMO_CACHE_SENTINEL])
+    ) {
       const displayNameWithoutForgetWrapper = getDisplayNameForFiber(
         fiber,
         true,