diff --git a/packages/react-reconciler/src/ReactFiberScope.js b/packages/react-reconciler/src/ReactFiberScope.js index ef78a1398452e..eb0959f8ddc13 100644 --- a/packages/react-reconciler/src/ReactFiberScope.js +++ b/packages/react-reconciler/src/ReactFiberScope.js @@ -27,7 +27,12 @@ import { import {enableScopeAPI} from 'shared/ReactFeatureFlags'; function isFiberSuspenseAndTimedOut(fiber: Fiber): boolean { - return fiber.tag === SuspenseComponent && fiber.memoizedState !== null; + const memoizedState = fiber.memoizedState; + return ( + fiber.tag === SuspenseComponent && + memoizedState !== null && + memoizedState.dehydrated === null + ); } function getSuspenseFallbackChild(fiber: Fiber): Fiber | null { diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js index 78b863e995166..568530ffe0211 100644 --- a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js @@ -13,6 +13,8 @@ import {createEventTarget} from 'dom-event-testing-library'; let React; let ReactFeatureFlags; +let ReactDOMServer; +let Scheduler; describe('ReactScope', () => { beforeEach(() => { @@ -21,6 +23,7 @@ describe('ReactScope', () => { ReactFeatureFlags.enableScopeAPI = true; ReactFeatureFlags.enableDeprecatedFlareAPI = true; React = require('react'); + Scheduler = require('scheduler'); }); if (!__EXPERIMENTAL__) { @@ -34,6 +37,7 @@ describe('ReactScope', () => { beforeEach(() => { ReactDOM = require('react-dom'); + ReactDOMServer = require('react-dom/server'); container = document.createElement('div'); document.body.appendChild(container); }); @@ -208,7 +212,6 @@ describe('ReactScope', () => { it('scopes support server-side rendering and hydration', () => { const TestScope = React.unstable_createScope(); - const ReactDOMServer = require('react-dom/server'); const scopeRef = React.createRef(); const divRef = React.createRef(); const spanRef = React.createRef(); @@ -306,6 +309,72 @@ describe('ReactScope', () => { ReactDOM.render(null, container); expect(scopeRef.current).toBe(null); }); + + it('correctly works with suspended boundaries that are hydrated', async () => { + let suspend = false; + let resolve; + const promise = new Promise(resolvePromise => (resolve = resolvePromise)); + const ref = React.createRef(); + const TestScope = React.unstable_createScope(); + const scopeRef = React.createRef(); + const testScopeQuery = (type, props) => true; + + function Child() { + if (suspend) { + throw promise; + } else { + return 'Hello'; + } + } + + function App() { + return ( +