{"commit":{"subject":"Add \"hydrationOptions\" behind the enableSuspenseCallback flag (#16434)","authorEmail":"sema@fb.com","authoredAt":"2019-08-19T13:26:39-07:00","shortRevision":"c80678c760","revision":"c80678c7606b1895573c23182bfb9a418e2ad31e","authorName":"Sebastian Markbåge"},"body":"This gets invoked when a boundary is either hydrated or if it is deleted\r\nbecause it updated or got deleted before it mounted.","parents":["2d68bd09603fc54d927240003810db9aa6f2e3e5"],"files":[{"path":"packages\/react-art\/src\/ReactART.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOM.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactFabric.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactNativeRenderer.js","status":"M"},{"path":"packages\/react-noop-renderer\/src\/createReactNoop.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberReconciler.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberRoot.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberSuspenseComponent.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js","status":"M"},{"path":"packages\/react-test-renderer\/src\/ReactTestRenderer.js","status":"M"},{"path":"packages\/shared\/ReactFeatureFlags.js","status":"M"}],"patch":"diff --git a\/packages\/react-art\/src\/ReactART.js b\/packages\/react-art\/src\/ReactART.js\nindex bf97e65031..9b2c5382e1 100644\n--- a\/packages\/react-art\/src\/ReactART.js\n+++ b\/packages\/react-art\/src\/ReactART.js\n@@ -66,7 +66,7 @@ class Surface extends React.Component {\n \n this._surface = Mode.Surface(+width, +height, this._tagRef);\n \n- this._mountNode = createContainer(this._surface, LegacyRoot, false);\n+ this._mountNode = createContainer(this._surface, LegacyRoot, false, null);\n updateContainer(this.props.children, this._mountNode, this);\n }\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex 96381177b4..11c6ad904b 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -24,6 +24,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n ReactFeatureFlags.enableSuspenseServerRenderer = true;\n+ ReactFeatureFlags.enableSuspenseCallback = true;\n \n React = require('react');\n ReactDOM = require('react-dom');\n@@ -92,6 +93,153 @@ describe('ReactDOMServerPartialHydration', () => {\n expect(ref.current).toBe(span);\n });\n \n+ it('calls the hydration callbacks after hydration or deletion', async () => {\n+ let suspend = false;\n+ let resolve;\n+ let promise = new Promise(resolvePromise => (resolve = resolvePromise));\n+ function Child() {\n+ if (suspend) {\n+ throw promise;\n+ } else {\n+ return 'Hello';\n+ }\n+ }\n+\n+ let suspend2 = false;\n+ let promise2 = new Promise(() => {});\n+ function Child2() {\n+ if (suspend2) {\n+ throw promise2;\n+ } else {\n+ return 'World';\n+ }\n+ }\n+\n+ function App({value}) {\n+ return (\n+

\n+ \n+ \n+ <\/Suspense>\n+ \n+ \n+ <\/Suspense>\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+ suspend2 = false;\n+ let finalHTML = ReactDOMServer.renderToString();\n+\n+ let container = document.createElement('div');\n+ container.innerHTML = finalHTML;\n+\n+ let hydrated = [];\n+ let deleted = [];\n+\n+ \/\/ On the client we don't have all data yet but we want to start\n+ \/\/ hydrating anyway.\n+ suspend = true;\n+ suspend2 = true;\n+ let root = ReactDOM.unstable_createRoot(container, {\n+ hydrate: true,\n+ hydrationOptions: {\n+ onHydrated(node) {\n+ hydrated.push(node);\n+ },\n+ onDeleted(node) {\n+ deleted.push(node);\n+ },\n+ },\n+ });\n+ act(() => {\n+ root.render();\n+ });\n+\n+ expect(hydrated.length).toBe(0);\n+ expect(deleted.length).toBe(0);\n+\n+ await act(async () => {\n+ \/\/ Resolving the promise should continue hydration\n+ suspend = false;\n+ resolve();\n+ await promise;\n+ });\n+\n+ expect(hydrated.length).toBe(1);\n+ expect(deleted.length).toBe(0);\n+\n+ \/\/ Performing an update should force it to delete the boundary\n+ root.render();\n+\n+ Scheduler.unstable_flushAll();\n+ jest.runAllTimers();\n+\n+ expect(hydrated.length).toBe(1);\n+ expect(deleted.length).toBe(1);\n+ });\n+\n+ it('calls the onDeleted hydration callback if the parent gets deleted', async () => {\n+ let suspend = false;\n+ let promise = new Promise(() => {});\n+ function Child() {\n+ if (suspend) {\n+ throw promise;\n+ } else {\n+ return 'Hello';\n+ }\n+ }\n+\n+ function App({deleted}) {\n+ if (deleted) {\n+ return null;\n+ }\n+ return (\n+

\n+ \n+ \n+ <\/Suspense>\n+ <\/div>\n+ );\n+ }\n+\n+ suspend = false;\n+ let finalHTML = ReactDOMServer.renderToString();\n+\n+ let container = document.createElement('div');\n+ container.innerHTML = finalHTML;\n+\n+ let deleted = [];\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.unstable_createRoot(container, {\n+ hydrate: true,\n+ hydrationOptions: {\n+ onDeleted(node) {\n+ deleted.push(node);\n+ },\n+ },\n+ });\n+ act(() => {\n+ root.render();\n+ });\n+\n+ expect(deleted.length).toBe(0);\n+\n+ act(() => {\n+ root.render();\n+ });\n+\n+ \/\/ The callback should have been invoked.\n+ expect(deleted.length).toBe(1);\n+ });\n+\n it('warns and replaces the boundary content in legacy mode', async () => {\n let suspend = false;\n let resolve;\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOM.js b\/packages\/react-dom\/src\/client\/ReactDOM.js\nindex 2e3ccea8de..e11756cb6b 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOM.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOM.js\n@@ -367,15 +367,26 @@ ReactWork.prototype._onCommit = function(): void {\n function ReactSyncRoot(\n container: DOMContainer,\n tag: RootTag,\n- hydrate: boolean,\n+ options: void | RootOptions,\n ) {\n \/\/ Tag is either LegacyRoot or Concurrent Root\n- const root = createContainer(container, tag, hydrate);\n+ const hydrate = options != null && options.hydrate === true;\n+ const hydrationCallbacks =\n+ (options != null && options.hydrationOptions) || null;\n+ const root = createContainer(container, tag, hydrate, hydrationCallbacks);\n this._internalRoot = root;\n }\n \n-function ReactRoot(container: DOMContainer, hydrate: boolean) {\n- const root = createContainer(container, ConcurrentRoot, hydrate);\n+function ReactRoot(container: DOMContainer, options: void | RootOptions) {\n+ const hydrate = options != null && options.hydrate === true;\n+ const hydrationCallbacks =\n+ (options != null && options.hydrationOptions) || null;\n+ const root = createContainer(\n+ container,\n+ ConcurrentRoot,\n+ hydrate,\n+ hydrationCallbacks,\n+ );\n this._internalRoot = root;\n }\n \n@@ -532,7 +543,15 @@ function legacyCreateRootFromDOMContainer(\n }\n \n \/\/ Legacy roots are not batched.\n- return new ReactSyncRoot(container, LegacyRoot, shouldHydrate);\n+ return new ReactSyncRoot(\n+ container,\n+ LegacyRoot,\n+ shouldHydrate\n+ ? {\n+ hydrate: true,\n+ }\n+ : undefined,\n+ );\n }\n \n function legacyRenderSubtreeIntoContainer(\n@@ -824,6 +843,10 @@ const ReactDOM: Object = {\n \n type RootOptions = {\n hydrate?: boolean,\n+ hydrationOptions?: {\n+ onHydrated?: (suspenseNode: Comment) => void,\n+ onDeleted?: (suspenseNode: Comment) => void,\n+ },\n };\n \n function createRoot(\n@@ -839,8 +862,7 @@ function createRoot(\n functionName,\n );\n warnIfReactDOMContainerInDEV(container);\n- const hydrate = options != null && options.hydrate === true;\n- return new ReactRoot(container, hydrate);\n+ return new ReactRoot(container, options);\n }\n \n function createSyncRoot(\n@@ -856,8 +878,7 @@ function createSyncRoot(\n functionName,\n );\n warnIfReactDOMContainerInDEV(container);\n- const hydrate = options != null && options.hydrate === true;\n- return new ReactSyncRoot(container, BatchedRoot, hydrate);\n+ return new ReactSyncRoot(container, BatchedRoot, options);\n }\n \n function warnIfReactDOMContainerInDEV(container) {\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabric.js b\/packages\/react-native-renderer\/src\/ReactFabric.js\nindex 4637f9a0bc..72f7a46098 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabric.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabric.js\n@@ -144,7 +144,7 @@ const ReactFabric: ReactFabricType = {\n if (!root) {\n \/\/ TODO (bvaughn): If we decide to keep the wrapper component,\n \/\/ We could create a wrapper for containerTag as well to reduce special casing.\n- root = createContainer(containerTag, LegacyRoot, false);\n+ root = createContainer(containerTag, LegacyRoot, false, null);\n roots.set(containerTag, root);\n }\n updateContainer(element, root, null, callback);\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js b\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\nindex 853c5f54fc..21ec4e239e 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\n@@ -141,7 +141,7 @@ const ReactNativeRenderer: ReactNativeType = {\n if (!root) {\n \/\/ TODO (bvaughn): If we decide to keep the wrapper component,\n \/\/ We could create a wrapper for containerTag as well to reduce special casing.\n- root = createContainer(containerTag, LegacyRoot, false);\n+ root = createContainer(containerTag, LegacyRoot, false, null);\n roots.set(containerTag, root);\n }\n updateContainer(element, root, null, callback);\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 7369552eb3..1ae8275449 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -908,7 +908,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n if (!root) {\n const container = {rootID: rootID, pendingChildren: [], children: []};\n rootContainers.set(rootID, container);\n- root = NoopRenderer.createContainer(container, tag, false);\n+ root = NoopRenderer.createContainer(container, tag, false, null);\n roots.set(rootID, root);\n }\n return root.current.stateNode.containerInfo;\n@@ -925,6 +925,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n container,\n ConcurrentRoot,\n false,\n+ null,\n );\n return {\n _Scheduler: Scheduler,\n@@ -950,6 +951,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n container,\n BatchedRoot,\n false,\n+ null,\n );\n return {\n _Scheduler: Scheduler,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\nindex 3a6ff1f5ac..b8996ad698 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n@@ -607,7 +607,12 @@ function commitLifeCycles(\n }\n return;\n }\n- case SuspenseComponent:\n+ case SuspenseComponent: {\n+ if (enableSuspenseCallback) {\n+ commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);\n+ }\n+ return;\n+ }\n case SuspenseListComponent:\n case IncompleteClassComponent:\n case FundamentalComponent:\n@@ -644,7 +649,8 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {\n }\n } else if (\n node.tag === SuspenseComponent &&\n- node.memoizedState !== null\n+ node.memoizedState !== null &&\n+ node.memoizedState.dehydrated === null\n ) {\n \/\/ Found a nested Suspense component that timed out. Skip over the\n \/\/ primary child fragment, which should remain hidden.\n@@ -719,6 +725,7 @@ function commitDetachRef(current: Fiber) {\n \/\/ deletion, so don't let them throw. Host-originating errors should\n \/\/ interrupt deletion, so it's okay\n function commitUnmount(\n+ finishedRoot: FiberRoot,\n current: Fiber,\n renderPriorityLevel: ReactPriorityLevel,\n ): void {\n@@ -801,7 +808,7 @@ function commitUnmount(\n \/\/ We are also not using this parent because\n \/\/ the portal will get pushed immediately.\n if (supportsMutation) {\n- unmountHostComponents(current, renderPriorityLevel);\n+ unmountHostComponents(finishedRoot, current, renderPriorityLevel);\n } else if (supportsPersistence) {\n emptyPortalContainer(current);\n }\n@@ -815,11 +822,24 @@ function commitUnmount(\n current.stateNode = null;\n }\n }\n+ return;\n+ }\n+ case DehydratedFragment: {\n+ if (enableSuspenseCallback) {\n+ const hydrationCallbacks = finishedRoot.hydrationCallbacks;\n+ if (hydrationCallbacks !== null) {\n+ const onDeleted = hydrationCallbacks.onDeleted;\n+ if (onDeleted) {\n+ onDeleted((current.stateNode: SuspenseInstance));\n+ }\n+ }\n+ }\n }\n }\n }\n \n function commitNestedUnmounts(\n+ finishedRoot: FiberRoot,\n root: Fiber,\n renderPriorityLevel: ReactPriorityLevel,\n ): void {\n@@ -830,7 +850,7 @@ function commitNestedUnmounts(\n \/\/ we do an inner loop while we're still inside the host node.\n let node: Fiber = root;\n while (true) {\n- commitUnmount(node, renderPriorityLevel);\n+ commitUnmount(finishedRoot, node, renderPriorityLevel);\n \/\/ Visit children because they may contain more composite or host nodes.\n \/\/ Skip portals because commitUnmount() currently visits them recursively.\n if (\n@@ -1081,7 +1101,11 @@ function commitPlacement(finishedWork: Fiber): void {\n }\n }\n \n-function unmountHostComponents(current, renderPriorityLevel): void {\n+function unmountHostComponents(\n+ finishedRoot,\n+ current,\n+ renderPriorityLevel,\n+): void {\n \/\/ We only have the top Fiber that was deleted but we need to recurse down its\n \/\/ children to find all the terminal nodes.\n let node: Fiber = current;\n@@ -1129,7 +1153,7 @@ function unmountHostComponents(current, renderPriorityLevel): void {\n }\n \n if (node.tag === HostComponent || node.tag === HostText) {\n- commitNestedUnmounts(node, renderPriorityLevel);\n+ commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);\n \/\/ After all the children have unmounted, it is now safe to remove the\n \/\/ node from the tree.\n if (currentParentIsContainer) {\n@@ -1146,7 +1170,7 @@ function unmountHostComponents(current, renderPriorityLevel): void {\n \/\/ Don't visit children because we already visited them.\n } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {\n const fundamentalNode = node.stateNode.instance;\n- commitNestedUnmounts(node, renderPriorityLevel);\n+ commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);\n \/\/ After all the children have unmounted, it is now safe to remove the\n \/\/ node from the tree.\n if (currentParentIsContainer) {\n@@ -1164,6 +1188,16 @@ function unmountHostComponents(current, renderPriorityLevel): void {\n enableSuspenseServerRenderer &&\n node.tag === DehydratedFragment\n ) {\n+ if (enableSuspenseCallback) {\n+ const hydrationCallbacks = finishedRoot.hydrationCallbacks;\n+ if (hydrationCallbacks !== null) {\n+ const onDeleted = hydrationCallbacks.onDeleted;\n+ if (onDeleted) {\n+ onDeleted((node.stateNode: SuspenseInstance));\n+ }\n+ }\n+ }\n+\n \/\/ Delete the dehydrated suspense boundary and all of its content.\n if (currentParentIsContainer) {\n clearSuspenseBoundaryFromContainer(\n@@ -1188,7 +1222,7 @@ function unmountHostComponents(current, renderPriorityLevel): void {\n continue;\n }\n } else {\n- commitUnmount(node, renderPriorityLevel);\n+ commitUnmount(finishedRoot, node, renderPriorityLevel);\n \/\/ Visit children because we may find more host components below.\n if (node.child !== null) {\n node.child.return = node;\n@@ -1216,16 +1250,17 @@ function unmountHostComponents(current, renderPriorityLevel): void {\n }\n \n function commitDeletion(\n+ finishedRoot: FiberRoot,\n current: Fiber,\n renderPriorityLevel: ReactPriorityLevel,\n ): void {\n if (supportsMutation) {\n \/\/ Recursively delete all host nodes from the parent.\n \/\/ Detach refs and call componentWillUnmount() on the whole subtree.\n- unmountHostComponents(current, renderPriorityLevel);\n+ unmountHostComponents(finishedRoot, current, renderPriorityLevel);\n } else {\n \/\/ Detach refs and call componentWillUnmount() on the whole subtree.\n- commitNestedUnmounts(current, renderPriorityLevel);\n+ commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);\n }\n detachFiber(current);\n }\n@@ -1382,6 +1417,30 @@ function commitSuspenseComponent(finishedWork: Fiber) {\n }\n }\n \n+function commitSuspenseHydrationCallbacks(\n+ finishedRoot: FiberRoot,\n+ finishedWork: Fiber,\n+) {\n+ if (enableSuspenseCallback) {\n+ const hydrationCallbacks = finishedRoot.hydrationCallbacks;\n+ if (hydrationCallbacks !== null) {\n+ const onHydrated = hydrationCallbacks.onHydrated;\n+ if (onHydrated) {\n+ const newState: SuspenseState | null = finishedWork.memoizedState;\n+ if (newState === null) {\n+ const current = finishedWork.alternate;\n+ if (current !== null) {\n+ const prevState: SuspenseState | null = current.memoizedState;\n+ if (prevState !== null && prevState.dehydrated !== null) {\n+ onHydrated(prevState.dehydrated);\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }\n+}\n+\n function attachSuspenseRetryListeners(finishedWork: Fiber) {\n \/\/ If this boundary just timed out, then it will have a set of thenables.\n \/\/ For each thenable, attach a listener so that when it resolves, React\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\nindex 6433a193ea..6d5fa4f317 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n@@ -859,6 +859,10 @@ function completeWork(\n if ((workInProgress.effectTag & DidCapture) === NoEffect) {\n \/\/ This boundary did not suspend so it's now hydrated and unsuspended.\n workInProgress.memoizedState = null;\n+ if (enableSuspenseCallback) {\n+ \/\/ Notify the callback.\n+ workInProgress.effectTag |= Update;\n+ }\n } else {\n \/\/ Something suspended. Schedule an effect to attach retry listeners.\n workInProgress.effectTag |= Update;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberReconciler.js b\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\nindex 81c8418263..03378ee54a 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\n@@ -20,6 +20,7 @@ import {FundamentalComponent} from 'shared\/ReactWorkTags';\n import type {ReactNodeList} from 'shared\/ReactTypes';\n import type {ExpirationTime} from '.\/ReactFiberExpirationTime';\n import type {SuspenseConfig} from '.\/ReactFiberSuspenseConfig';\n+import type {SuspenseHydrationCallbacks} from '.\/ReactFiberSuspenseComponent';\n \n import {\n findCurrentHostFiber,\n@@ -294,8 +295,9 @@ export function createContainer(\n containerInfo: Container,\n tag: RootTag,\n hydrate: boolean,\n+ hydrationCallbacks: null | SuspenseHydrationCallbacks,\n ): OpaqueRoot {\n- return createFiberRoot(containerInfo, tag, hydrate);\n+ return createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks);\n }\n \n export function updateContainer(\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.js\nindex 148ff8a8e9..7ef9373903 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.js\n@@ -13,11 +13,15 @@ import type {RootTag} from 'shared\/ReactRootTags';\n import type {TimeoutHandle, NoTimeout} from '.\/ReactFiberHostConfig';\n import type {Thenable} from '.\/ReactFiberWorkLoop';\n import type {Interaction} from 'scheduler\/src\/Tracing';\n+import type {SuspenseHydrationCallbacks} from '.\/ReactFiberSuspenseComponent';\n \n import {noTimeout} from '.\/ReactFiberHostConfig';\n import {createHostRootFiber} from '.\/ReactFiber';\n import {NoWork} from '.\/ReactFiberExpirationTime';\n-import {enableSchedulerTracing} from 'shared\/ReactFeatureFlags';\n+import {\n+ enableSchedulerTracing,\n+ enableSuspenseCallback,\n+} from 'shared\/ReactFeatureFlags';\n import {unstable_getThreadID} from 'scheduler\/tracing';\n \n \/\/ TODO: This should be lifted into the renderer.\n@@ -83,6 +87,11 @@ type ProfilingOnlyFiberRootProperties = {|\n pendingInteractionMap: PendingInteractionMap,\n |};\n \n+\/\/ The follow fields are only used by enableSuspenseCallback for hydration.\n+type SuspenseCallbackOnlyFiberRootProperties = {|\n+ hydrationCallbacks: null | SuspenseHydrationCallbacks,\n+|};\n+\n \/\/ Exported FiberRoot type includes all properties,\n \/\/ To avoid requiring potentially error-prone :any casts throughout the project.\n \/\/ Profiling properties are only safe to access in profiling builds (when enableSchedulerTracing is true).\n@@ -91,6 +100,7 @@ type ProfilingOnlyFiberRootProperties = {|\n export type FiberRoot = {\n ...BaseFiberRootProperties,\n ...ProfilingOnlyFiberRootProperties,\n+ ...SuspenseCallbackOnlyFiberRootProperties,\n };\n \n function FiberRootNode(containerInfo, tag, hydrate) {\n@@ -117,14 +127,21 @@ function FiberRootNode(containerInfo, tag, hydrate) {\n this.memoizedInteractions = new Set();\n this.pendingInteractionMap = new Map();\n }\n+ if (enableSuspenseCallback) {\n+ this.hydrationCallbacks = null;\n+ }\n }\n \n export function createFiberRoot(\n containerInfo: any,\n tag: RootTag,\n hydrate: boolean,\n+ hydrationCallbacks: null | SuspenseHydrationCallbacks,\n ): FiberRoot {\n const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);\n+ if (enableSuspenseCallback) {\n+ root.hydrationCallbacks = hydrationCallbacks;\n+ }\n \n \/\/ Cyclic construction. This cheats the type system right now because\n \/\/ stateNode is any.\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberSuspenseComponent.js b\/packages\/react-reconciler\/src\/ReactFiberSuspenseComponent.js\nindex 284c6f4429..dfb6964d64 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberSuspenseComponent.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberSuspenseComponent.js\n@@ -17,6 +17,11 @@ import {\n isSuspenseInstanceFallback,\n } from '.\/ReactFiberHostConfig';\n \n+export type SuspenseHydrationCallbacks = {\n+ onHydrated?: (suspenseInstance: SuspenseInstance) => void,\n+ onDeleted?: (suspenseInstance: SuspenseInstance) => void,\n+};\n+\n \/\/ A null SuspenseState represents an unsuspended normal Suspense boundary.\n \/\/ A non-null SuspenseState means that it is blocked for one reason or another.\n \/\/ - A non-null dehydrated field means it's blocked pending hydration.\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\nindex efbef396d0..21454b8fee 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\n@@ -1638,6 +1638,7 @@ function commitRootImpl(root, renderPriorityLevel) {\n null,\n commitMutationEffects,\n null,\n+ root,\n renderPriorityLevel,\n );\n if (hasCaughtError()) {\n@@ -1648,7 +1649,7 @@ function commitRootImpl(root, renderPriorityLevel) {\n }\n } else {\n try {\n- commitMutationEffects(renderPriorityLevel);\n+ commitMutationEffects(root, renderPriorityLevel);\n } catch (error) {\n invariant(nextEffect !== null, 'Should be working on an effect.');\n captureCommitPhaseError(nextEffect, error);\n@@ -1837,7 +1838,7 @@ function commitBeforeMutationEffects() {\n }\n }\n \n-function commitMutationEffects(renderPriorityLevel) {\n+function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {\n \/\/ TODO: Should probably move the bulk of this function to commitWork.\n while (nextEffect !== null) {\n setCurrentDebugFiberInDEV(nextEffect);\n@@ -1888,7 +1889,7 @@ function commitMutationEffects(renderPriorityLevel) {\n break;\n }\n case Deletion: {\n- commitDeletion(nextEffect, renderPriorityLevel);\n+ commitDeletion(root, nextEffect, renderPriorityLevel);\n break;\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js\nindex 1849eceaae..6a724025ab 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js\n@@ -58,6 +58,7 @@ describe('ReactFiberHostContext', () => {\n \/* root: *\/ null,\n ConcurrentRoot,\n false,\n+ null,\n );\n Renderer.updateContainer(\n \n@@ -110,6 +111,7 @@ describe('ReactFiberHostContext', () => {\n rootContext,\n ConcurrentRoot,\n false,\n+ null,\n );\n Renderer.updateContainer(\n \ndiff --git a\/packages\/react-test-renderer\/src\/ReactTestRenderer.js b\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\nindex 11b6fed109..f5133c5284 100644\n--- a\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\n+++ b\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\n@@ -442,6 +442,7 @@ const ReactTestRendererFiber = {\n container,\n isConcurrent ? ConcurrentRoot : LegacyRoot,\n false,\n+ null,\n );\n invariant(root != null, 'something went wrong');\n updateContainer(element, root, null, null);\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 34d482cf2b..3b64033a6e 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -84,6 +84,8 @@ export const enableUserBlockingEvents = false;\n \/\/ Add a callback property to suspense to notify which promises are currently\n \/\/ in the update queue. This allows reporting and tracing of what is causing\n \/\/ the user to see a loading state.\n+\/\/ Also allows hydration callbacks to fire when a dehydrated boundary gets\n+\/\/ hydrated or deleted.\n export const enableSuspenseCallback = false;\n \n \/\/ Part of the simplification of React.createElement so we can eventually move\n"}

dillon1000/react

Files changed