{"parents":["dbc7b9f50c9f4ff005c8ba6431adea9bec3d318a"],"commit":{"shortRevision":"8cb2fb21eb","authorEmail":"trueadm@users.noreply.github.com","authoredAt":"2020-03-02T14:15:42+00:00","revision":"8cb2fb21eb4e931b80d8b0502059061891ac4563","authorName":"Dominic Gannaway","subject":"Refine isFiberSuspenseAndTimedOut (#18184)"},"body":"","files":[{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberScope.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js"}],"patch":"diff --git a\/packages\/react-reconciler\/src\/ReactFiberScope.js b\/packages\/react-reconciler\/src\/ReactFiberScope.js\nindex ef78a13984..eb0959f8dd 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberScope.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberScope.js\n@@ -27,7 +27,12 @@ import {\n import {enableScopeAPI} from 'shared\/ReactFeatureFlags';\n \n function isFiberSuspenseAndTimedOut(fiber: Fiber): boolean {\n- return fiber.tag === SuspenseComponent && fiber.memoizedState !== null;\n+ const memoizedState = fiber.memoizedState;\n+ return (\n+ fiber.tag === SuspenseComponent &&\n+ memoizedState !== null &&\n+ memoizedState.dehydrated === null\n+ );\n }\n \n function getSuspenseFallbackChild(fiber: Fiber): Fiber | null {\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js\nindex 78b863e995..568530ffe0 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactScope-test.internal.js\n@@ -13,6 +13,8 @@ import {createEventTarget} from 'dom-event-testing-library';\n \n let React;\n let ReactFeatureFlags;\n+let ReactDOMServer;\n+let Scheduler;\n \n describe('ReactScope', () => {\n beforeEach(() => {\n@@ -21,6 +23,7 @@ describe('ReactScope', () => {\n ReactFeatureFlags.enableScopeAPI = true;\n ReactFeatureFlags.enableDeprecatedFlareAPI = true;\n React = require('react');\n+ Scheduler = require('scheduler');\n });\n \n if (!__EXPERIMENTAL__) {\n@@ -34,6 +37,7 @@ describe('ReactScope', () => {\n \n beforeEach(() => {\n ReactDOM = require('react-dom');\n+ ReactDOMServer = require('react-dom\/server');\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n@@ -208,7 +212,6 @@ describe('ReactScope', () => {\n \n it('scopes support server-side rendering and hydration', () => {\n const TestScope = React.unstable_createScope();\n- const ReactDOMServer = require('react-dom\/server');\n const scopeRef = React.createRef();\n const divRef = React.createRef();\n const spanRef = React.createRef();\n@@ -306,6 +309,72 @@ describe('ReactScope', () => {\n ReactDOM.render(null, container);\n expect(scopeRef.current).toBe(null);\n });\n+\n+ it('correctly works with suspended boundaries that are hydrated', async () => {\n+ let suspend = false;\n+ let resolve;\n+ const promise = new Promise(resolvePromise => (resolve = resolvePromise));\n+ const ref = React.createRef();\n+ const TestScope = React.unstable_createScope();\n+ const scopeRef = React.createRef();\n+ const testScopeQuery = (type, props) => true;\n+\n+ function Child() {\n+ if (suspend) {\n+ throw promise;\n+ } else {\n+ return 'Hello';\n+ }\n+ }\n+\n+ function App() {\n+ return (\n+

\n+ \n+ \n+ \n+ \n+ <\/span>\n+ <\/React.Suspense>\n+ <\/TestScope>\n+ <\/div>\n+ );\n+ }\n+\n+ \/\/ First we render the final HTML. With the streaming renderer\n+ \/\/ this may have suspense points on the server but here we want\n+ \/\/ to test the completed HTML. Don't suspend on the server.\n+ suspend = false;\n+ let finalHTML = ReactDOMServer.renderToString();\n+\n+ let container2 = document.createElement('div');\n+ container2.innerHTML = finalHTML;\n+\n+ let span = container2.getElementsByTagName('span')[0];\n+\n+ \/\/ On the client we don't have all data yet but we want to start\n+ \/\/ hydrating anyway.\n+ suspend = true;\n+ let root = ReactDOM.createRoot(container2, {hydrate: true});\n+ root.render();\n+ Scheduler.unstable_flushAll();\n+ jest.runAllTimers();\n+\n+ \/\/ This should not cause a runtime exception, see:\n+ \/\/ https:\/\/github.com\/facebook\/react\/pull\/18184\n+ scopeRef.current.DO_NOT_USE_queryAllNodes(testScopeQuery);\n+ expect(ref.current).toBe(null);\n+\n+ \/\/ Resolving the promise should continue hydration\n+ suspend = false;\n+ resolve();\n+ await promise;\n+ Scheduler.unstable_flushAll();\n+ jest.runAllTimers();\n+\n+ \/\/ We should now have hydrated with a ref on the existing span.\n+ expect(ref.current).toBe(span);\n+ });\n });\n \n describe('ReactTestRenderer', () => {\n"}

dillon1000/react

Files changed