diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js index af5dff0155..3e06f6c113 100644 --- a/packages/react-dom/src/__tests__/ReactUpdates-test.js +++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js @@ -15,6 +15,7 @@ let ReactDOMClient; let ReactTestUtils; let act; let Scheduler; +let ReactFeatureFlags; describe('ReactUpdates', () => { beforeEach(() => { @@ -25,6 +26,10 @@ describe('ReactUpdates', () => { ReactTestUtils = require('react-dom/test-utils'); act = require('jest-react').act; Scheduler = require('scheduler'); + ReactFeatureFlags = require('shared/ReactFeatureFlags'); + ReactFeatureFlags.enableSyncDefaultUpdates = true; + ReactFeatureFlags.enableUnifiedSyncLane = true; + ReactFeatureFlags.enableUseRefAccessWarning = false; }); // Note: This is based on a similar component we use in www. We can delete @@ -1734,4 +1739,57 @@ describe('ReactUpdates', () => { }); }).toThrow('Maximum update depth exceeded'); }); + + fit('prevents infinite update loop between a component with synchronous updates in useEffect and a component with synchronous updates in render', async () => { + // Ignore flushSync warning + spyOnDev(console, 'error'); + + function A({stateRef}) { + const [a, updateA] = React.useState(false); + stateRef.current.updateA = updateA; + stateRef.current.a = a; + React.useEffect(() => { + const {updateB} = stateRef.current; + ReactDOM.flushSync(() => { + updateB(true); + }) + }); + return