From 4456ace1744eee3427e5cd300979608f1535e9da Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Thu, 29 Apr 2021 00:50:10 -0500 Subject: [PATCH] subtreeFlag warning: Fix legacy suspense false positive Legacy Suspense is weird. We intentionally commit a suspended fiber in an inconsistent state. If the fiber suspended before it mounted any effects, then the fiber won't have a PassiveStatic effect flag, which will trigger the "missing expected subtreeFlag" warning. To avoid the false positive, we'd need to mark fibers that commit in an incomplete state, somehow. For now I'll disable the warning in legacy mode, with the assumption that most of the bugs that would trigger it are either exclusive to concurrent mode or exist in both. --- .../src/ReactFiberHooks.new.js | 8 +- .../src/ReactFiberHooks.old.js | 8 +- .../ReactSubtreeFlagsWarning-test.js | 173 ++++++++++++++++++ 3 files changed, 187 insertions(+), 2 deletions(-) create mode 100644 packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index a507171aecd..394aa983174 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -480,7 +480,13 @@ export function renderWithHooks( if ( current !== null && (current.flags & StaticMaskEffect) !== - (workInProgress.flags & StaticMaskEffect) + (workInProgress.flags & StaticMaskEffect) && + // Disable this warning in legacy mode, because legacy Suspense is weird + // and creates false positives. To make this work in legacy mode, we'd + // need to mark fibers that commit in an incomplete state, somehow. For + // now I'll disable the warning that most of the bugs that would trigger + // it are either exclusive to concurrent mode or exist in both. + (current.mode & ConcurrentMode) !== NoMode ) { console.error( 'Internal React error: Expected static flag was missing. Please ' + diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index ad555804319..a5eac6836e2 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -480,7 +480,13 @@ export function renderWithHooks( if ( current !== null && (current.flags & StaticMaskEffect) !== - (workInProgress.flags & StaticMaskEffect) + (workInProgress.flags & StaticMaskEffect) && + // Disable this warning in legacy mode, because legacy Suspense is weird + // and creates false positives. To make this work in legacy mode, we'd + // need to mark fibers that commit in an incomplete state, somehow. For + // now I'll disable the warning that most of the bugs that would trigger + // it are either exclusive to concurrent mode or exist in both. + (current.mode & ConcurrentMode) !== NoMode ) { console.error( 'Internal React error: Expected static flag was missing. Please ' + diff --git a/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js b/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js new file mode 100644 index 00000000000..c972d6ae472 --- /dev/null +++ b/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js @@ -0,0 +1,173 @@ +let React; +let ReactNoop; +let Scheduler; +let Suspense; +let useEffect; +let getCacheForType; + +let caches; +let seededCache; + +describe('ReactSuspenseWithNoopRenderer', () => { + beforeEach(() => { + jest.resetModules(); + + React = require('react'); + ReactNoop = require('react-noop-renderer'); + Scheduler = require('scheduler'); + Suspense = React.Suspense; + useEffect = React.useEffect; + + getCacheForType = React.unstable_getCacheForType; + + caches = []; + seededCache = null; + }); + + function createTextCache() { + if (seededCache !== null) { + // Trick to seed a cache before it exists. + // TODO: Need a built-in API to seed data before the initial render (i.e. + // not a refresh because nothing has mounted yet). + const cache = seededCache; + seededCache = null; + return cache; + } + + const data = new Map(); + const version = caches.length + 1; + const cache = { + version, + data, + resolve(text) { + const record = data.get(text); + if (record === undefined) { + const newRecord = { + status: 'resolved', + value: text, + }; + data.set(text, newRecord); + } else if (record.status === 'pending') { + const thenable = record.value; + record.status = 'resolved'; + record.value = text; + thenable.pings.forEach(t => t()); + } + }, + reject(text, error) { + const record = data.get(text); + if (record === undefined) { + const newRecord = { + status: 'rejected', + value: error, + }; + data.set(text, newRecord); + } else if (record.status === 'pending') { + const thenable = record.value; + record.status = 'rejected'; + record.value = error; + thenable.pings.forEach(t => t()); + } + }, + }; + caches.push(cache); + return cache; + } + + function readText(text) { + const textCache = getCacheForType(createTextCache); + const record = textCache.data.get(text); + if (record !== undefined) { + switch (record.status) { + case 'pending': + Scheduler.unstable_yieldValue(`Suspend! [${text}]`); + throw record.value; + case 'rejected': + Scheduler.unstable_yieldValue(`Error! [${text}]`); + throw record.value; + case 'resolved': + return textCache.version; + } + } else { + Scheduler.unstable_yieldValue(`Suspend! [${text}]`); + + const thenable = { + pings: [], + then(resolve) { + if (newRecord.status === 'pending') { + thenable.pings.push(resolve); + } else { + Promise.resolve().then(() => resolve(newRecord.value)); + } + }, + }; + + const newRecord = { + status: 'pending', + value: thenable, + }; + textCache.data.set(text, newRecord); + + throw thenable; + } + } + + function resolveMostRecentTextCache(text) { + if (caches.length === 0) { + throw Error('Cache does not exist.'); + } else { + // Resolve the most recently created cache. An older cache can by + // resolved with `caches[index].resolve(text)`. + caches[caches.length - 1].resolve(text); + } + } + + const resolveText = resolveMostRecentTextCache; + + // @gate experimental + it('regression: false positive for legacy suspense', async () => { + // Wrapping in memo because regular function components go through the + // mountIndeterminateComponent path, which acts like there's no `current` + // fiber even though there is. `memo` is not indeterminate, so it goes + // through the update path. + const Child = React.memo(({text}) => { + // If text hasn't resolved, this will throw and exit before the passive + // static effect flag is added by the useEffect call below. + readText(text); + + useEffect(() => { + Scheduler.unstable_yieldValue('Effect'); + }, []); + + Scheduler.unstable_yieldValue(text); + return text; + }); + + function App() { + return ( + + + + ); + } + + const root = ReactNoop.createLegacyRoot(null); + + // On initial mount, the suspended component is committed in an incomplete + // state, without a passive static effect flag. + await ReactNoop.act(async () => { + root.render(); + }); + expect(Scheduler).toHaveYielded(['Suspend! [Async]']); + expect(root).toMatchRenderedOutput('Loading...'); + + // When the promise resolves, a passive static effect flag is added. In the + // regression, the "missing expected static flag" would fire, because the + // previous fiber did not have one. + await ReactNoop.act(async () => { + resolveText('Async'); + }); + expect(Scheduler).toHaveYielded(['Async', 'Effect']); + expect(root).toMatchRenderedOutput('Async'); + }); +});