[Devtools] Look for a ReactMemoCacheSentinel on state (#28831)
The useMemoCache polyfill doesn't have access to the fiber, and it simply uses state, which does not work with the existing devtools badge for the compiler. With this PR, devtools will look on the very first hook's state for the memo cache sentinel and display the Forget badge if present. The polyfill will add this sentinel to it's state (the cache array).
Sathya Gunasekaran committed
Apr 15, 2024 at 13:05 UTC
d486051de7a77236e729d395a18acac2c5ece35f
2 files changed
+11
-2
packages/react-devtools-shared/src/backend/ReactSymbols.js
+4
@@ -67,3 +67,7 @@ export const SUSPENSE_LIST_SYMBOL_STRING = 'Symbol(react.suspense_list)';
67
68
export const SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED_SYMBOL_STRING =
69
'Symbol(react.server_context.defaultValue)';
70
+
71
+export const REACT_MEMO_CACHE_SENTINEL: symbol = Symbol.for(
72
+ 'react.memo_cache_sentinel',
73
+);
packages/react-devtools-shared/src/backend/renderer.js
+7
-2
@@ -86,6 +86,7 @@ import {
86
STRICT_MODE_SYMBOL_STRING,
87
PROFILER_NUMBER,
88
PROFILER_SYMBOL_STRING,
89
+ REACT_MEMO_CACHE_SENTINEL,
90
SCOPE_NUMBER,
91
SCOPE_SYMBOL_STRING,
92
FORWARD_REF_NUMBER,
@@ -474,8 +475,12 @@ export function getInternalReactConstants(version: string): {
475
}
476
477
let resolvedContext: any = null;
477
- // $FlowFixMe[incompatible-type] fiber.updateQueue is mixed
478
- if (!shouldSkipForgetCheck && fiber.updateQueue?.memoCache != null) {
478
+ if (
479
+ !shouldSkipForgetCheck &&
480
+ // $FlowFixMe[incompatible-type] fiber.updateQueue is mixed
481
+ (fiber.updateQueue?.memoCache != null ||
482
+ fiber.memoizedState?.memoizedState?.[REACT_MEMO_CACHE_SENTINEL])
483
+ ) {
484
const displayNameWithoutForgetWrapper = getDisplayNameForFiber(
485
fiber,
486
true,