diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index 9126ee1687a8e..231b33e69bcf9 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -27,7 +27,7 @@ import { enableNewReconciler, decoupleUpdatePriorityFromScheduler, enableDoubleInvokingEffects, - enableUseRefMutationWarning, + enableUseRefAccessWarning, } from 'shared/ReactFeatureFlags'; import { @@ -1216,7 +1216,7 @@ function getCallerStackFrame(): string { function mountRef(initialValue: T): {|current: T|} { const hook = mountWorkInProgressHook(); - if (enableUseRefMutationWarning) { + if (enableUseRefAccessWarning) { if (__DEV__) { // Support lazy initialization pattern shown in docs. // We need to store the caller stack frame so that we don't warn on subsequent renders. diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index 826ae84cf76c9..ccd69abae6aab 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -26,7 +26,7 @@ import { enableSchedulingProfiler, enableNewReconciler, decoupleUpdatePriorityFromScheduler, - enableUseRefMutationWarning, + enableUseRefAccessWarning, } from 'shared/ReactFeatureFlags'; import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode'; @@ -1194,7 +1194,7 @@ function getCallerStackFrame(): string { function mountRef(initialValue: T): {|current: T|} { const hook = mountWorkInProgressHook(); - if (enableUseRefMutationWarning) { + if (enableUseRefAccessWarning) { if (__DEV__) { // Support lazy initialization pattern shown in docs. // We need to store the caller stack frame so that we don't warn on subsequent renders. diff --git a/packages/react-reconciler/src/__tests__/useRef-test.internal.js b/packages/react-reconciler/src/__tests__/useRef-test.internal.js index b072887a12869..ccfc6d0d4b2ae 100644 --- a/packages/react-reconciler/src/__tests__/useRef-test.internal.js +++ b/packages/react-reconciler/src/__tests__/useRef-test.internal.js @@ -30,7 +30,6 @@ describe('useRef', () => { const ReactFeatureFlags = require('shared/ReactFeatureFlags'); ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false; - ReactFeatureFlags.enableUseRefMutationWarning = true; act = ReactNoop.act; useCallback = React.useCallback; @@ -104,32 +103,6 @@ describe('useRef', () => { expect(Scheduler).toHaveYielded(['ping: 6']); }); - it('should never warn when attaching to children', () => { - class Component extends React.Component { - render() { - return null; - } - } - - function Example({phase}) { - const hostRef = useRef(); - const classRef = useRef(); - return ( - <> -
- - - ); - } - - act(() => { - ReactNoop.render(); - }); - act(() => { - ReactNoop.render(); - }); - }); - it('should return the same ref during re-renders', () => { function Counter() { const ref = useRef('val'); @@ -155,6 +128,33 @@ describe('useRef', () => { }); if (__DEV__) { + it('should never warn when attaching to children', () => { + class Component extends React.Component { + render() { + return null; + } + } + + function Example({phase}) { + const hostRef = useRef(); + const classRef = useRef(); + return ( + <> +
+ + + ); + } + + act(() => { + ReactNoop.render(); + }); + act(() => { + ReactNoop.render(); + }); + }); + + // @gate enableUseRefAccessWarning it('should warn about reads during render', () => { function Example() { const ref = useRef(123); @@ -215,7 +215,8 @@ describe('useRef', () => { }); }); - it('should not warn about unconditional lazy init during render', () => { + // @gate enableUseRefAccessWarning + it('should warn about unconditional lazy init during render', () => { function Example() { const ref1 = useRef(null); const ref2 = useRef(undefined); @@ -255,6 +256,7 @@ describe('useRef', () => { }); }); + // @gate enableUseRefAccessWarning it('should warn about reads to ref after lazy init pattern', () => { function Example() { const ref1 = useRef(null); @@ -288,6 +290,7 @@ describe('useRef', () => { }); }); + // @gate enableUseRefAccessWarning it('should warn about writes to ref after lazy init pattern', () => { function Example() { const ref1 = useRef(null); diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 68da7c2f3a08c..dbf9f5bd28533 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -135,4 +135,4 @@ export const enableDiscreteEventFlushingChange = false; export const enableDoubleInvokingEffects = false; -export const enableUseRefMutationWarning = false; +export const enableUseRefAccessWarning = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 9ea390dc4cd02..0df33470e5703 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -51,7 +51,7 @@ export const decoupleUpdatePriorityFromScheduler = false; export const enableDiscreteEventFlushingChange = false; export const enableDoubleInvokingEffects = false; -export const enableUseRefMutationWarning = false; +export const enableUseRefAccessWarning = false; // Flow magic to verify the exports of this file match the original version. // eslint-disable-next-line no-unused-vars diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index b9b6072db6f1c..77148d9be29b9 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -50,7 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false; export const enableDiscreteEventFlushingChange = false; export const enableDoubleInvokingEffects = false; -export const enableUseRefMutationWarning = false; +export const enableUseRefAccessWarning = false; // Flow magic to verify the exports of this file match the original version. // eslint-disable-next-line no-unused-vars diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 78470db30957c..7e66eb9e75e5e 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -50,7 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false; export const enableDiscreteEventFlushingChange = false; export const enableDoubleInvokingEffects = false; -export const enableUseRefMutationWarning = false; +export const enableUseRefAccessWarning = false; // Flow magic to verify the exports of this file match the original version. // eslint-disable-next-line no-unused-vars diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index 132b37de77749..90c4360c6d469 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -50,7 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false; export const enableDiscreteEventFlushingChange = false; export const enableDoubleInvokingEffects = false; -export const enableUseRefMutationWarning = false; +export const enableUseRefAccessWarning = false; // Flow magic to verify the exports of this file match the original version. // eslint-disable-next-line no-unused-vars diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 9d5337dc8cb02..4dbd671409e36 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -50,7 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false; export const enableDiscreteEventFlushingChange = false; export const enableDoubleInvokingEffects = false; -export const enableUseRefMutationWarning = false; +export const enableUseRefAccessWarning = false; // Flow magic to verify the exports of this file match the original version. // eslint-disable-next-line no-unused-vars diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js index 1ea9f969a1a61..c98063376f09d 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.js @@ -50,7 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false; export const enableDiscreteEventFlushingChange = false; export const enableDoubleInvokingEffects = false; -export const enableUseRefMutationWarning = false; +export const enableUseRefAccessWarning = false; // Flow magic to verify the exports of this file match the original version. // eslint-disable-next-line no-unused-vars diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js index ceee06e86ebd2..362569dfb01b4 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.www.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js @@ -50,7 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false; export const enableDiscreteEventFlushingChange = true; export const enableDoubleInvokingEffects = false; -export const enableUseRefMutationWarning = false; +export const enableUseRefAccessWarning = false; // Flow magic to verify the exports of this file match the original version. // eslint-disable-next-line no-unused-vars diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js index 4a5b79bce6980..d03ba3eadd41c 100644 --- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js +++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js @@ -48,4 +48,4 @@ export const enableTrustedTypesIntegration = false; export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const enableDoubleInvokingEffects = false; -export const enableUseRefMutationWarning = false; +export const enableUseRefAccessWarning = __VARIANT__; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 43b740d652690..f5861a2e336a5 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -28,7 +28,7 @@ export const { enableDebugTracing, skipUnmountedBoundaries, enableDoubleInvokingEffects, - enableUseRefMutationWarning, + enableUseRefAccessWarning, } = dynamicFeatureFlags; // On WWW, __EXPERIMENTAL__ is used for a new modern build.