@samitouri / QOS-React-1 / commits / 2e25ee373d

[flags] Cleanup enableUseMemoCacheHook (#31767)

Based off https://github.com/facebook/react/pull/31766 This has already landed everywhere.

Ricky committed Dec 14, 2024 at 11:11 UTC 2e25ee373d96a882cee9a1ee3d7fee3f498bde2d
11 files changed +33 -97
packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
-2
@@ -1573,7 +1573,6 @@ describe('ReactHooksInspectionIntegration', () => {
1573 });
1574
1575 describe('useMemoCache', () => {
1576 - // @gate enableUseMemoCacheHook
1576 it('should not be inspectable', async () => {
1577 function Foo() {
1578 const $ = useMemoCache(1);
@@ -1601,7 +1600,6 @@ describe('ReactHooksInspectionIntegration', () => {
1600 expect(tree.length).toEqual(0);
1601 });
1602
1604 - // @gate enableUseMemoCacheHook
1603 it('should work in combination with other hooks', async () => {
1604 function useSomething() {
1605 const [something] = React.useState(null);
packages/react-reconciler/src/ReactFiberHooks.js
+32 -75
@@ -40,7 +40,6 @@ import {
40 enableCache,
41 enableLazyContextPropagation,
42 enableTransitionTracing,
43 - enableUseMemoCacheHook,
43 enableUseEffectEventHook,
44 enableLegacyCache,
45 debugRenderPhaseSideEffectsForStrictMode,
@@ -277,8 +276,7 @@ export type FunctionComponentUpdateQueue = {
276 lastEffect: Effect | null,
277 events: Array<EventFunctionPayload<any, any, any>> | null,
278 stores: Array<StoreConsistencyCheck<any>> | null,
280 - // NOTE: optional, only set when enableUseMemoCacheHook is enabled
281 - memoCache?: MemoCache | null,
279 + memoCache: MemoCache | null,
280 };
281
282 type BasicStateAction<S> = (S => S) | S;
@@ -1127,25 +1125,12 @@ function unstable_useContextWithBailout<T>(
1125 return readContextAndCompare(context, select);
1126 }
1127
1130 -// NOTE: defining two versions of this function to avoid size impact when this feature is disabled.
1131 -// Previously this function was inlined, the additional `memoCache` property makes it not inlined.
1132 -let createFunctionComponentUpdateQueue: () => FunctionComponentUpdateQueue;
1133 -if (enableUseMemoCacheHook) {
1134 - createFunctionComponentUpdateQueue = () => {
1135 - return {
1136 - lastEffect: null,
1137 - events: null,
1138 - stores: null,
1139 - memoCache: null,
1140 - };
1141 - };
1142 -} else {
1143 - createFunctionComponentUpdateQueue = () => {
1144 - return {
1145 - lastEffect: null,
1146 - events: null,
1147 - stores: null,
1148 - };
1128 +function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
1129 + return {
1130 + lastEffect: null,
1131 + events: null,
1132 + stores: null,
1133 + memoCache: null,
1134 };
1135 }
1136
@@ -1155,13 +1140,11 @@ function resetFunctionComponentUpdateQueue(
1140 updateQueue.lastEffect = null;
1141 updateQueue.events = null;
1142 updateQueue.stores = null;
1158 - if (enableUseMemoCacheHook) {
1159 - if (updateQueue.memoCache != null) {
1160 - // NOTE: this function intentionally does not reset memoCache data. We reuse updateQueue for the memo
1161 - // cache to avoid increasing the size of fibers that don't need a cache, but we don't want to reset
1162 - // the cache when other properties are reset.
1163 - updateQueue.memoCache.index = 0;
1164 - }
1143 + if (updateQueue.memoCache != null) {
1144 + // NOTE: this function intentionally does not reset memoCache data. We reuse updateQueue for the memo
1145 + // cache to avoid increasing the size of fibers that don't need a cache, but we don't want to reset
1146 + // the cache when other properties are reset.
1147 + updateQueue.memoCache.index = 0;
1148 }
1149 }
1150
@@ -3982,13 +3965,11 @@ export const ContextOnlyDispatcher: Dispatcher = {
3965 useFormState: throwInvalidHookError,
3966 useActionState: throwInvalidHookError,
3967 useOptimistic: throwInvalidHookError,
3968 + useMemoCache: throwInvalidHookError,
3969 };
3970 if (enableCache) {
3971 (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
3972 }
3989 -if (enableUseMemoCacheHook) {
3990 - (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
3991 -}
3973 if (enableUseEffectEventHook) {
3974 (ContextOnlyDispatcher: Dispatcher).useEffectEvent = throwInvalidHookError;
3975 }
@@ -4023,13 +4004,11 @@ const HooksDispatcherOnMount: Dispatcher = {
4004 useFormState: mountActionState,
4005 useActionState: mountActionState,
4006 useOptimistic: mountOptimistic,
4007 + useMemoCache,
4008 };
4009 if (enableCache) {
4010 (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
4011 }
4030 -if (enableUseMemoCacheHook) {
4031 - (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
4032 -}
4012 if (enableUseEffectEventHook) {
4013 (HooksDispatcherOnMount: Dispatcher).useEffectEvent = mountEvent;
4014 }
@@ -4064,13 +4043,11 @@ const HooksDispatcherOnUpdate: Dispatcher = {
4043 useFormState: updateActionState,
4044 useActionState: updateActionState,
4045 useOptimistic: updateOptimistic,
4046 + useMemoCache,
4047 };
4048 if (enableCache) {
4049 (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
4050 }
4071 -if (enableUseMemoCacheHook) {
4072 - (HooksDispatcherOnUpdate: Dispatcher).useMemoCache = useMemoCache;
4073 -}
4051 if (enableUseEffectEventHook) {
4052 (HooksDispatcherOnUpdate: Dispatcher).useEffectEvent = updateEvent;
4053 }
@@ -4106,13 +4083,11 @@ const HooksDispatcherOnRerender: Dispatcher = {
4083 useFormState: rerenderActionState,
4084 useActionState: rerenderActionState,
4085 useOptimistic: rerenderOptimistic,
4086 + useMemoCache,
4087 };
4088 if (enableCache) {
4089 (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
4090 }
4113 -if (enableUseMemoCacheHook) {
4114 - (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
4115 -}
4091 if (enableUseEffectEventHook) {
4092 (HooksDispatcherOnRerender: Dispatcher).useEffectEvent = updateEvent;
4093 }
@@ -4307,6 +4282,7 @@ if (__DEV__) {
4282 return mountOptimistic(passthrough, reducer);
4283 },
4284 useHostTransitionStatus,
4285 + useMemoCache,
4286 };
4287 if (enableCache) {
4288 (HooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh =
@@ -4316,9 +4292,6 @@ if (__DEV__) {
4292 return mountRefresh();
4293 };
4294 }
4319 - if (enableUseMemoCacheHook) {
4320 - (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
4321 - }
4295 if (enableUseEffectEventHook) {
4296 (HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent =
4297 function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
@@ -4511,6 +4484,7 @@ if (__DEV__) {
4484 return mountOptimistic(passthrough, reducer);
4485 },
4486 useHostTransitionStatus,
4487 + useMemoCache,
4488 };
4489 if (enableCache) {
4490 (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useCacheRefresh =
@@ -4520,10 +4494,6 @@ if (__DEV__) {
4494 return mountRefresh();
4495 };
4496 }
4523 - if (enableUseMemoCacheHook) {
4524 - (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache =
4525 - useMemoCache;
4526 - }
4497 if (enableUseEffectEventHook) {
4498 (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useEffectEvent =
4499 function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
@@ -4715,6 +4685,7 @@ if (__DEV__) {
4685 return updateOptimistic(passthrough, reducer);
4686 },
4687 useHostTransitionStatus,
4688 + useMemoCache,
4689 };
4690 if (enableCache) {
4691 (HooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh =
@@ -4724,9 +4695,6 @@ if (__DEV__) {
4695 return updateRefresh();
4696 };
4697 }
4727 - if (enableUseMemoCacheHook) {
4728 - (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
4729 - }
4698 if (enableUseEffectEventHook) {
4699 (HooksDispatcherOnUpdateInDEV: Dispatcher).useEffectEvent =
4700 function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
@@ -4918,6 +4886,7 @@ if (__DEV__) {
4886 return rerenderOptimistic(passthrough, reducer);
4887 },
4888 useHostTransitionStatus,
4889 + useMemoCache,
4890 };
4891 if (enableCache) {
4892 (HooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh =
@@ -4927,9 +4896,6 @@ if (__DEV__) {
4896 return updateRefresh();
4897 };
4898 }
4930 - if (enableUseMemoCacheHook) {
4931 - (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
4932 - }
4899 if (enableUseEffectEventHook) {
4900 (HooksDispatcherOnRerenderInDEV: Dispatcher).useEffectEvent =
4901 function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
@@ -5141,6 +5107,10 @@ if (__DEV__) {
5107 mountHookTypesDev();
5108 return mountOptimistic(passthrough, reducer);
5109 },
5110 + useMemoCache(size: number): Array<any> {
5111 + warnInvalidHookAccess();
5112 + return useMemoCache(size);
5113 + },
5114 useHostTransitionStatus,
5115 };
5116 if (enableCache) {
@@ -5151,13 +5121,6 @@ if (__DEV__) {
5121 return mountRefresh();
5122 };
5123 }
5154 - if (enableUseMemoCacheHook) {
5155 - (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useMemoCache =
5156 - function (size: number): Array<any> {
5157 - warnInvalidHookAccess();
5158 - return useMemoCache(size);
5159 - };
5160 - }
5124 if (enableUseEffectEventHook) {
5125 (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent =
5126 function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
@@ -5372,6 +5335,10 @@ if (__DEV__) {
5335 updateHookTypesDev();
5336 return updateOptimistic(passthrough, reducer);
5337 },
5338 + useMemoCache(size: number): Array<any> {
5339 + warnInvalidHookAccess();
5340 + return useMemoCache(size);
5341 + },
5342 useHostTransitionStatus,
5343 };
5344 if (enableCache) {
@@ -5382,13 +5349,6 @@ if (__DEV__) {
5349 return updateRefresh();
5350 };
5351 }
5385 - if (enableUseMemoCacheHook) {
5386 - (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache =
5387 - function (size: number): Array<any> {
5388 - warnInvalidHookAccess();
5389 - return useMemoCache(size);
5390 - };
5391 - }
5352 if (enableUseEffectEventHook) {
5353 (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useEffectEvent =
5354 function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
@@ -5603,6 +5563,10 @@ if (__DEV__) {
5563 updateHookTypesDev();
5564 return rerenderOptimistic(passthrough, reducer);
5565 },
5566 + useMemoCache(size: number): Array<any> {
5567 + warnInvalidHookAccess();
5568 + return useMemoCache(size);
5569 + },
5570 useHostTransitionStatus,
5571 };
5572 if (enableCache) {
@@ -5613,13 +5577,6 @@ if (__DEV__) {
5577 return updateRefresh();
5578 };
5579 }
5616 - if (enableUseMemoCacheHook) {
5617 - (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache =
5618 - function (size: number): Array<any> {
5619 - warnInvalidHookAccess();
5620 - return useMemoCache(size);
5621 - };
5622 - }
5580 if (enableUseEffectEventHook) {
5581 (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useEffectEvent =
5582 function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
packages/react-reconciler/src/__tests__/useMemoCache-test.js
-7
@@ -58,7 +58,6 @@ describe('useMemoCache()', () => {
58 ErrorBoundary = _ErrorBoundary;
59 });
60
61 - // @gate enableUseMemoCacheHook
61 it('render component using cache', async () => {
62 function Component(props) {
63 const cache = useMemoCache(1);
@@ -75,7 +74,6 @@ describe('useMemoCache()', () => {
74 expect(root).toMatchRenderedOutput('Ok');
75 });
76
78 - // @gate enableUseMemoCacheHook
77 it('update component using cache', async () => {
78 let setX;
79 let forceUpdate;
@@ -145,7 +143,6 @@ describe('useMemoCache()', () => {
143 expect(data).toBe(data1); // confirm that the cache persisted across renders
144 });
145
148 - // @gate enableUseMemoCacheHook
146 it('update component using cache with setstate during render', async () => {
147 let setN;
148 function Component(props) {
@@ -210,7 +207,6 @@ describe('useMemoCache()', () => {
207 expect(data).toBe(data0);
208 });
209
213 - // @gate enableUseMemoCacheHook
210 it('update component using cache with throw during render', async () => {
211 let setN;
212 let shouldFail = true;
@@ -293,7 +289,6 @@ describe('useMemoCache()', () => {
289 expect(data).toBe(data1); // confirm that the cache persisted across renders
290 });
291
296 - // @gate enableUseMemoCacheHook
292 it('update component and custom hook with caches', async () => {
293 let setX;
294 let forceUpdate;
@@ -370,7 +365,6 @@ describe('useMemoCache()', () => {
365 expect(data).toBe(data1); // confirm that the cache persisted across renders
366 });
367
373 - // @gate enableUseMemoCacheHook
368 it('reuses computations from suspended/interrupted render attempts during an update', async () => {
369 // This test demonstrates the benefit of a shared memo cache. By "shared" I
370 // mean multiple concurrent render attempts of the same component/hook use
@@ -624,7 +618,6 @@ describe('useMemoCache()', () => {
618 );
619 });
620
627 - // @gate enableUseMemoCacheHook
621 it('(repro) infinite renders when used with setState during render', async () => {
622 // Output of react compiler on `useUserMemo`
623 function useCompilerMemo(value) {
packages/react-server/src/ReactFizzHooks.js
+1 -4
@@ -41,7 +41,6 @@ import {createFastHash} from './ReactServerStreamConfig';
41 import {
42 enableCache,
43 enableUseEffectEventHook,
44 - enableUseMemoCacheHook,
44 enableUseResourceEffectHook,
45 } from 'shared/ReactFeatureFlags';
46 import is from 'shared/objectIs';
@@ -859,6 +858,7 @@ export const HooksDispatcher: Dispatcher = supportsClientAPIs
858 useActionState,
859 useFormState: useActionState,
860 useHostTransitionStatus,
861 + useMemoCache,
862 };
863
864 if (enableCache) {
@@ -867,9 +867,6 @@ if (enableCache) {
867 if (enableUseEffectEventHook) {
868 HooksDispatcher.useEffectEvent = useEffectEvent;
869 }
870 -if (enableUseMemoCacheHook) {
871 - HooksDispatcher.useMemoCache = useMemoCache;
872 -}
870 if (enableUseResourceEffectHook) {
871 HooksDispatcher.useResourceEffect = supportsClientAPIs
872 ? noop
packages/shared/ReactFeatureFlags.js
-3
@@ -115,9 +115,6 @@ export const enableCPUSuspense = __EXPERIMENTAL__;
115
116 export const enableHydrationLaneScheduling = true;
117
118 -// Enables useMemoCache hook, intended as a compilation target for
119 -// auto-memoization.
120 -export const enableUseMemoCacheHook = true;
118 // Test this at Meta before enabling.
119 export const enableNoCloningMemoCache = false;
120
packages/shared/forks/ReactFeatureFlags.native-fb.js
-1
@@ -80,7 +80,6 @@ export const enableTransitionTracing = false;
80 export const enableTrustedTypesIntegration = false;
81 export const enableUpdaterTracking = __PROFILE__;
82 export const enableUseEffectEventHook = false;
83 -export const enableUseMemoCacheHook = true;
83 export const favorSafetyOverHydrationPerf = true;
84 export const renameElementSymbol = false;
85 export const retryLaneExpirationMs = 5000;
packages/shared/forks/ReactFeatureFlags.native-oss.js
-1
@@ -69,7 +69,6 @@ export const enableTaint = true;
69 export const enableTransitionTracing = false;
70 export const enableTrustedTypesIntegration = false;
71 export const enableUseEffectEventHook = false;
72 -export const enableUseMemoCacheHook = true;
72 export const favorSafetyOverHydrationPerf = true;
73 export const passChildrenWhenCloningPersistedNodes = false;
74 export const renameElementSymbol = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
-1
@@ -35,7 +35,6 @@ export const disableTextareaChildren = false;
35 export const enableSuspenseAvoidThisFallback = false;
36 export const enableSuspenseAvoidThisFallbackFizz = false;
37 export const enableCPUSuspense = false;
38 -export const enableUseMemoCacheHook = true;
38 export const enableNoCloningMemoCache = false;
39 export const enableUseEffectEventHook = false;
40 export const favorSafetyOverHydrationPerf = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
-1
@@ -64,7 +64,6 @@ export const enableTransitionTracing = false;
64 export const enableTrustedTypesIntegration = false;
65 export const enableUpdaterTracking = false;
66 export const enableUseEffectEventHook = false;
67 -export const enableUseMemoCacheHook = true;
67 export const favorSafetyOverHydrationPerf = true;
68 export const passChildrenWhenCloningPersistedNodes = false;
69 export const renameElementSymbol = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
-1
@@ -37,7 +37,6 @@ export const disableTextareaChildren = false;
37 export const enableSuspenseAvoidThisFallback = true;
38 export const enableSuspenseAvoidThisFallbackFizz = false;
39 export const enableCPUSuspense = false;
40 -export const enableUseMemoCacheHook = true;
40 export const enableNoCloningMemoCache = false;
41 export const enableUseEffectEventHook = false;
42 export const favorSafetyOverHydrationPerf = true;
packages/shared/forks/ReactFeatureFlags.www.js
-1
@@ -54,7 +54,6 @@ export const enableSuspenseAvoidThisFallback = true;
54 export const enableSuspenseAvoidThisFallbackFizz = false;
55
56 export const enableCPUSuspense = true;
57 -export const enableUseMemoCacheHook = true;
57 export const enableUseEffectEventHook = true;
58 export const enableMoveBefore = false;
59 export const disableInputAttributeSyncing = false;