{"files":[{"status":"M","path":"packages\/react-dom\/index.classic.fb.js"},{"status":"M","path":"packages\/react-dom\/index.experimental.js"},{"status":"M","path":"packages\/react-dom\/index.js"},{"status":"M","path":"packages\/react-dom\/index.modern.fb.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactTestUtilsAct-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactUnmockedSchedulerWarning-test.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOM.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMRoot.js"},{"status":"M","path":"packages\/react-noop-renderer\/src\/ReactNoop.js"},{"status":"M","path":"packages\/react-noop-renderer\/src\/ReactNoopPersistent.js"},{"status":"M","path":"packages\/react-noop-renderer\/src\/createReactNoop.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberRoot.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberRoot.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberThrow.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberThrow.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactRootTags.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactTypeOfMode.js"},{"status":"A","path":"packages\/react-reconciler\/src\/__tests__\/ReactBatchedMode-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactOffscreen-test.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactSuspenseFuzz-test.internal.js"},{"status":"M","path":"packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js"},{"status":"M","path":"packages\/shared\/ReactFeatureFlags.js"}],"patch":"diff --git a\/packages\/react-dom\/index.classic.fb.js b\/packages\/react-dom\/index.classic.fb.js\nindex 0b16c08083..ea9dd9aba2 100644\n--- a\/packages\/react-dom\/index.classic.fb.js\n+++ b\/packages\/react-dom\/index.classic.fb.js\n@@ -30,6 +30,8 @@ export {\n unmountComponentAtNode,\n createRoot,\n createRoot as unstable_createRoot,\n+ createBlockingRoot,\n+ createBlockingRoot as unstable_createBlockingRoot,\n unstable_flushControlled,\n unstable_scheduleHydration,\n unstable_runWithPriority,\ndiff --git a\/packages\/react-dom\/index.experimental.js b\/packages\/react-dom\/index.experimental.js\nindex e685ec6e8a..9ed70f3959 100644\n--- a\/packages\/react-dom\/index.experimental.js\n+++ b\/packages\/react-dom\/index.experimental.js\n@@ -20,6 +20,7 @@ export {\n unmountComponentAtNode,\n \/\/ exposeConcurrentModeAPIs\n createRoot as unstable_createRoot,\n+ createBlockingRoot as unstable_createBlockingRoot,\n unstable_flushControlled,\n unstable_scheduleHydration,\n \/\/ DO NOT USE: Temporarily exposing this to migrate off of Scheduler.runWithPriority.\ndiff --git a\/packages\/react-dom\/index.js b\/packages\/react-dom\/index.js\nindex 7adfaa4ad2..59825272c3 100644\n--- a\/packages\/react-dom\/index.js\n+++ b\/packages\/react-dom\/index.js\n@@ -21,6 +21,8 @@ export {\n unmountComponentAtNode,\n createRoot,\n createRoot as unstable_createRoot,\n+ createBlockingRoot,\n+ createBlockingRoot as unstable_createBlockingRoot,\n unstable_flushControlled,\n unstable_scheduleHydration,\n unstable_runWithPriority,\ndiff --git a\/packages\/react-dom\/index.modern.fb.js b\/packages\/react-dom\/index.modern.fb.js\nindex f91cc3cb89..addcce9774 100644\n--- a\/packages\/react-dom\/index.modern.fb.js\n+++ b\/packages\/react-dom\/index.modern.fb.js\n@@ -15,6 +15,8 @@ export {\n version,\n createRoot,\n createRoot as unstable_createRoot,\n+ createBlockingRoot,\n+ createBlockingRoot as unstable_createBlockingRoot,\n unstable_flushControlled,\n unstable_scheduleHydration,\n unstable_runWithPriority,\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.js\nindex ec3f19950a..ee609d7c2e 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.js\n@@ -593,6 +593,33 @@ describe('ReactDOMFiberAsync', () => {\n expect(containerC.textContent).toEqual('Finished');\n });\n \n+ describe('createBlockingRoot', () => {\n+ \/\/ @gate experimental\n+ it('updates flush without yielding in the next event', () => {\n+ const root = ReactDOM.unstable_createBlockingRoot(container);\n+\n+ function Text(props) {\n+ Scheduler.unstable_yieldValue(props.text);\n+ return props.text;\n+ }\n+\n+ root.render(\n+ <>\n+ \n+ \n+ \n+ <\/>,\n+ );\n+\n+ \/\/ Nothing should have rendered yet\n+ expect(container.textContent).toEqual('');\n+\n+ \/\/ Everything should render immediately in the next event\n+ expect(Scheduler).toFlushExpired(['A', 'B', 'C']);\n+ expect(container.textContent).toEqual('ABC');\n+ });\n+ });\n+\n \/\/ @gate experimental\n it('unmounted roots should never clear newer root content from a container', () => {\n const ref = React.createRef();\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex ec13c31515..2ad221d5fb 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -352,7 +352,7 @@ describe('ReactDOMServerPartialHydration', () => {\n }).toErrorDev(\n 'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +\n 'ReactDOM.hydrate(element, container) to ' +\n- 'ReactDOM.createRoot(container, { hydrate: true })' +\n+ 'ReactDOM.createBlockingRoot(container, { hydrate: true })' +\n '.render(element) or remove the Suspense components from the server ' +\n 'rendered components.' +\n '\\n in Suspense (at **)' +\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\nindex 7b28d572cc..6c48b36bd1 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\n@@ -127,7 +127,7 @@ describe('ReactDOMServerSuspense', () => {\n expect(divB.textContent).toBe('B');\n \n act(() => {\n- const root = ReactDOM.createRoot(parent, {hydrate: true});\n+ const root = ReactDOM.createBlockingRoot(parent, {hydrate: true});\n root.render(example);\n });\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactTestUtilsAct-test.js b\/packages\/react-dom\/src\/__tests__\/ReactTestUtilsAct-test.js\nindex 0496e26692..57807679e8 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactTestUtilsAct-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactTestUtilsAct-test.js\n@@ -72,6 +72,33 @@ describe('ReactTestUtils.act()', () => {\n \n runActTests('legacy mode', renderLegacy, unmountLegacy, rerenderLegacy);\n \n+ \/\/ and then in blocking mode\n+ if (__EXPERIMENTAL__) {\n+ let blockingRoot = null;\n+ const renderBatched = (el, dom) => {\n+ blockingRoot = ReactDOM.unstable_createBlockingRoot(dom);\n+ blockingRoot.render(el);\n+ };\n+\n+ const unmountBatched = dom => {\n+ if (blockingRoot !== null) {\n+ blockingRoot.unmount();\n+ blockingRoot = null;\n+ }\n+ };\n+\n+ const rerenderBatched = el => {\n+ blockingRoot.render(el);\n+ };\n+\n+ runActTests(\n+ 'blocking mode',\n+ renderBatched,\n+ unmountBatched,\n+ rerenderBatched,\n+ );\n+ }\n+\n describe('unacted effects', () => {\n function App() {\n React.useEffect(() => {}, []);\n@@ -97,6 +124,19 @@ describe('ReactTestUtils.act()', () => {\n ]);\n });\n \n+ \/\/ @gate experimental\n+ it('warns in blocking mode', () => {\n+ expect(() => {\n+ const root = ReactDOM.unstable_createBlockingRoot(\n+ document.createElement('div'),\n+ );\n+ root.render();\n+ Scheduler.unstable_flushAll();\n+ }).toErrorDev([\n+ 'An update to App ran an effect, but was not wrapped in act(...)',\n+ ]);\n+ });\n+\n \/\/ @gate experimental\n it('warns in concurrent mode', () => {\n expect(() => {\n@@ -691,10 +731,14 @@ function runActTests(label, render, unmount, rerender) {\n \n it('triggers fallbacks if available', async () => {\n if (label !== 'legacy mode') {\n- \/\/ FIXME: Support for Concurrent Root intentionally removed\n- \/\/ from the public version of `act`. It will be added back in\n- \/\/ a future major version, Concurrent Root officially released.\n- \/\/ Consider skipping all non-Legacy tests in this suite until then.\n+ \/\/ FIXME: Support for Blocking* and Concurrent Mode were\n+ \/\/ intentionally removed from the public version of `act`. It will\n+ \/\/ be added back in a future major version, before Blocking and and\n+ \/\/ Concurrent Mode are officially released. Consider disabling all\n+ \/\/ non-Legacy tests in this suite until then.\n+ \/\/\n+ \/\/ *Blocking Mode actually does happen to work, though\n+ \/\/ not \"officially\" since it's an unreleased feature.\n return;\n }\n \n@@ -750,8 +794,10 @@ function runActTests(label, render, unmount, rerender) {\n \/\/ In Concurrent Mode, refresh transitions delay indefinitely.\n expect(document.querySelector('[data-test-id=spinner]')).toBeNull();\n } else {\n- \/\/ In Legacy Mode, all fallbacks are forced to display,\n- \/\/ even during a refresh transition.\n+ \/\/ In Legacy Mode and Blocking Mode, all fallbacks are forced to\n+ \/\/ display, even during a refresh transition.\n+ \/\/ TODO: Consider delaying indefinitely in Blocking Mode, to match\n+ \/\/ Concurrent Mode semantics.\n expect(\n document.querySelector('[data-test-id=spinner]'),\n ).not.toBeNull();\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactUnmockedSchedulerWarning-test.js b\/packages\/react-dom\/src\/__tests__\/ReactUnmockedSchedulerWarning-test.js\nindex 79437e7f5c..435b4989c1 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactUnmockedSchedulerWarning-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactUnmockedSchedulerWarning-test.js\n@@ -43,3 +43,22 @@ it('should warn when rendering in concurrent mode', () => {\n ReactDOM.unstable_createRoot(document.createElement('div')).render();\n }).toErrorDev([]);\n });\n+\n+\/\/ @gate experimental\n+it('should warn when rendering in blocking mode', () => {\n+ expect(() => {\n+ ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(\n+ ,\n+ );\n+ }).toErrorDev(\n+ 'In Concurrent or Sync modes, the \"scheduler\" module needs to be mocked ' +\n+ 'to guarantee consistent behaviour across tests and browsers.',\n+ {withoutStack: true},\n+ );\n+ \/\/ does not warn twice\n+ expect(() => {\n+ ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(\n+ ,\n+ );\n+ }).toErrorDev([]);\n+});\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOM.js b\/packages\/react-dom\/src\/client\/ReactDOM.js\nindex 7cff285a93..66ae001c3b 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOM.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOM.js\n@@ -18,7 +18,7 @@ import {\n unstable_renderSubtreeIntoContainer,\n unmountComponentAtNode,\n } from '.\/ReactDOMLegacy';\n-import {createRoot, isValidContainer} from '.\/ReactDOMRoot';\n+import {createRoot, createBlockingRoot, isValidContainer} from '.\/ReactDOMRoot';\n import {createEventHandle} from '.\/ReactDOMEventHandle';\n \n import {\n@@ -201,6 +201,7 @@ export {\n unmountComponentAtNode,\n \/\/ exposeConcurrentModeAPIs\n createRoot,\n+ createBlockingRoot,\n flushControlled as unstable_flushControlled,\n scheduleHydration as unstable_scheduleHydration,\n \/\/ Disabled behind disableUnstableRenderSubtreeIntoContainer\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMRoot.js b\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\nindex 56532d5d67..62a72dc229 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\n@@ -51,17 +51,25 @@ import {\n registerMutableSourceForHydration,\n } from 'react-reconciler\/src\/ReactFiberReconciler';\n import invariant from 'shared\/invariant';\n-import {ConcurrentRoot, LegacyRoot} from 'react-reconciler\/src\/ReactRootTags';\n+import {\n+ BlockingRoot,\n+ ConcurrentRoot,\n+ LegacyRoot,\n+} from 'react-reconciler\/src\/ReactRootTags';\n \n function ReactDOMRoot(container: Container, options: void | RootOptions) {\n this._internalRoot = createRootImpl(container, ConcurrentRoot, options);\n }\n \n-function ReactDOMLegacyRoot(container: Container, options: void | RootOptions) {\n- this._internalRoot = createRootImpl(container, LegacyRoot, options);\n+function ReactDOMBlockingRoot(\n+ container: Container,\n+ tag: RootTag,\n+ options: void | RootOptions,\n+) {\n+ this._internalRoot = createRootImpl(container, tag, options);\n }\n \n-ReactDOMRoot.prototype.render = ReactDOMLegacyRoot.prototype.render = function(\n+ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function(\n children: ReactNodeList,\n ): void {\n const root = this._internalRoot;\n@@ -91,7 +99,7 @@ ReactDOMRoot.prototype.render = ReactDOMLegacyRoot.prototype.render = function(\n updateContainer(children, root, null, null);\n };\n \n-ReactDOMRoot.prototype.unmount = ReactDOMLegacyRoot.prototype.unmount = function(): void {\n+ReactDOMRoot.prototype.unmount = ReactDOMBlockingRoot.prototype.unmount = function(): void {\n if (__DEV__) {\n if (typeof arguments[0] === 'function') {\n console.error(\n@@ -161,11 +169,23 @@ export function createRoot(\n return new ReactDOMRoot(container, options);\n }\n \n+export function createBlockingRoot(\n+ container: Container,\n+ options?: RootOptions,\n+): RootType {\n+ invariant(\n+ isValidContainer(container),\n+ 'createRoot(...): Target container is not a DOM element.',\n+ );\n+ warnIfReactDOMContainerInDEV(container);\n+ return new ReactDOMBlockingRoot(container, BlockingRoot, options);\n+}\n+\n export function createLegacyRoot(\n container: Container,\n options?: RootOptions,\n ): RootType {\n- return new ReactDOMLegacyRoot(container, options);\n+ return new ReactDOMBlockingRoot(container, LegacyRoot, options);\n }\n \n export function isValidContainer(node: mixed): boolean {\ndiff --git a\/packages\/react-noop-renderer\/src\/ReactNoop.js b\/packages\/react-noop-renderer\/src\/ReactNoop.js\nindex c09fa2d800..8305dd6d86 100644\n--- a\/packages\/react-noop-renderer\/src\/ReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/ReactNoop.js\n@@ -23,6 +23,7 @@ export const {\n getPendingChildren,\n getOrCreateRootContainer,\n createRoot,\n+ createBlockingRoot,\n createLegacyRoot,\n getChildrenAsJSX,\n getPendingChildrenAsJSX,\ndiff --git a\/packages\/react-noop-renderer\/src\/ReactNoopPersistent.js b\/packages\/react-noop-renderer\/src\/ReactNoopPersistent.js\nindex 97876990a9..c4a73cdfb8 100644\n--- a\/packages\/react-noop-renderer\/src\/ReactNoopPersistent.js\n+++ b\/packages\/react-noop-renderer\/src\/ReactNoopPersistent.js\n@@ -23,6 +23,7 @@ export const {\n getPendingChildren,\n getOrCreateRootContainer,\n createRoot,\n+ createBlockingRoot,\n createLegacyRoot,\n getChildrenAsJSX,\n getPendingChildrenAsJSX,\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 9eef962f13..743470966b 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -21,7 +21,11 @@ import type {RootTag} from 'react-reconciler\/src\/ReactRootTags';\n \n import * as Scheduler from 'scheduler\/unstable_mock';\n import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared\/ReactSymbols';\n-import {ConcurrentRoot, LegacyRoot} from 'react-reconciler\/src\/ReactRootTags';\n+import {\n+ ConcurrentRoot,\n+ BlockingRoot,\n+ LegacyRoot,\n+} from 'react-reconciler\/src\/ReactRootTags';\n \n import {\n enableNativeEventPriorityInference,\n@@ -752,6 +756,33 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n };\n },\n \n+ createBlockingRoot() {\n+ const container = {\n+ rootID: '' + idCounter++,\n+ pendingChildren: [],\n+ children: [],\n+ };\n+ const fiberRoot = NoopRenderer.createContainer(\n+ container,\n+ BlockingRoot,\n+ false,\n+ null,\n+ null,\n+ );\n+ return {\n+ _Scheduler: Scheduler,\n+ render(children: ReactNodeList) {\n+ NoopRenderer.updateContainer(children, fiberRoot, null, null);\n+ },\n+ getChildren() {\n+ return getChildren(container);\n+ },\n+ getChildrenAsJSX() {\n+ return getChildrenAsJSX(container);\n+ },\n+ };\n+ },\n+\n createLegacyRoot() {\n const container = {\n rootID: '' + idCounter++,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.new.js b\/packages\/react-reconciler\/src\/ReactFiber.new.js\nindex b386eac09f..f1a0f56b23 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.new.js\n@@ -26,7 +26,7 @@ import {\n enableScopeAPI,\n } from 'shared\/ReactFeatureFlags';\n import {NoFlags, Placement, StaticMask} from '.\/ReactFiberFlags';\n-import {ConcurrentRoot} from '.\/ReactRootTags';\n+import {ConcurrentRoot, BlockingRoot} from '.\/ReactRootTags';\n import {\n IndeterminateComponent,\n ClassComponent,\n@@ -68,6 +68,7 @@ import {\n ProfileMode,\n StrictLegacyMode,\n StrictEffectsMode,\n+ BlockingMode,\n } from '.\/ReactTypeOfMode';\n import {\n REACT_FORWARD_REF_TYPE,\n@@ -426,7 +427,25 @@ export function createHostRootFiber(\n ): Fiber {\n let mode;\n if (tag === ConcurrentRoot) {\n- mode = ConcurrentMode;\n+ mode = ConcurrentMode | BlockingMode;\n+ if (strictModeLevelOverride !== null) {\n+ if (strictModeLevelOverride >= 1) {\n+ mode |= StrictLegacyMode;\n+ }\n+ if (enableStrictEffects) {\n+ if (strictModeLevelOverride >= 2) {\n+ mode |= StrictEffectsMode;\n+ }\n+ }\n+ } else {\n+ if (enableStrictEffects && createRootStrictEffectsByDefault) {\n+ mode |= StrictLegacyMode | StrictEffectsMode;\n+ } else {\n+ mode |= StrictLegacyMode;\n+ }\n+ }\n+ } else if (tag === BlockingRoot) {\n+ mode = BlockingMode;\n if (strictModeLevelOverride !== null) {\n if (strictModeLevelOverride >= 1) {\n mode |= StrictLegacyMode;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.old.js b\/packages\/react-reconciler\/src\/ReactFiber.old.js\nindex 603feb345f..6419fd6b26 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.old.js\n@@ -26,7 +26,7 @@ import {\n enableScopeAPI,\n } from 'shared\/ReactFeatureFlags';\n import {NoFlags, Placement, StaticMask} from '.\/ReactFiberFlags';\n-import {ConcurrentRoot} from '.\/ReactRootTags';\n+import {ConcurrentRoot, BlockingRoot} from '.\/ReactRootTags';\n import {\n IndeterminateComponent,\n ClassComponent,\n@@ -68,6 +68,7 @@ import {\n ProfileMode,\n StrictLegacyMode,\n StrictEffectsMode,\n+ BlockingMode,\n } from '.\/ReactTypeOfMode';\n import {\n REACT_FORWARD_REF_TYPE,\n@@ -426,7 +427,25 @@ export function createHostRootFiber(\n ): Fiber {\n let mode;\n if (tag === ConcurrentRoot) {\n- mode = ConcurrentMode;\n+ mode = ConcurrentMode | BlockingMode;\n+ if (strictModeLevelOverride !== null) {\n+ if (strictModeLevelOverride >= 1) {\n+ mode |= StrictLegacyMode;\n+ }\n+ if (enableStrictEffects) {\n+ if (strictModeLevelOverride >= 2) {\n+ mode |= StrictEffectsMode;\n+ }\n+ }\n+ } else {\n+ if (enableStrictEffects && createRootStrictEffectsByDefault) {\n+ mode |= StrictLegacyMode | StrictEffectsMode;\n+ } else {\n+ mode |= StrictLegacyMode;\n+ }\n+ }\n+ } else if (tag === BlockingRoot) {\n+ mode = BlockingMode;\n if (strictModeLevelOverride !== null) {\n if (strictModeLevelOverride >= 1) {\n mode |= StrictLegacyMode;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\nindex a4868edfd6..6dffcc3289 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n@@ -126,6 +126,7 @@ import {\n NoMode,\n ProfileMode,\n StrictLegacyMode,\n+ BlockingMode,\n } from '.\/ReactTypeOfMode';\n import {\n shouldSetTextContent,\n@@ -603,6 +604,7 @@ function updateOffscreenComponent(\n \/\/ Rendering a hidden tree.\n if ((workInProgress.mode & ConcurrentMode) === NoMode) {\n \/\/ In legacy sync mode, don't defer the subtree. Render it now.\n+ \/\/ TODO: Figure out what we should do in Blocking mode.\n const nextState: OffscreenState = {\n baseLanes: NoLanes,\n cachePool: null,\n@@ -2115,10 +2117,7 @@ function mountSuspenseFallbackChildren(\n \n let primaryChildFragment;\n let fallbackChildFragment;\n- if (\n- (mode & ConcurrentMode) === NoMode &&\n- progressedPrimaryFragment !== null\n- ) {\n+ if ((mode & BlockingMode) === NoMode && progressedPrimaryFragment !== null) {\n \/\/ In legacy mode, we commit the primary tree as if it successfully\n \/\/ completed, even though it's in an inconsistent state.\n primaryChildFragment = progressedPrimaryFragment;\n@@ -2190,7 +2189,7 @@ function updateSuspensePrimaryChildren(\n children: primaryChildren,\n },\n );\n- if ((workInProgress.mode & ConcurrentMode) === NoMode) {\n+ if ((workInProgress.mode & BlockingMode) === NoMode) {\n primaryChildFragment.lanes = renderLanes;\n }\n primaryChildFragment.return = workInProgress;\n@@ -2231,7 +2230,7 @@ function updateSuspenseFallbackChildren(\n if (\n \/\/ In legacy mode, we commit the primary tree as if it successfully\n \/\/ completed, even though it's in an inconsistent state.\n- (mode & ConcurrentMode) === NoMode &&\n+ (mode & BlockingMode) === NoMode &&\n \/\/ Make sure we're on the second pass, i.e. the primary child fragment was\n \/\/ already cloned. In legacy mode, the only case where this isn't true is\n \/\/ when DevTools forces us to display a fallback; we skip the first render\n@@ -2353,7 +2352,7 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(\n primaryChildFragment.sibling = fallbackChildFragment;\n workInProgress.child = primaryChildFragment;\n \n- if ((workInProgress.mode & ConcurrentMode) !== NoMode) {\n+ if ((workInProgress.mode & BlockingMode) !== NoMode) {\n \/\/ We will have dropped the effect list which contains the\n \/\/ deletion. We need to reconcile to delete the current child.\n reconcileChildFibers(workInProgress, current.child, null, renderLanes);\n@@ -2369,12 +2368,12 @@ function mountDehydratedSuspenseComponent(\n ): null | Fiber {\n \/\/ During the first pass, we'll bail out and not drill into the children.\n \/\/ Instead, we'll leave the content in place and try to hydrate it later.\n- if ((workInProgress.mode & ConcurrentMode) === NoMode) {\n+ if ((workInProgress.mode & BlockingMode) === NoMode) {\n if (__DEV__) {\n console.error(\n 'Cannot hydrate Suspense in legacy mode. Switch from ' +\n 'ReactDOM.hydrate(element, container) to ' +\n- 'ReactDOM.createRoot(container, { hydrate: true })' +\n+ 'ReactDOM.createBlockingRoot(container, { hydrate: true })' +\n '.render(element) or remove the Suspense components from ' +\n 'the server rendered components.',\n );\n@@ -2427,7 +2426,7 @@ function updateDehydratedSuspenseComponent(\n );\n }\n \n- if ((workInProgress.mode & ConcurrentMode) === NoMode) {\n+ if ((workInProgress.mode & BlockingMode) === NoMode) {\n return retrySuspenseComponentWithoutHydrating(\n current,\n workInProgress,\n@@ -2832,7 +2831,7 @@ function updateSuspenseListComponent(\n }\n pushSuspenseContext(workInProgress, suspenseContext);\n \n- if ((workInProgress.mode & ConcurrentMode) === NoMode) {\n+ if ((workInProgress.mode & BlockingMode) === NoMode) {\n \/\/ In legacy mode, SuspenseList doesn't work so we just\n \/\/ use make it a noop by treating it as the default revealOrder.\n workInProgress.memoizedState = null;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\nindex c706200815..7801afe9fa 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n@@ -126,6 +126,7 @@ import {\n NoMode,\n ProfileMode,\n StrictLegacyMode,\n+ BlockingMode,\n } from '.\/ReactTypeOfMode';\n import {\n shouldSetTextContent,\n@@ -603,6 +604,7 @@ function updateOffscreenComponent(\n \/\/ Rendering a hidden tree.\n if ((workInProgress.mode & ConcurrentMode) === NoMode) {\n \/\/ In legacy sync mode, don't defer the subtree. Render it now.\n+ \/\/ TODO: Figure out what we should do in Blocking mode.\n const nextState: OffscreenState = {\n baseLanes: NoLanes,\n cachePool: null,\n@@ -2115,10 +2117,7 @@ function mountSuspenseFallbackChildren(\n \n let primaryChildFragment;\n let fallbackChildFragment;\n- if (\n- (mode & ConcurrentMode) === NoMode &&\n- progressedPrimaryFragment !== null\n- ) {\n+ if ((mode & BlockingMode) === NoMode && progressedPrimaryFragment !== null) {\n \/\/ In legacy mode, we commit the primary tree as if it successfully\n \/\/ completed, even though it's in an inconsistent state.\n primaryChildFragment = progressedPrimaryFragment;\n@@ -2190,7 +2189,7 @@ function updateSuspensePrimaryChildren(\n children: primaryChildren,\n },\n );\n- if ((workInProgress.mode & ConcurrentMode) === NoMode) {\n+ if ((workInProgress.mode & BlockingMode) === NoMode) {\n primaryChildFragment.lanes = renderLanes;\n }\n primaryChildFragment.return = workInProgress;\n@@ -2231,7 +2230,7 @@ function updateSuspenseFallbackChildren(\n if (\n \/\/ In legacy mode, we commit the primary tree as if it successfully\n \/\/ completed, even though it's in an inconsistent state.\n- (mode & ConcurrentMode) === NoMode &&\n+ (mode & BlockingMode) === NoMode &&\n \/\/ Make sure we're on the second pass, i.e. the primary child fragment was\n \/\/ already cloned. In legacy mode, the only case where this isn't true is\n \/\/ when DevTools forces us to display a fallback; we skip the first render\n@@ -2353,7 +2352,7 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(\n primaryChildFragment.sibling = fallbackChildFragment;\n workInProgress.child = primaryChildFragment;\n \n- if ((workInProgress.mode & ConcurrentMode) !== NoMode) {\n+ if ((workInProgress.mode & BlockingMode) !== NoMode) {\n \/\/ We will have dropped the effect list which contains the\n \/\/ deletion. We need to reconcile to delete the current child.\n reconcileChildFibers(workInProgress, current.child, null, renderLanes);\n@@ -2369,12 +2368,12 @@ function mountDehydratedSuspenseComponent(\n ): null | Fiber {\n \/\/ During the first pass, we'll bail out and not drill into the children.\n \/\/ Instead, we'll leave the content in place and try to hydrate it later.\n- if ((workInProgress.mode & ConcurrentMode) === NoMode) {\n+ if ((workInProgress.mode & BlockingMode) === NoMode) {\n if (__DEV__) {\n console.error(\n 'Cannot hydrate Suspense in legacy mode. Switch from ' +\n 'ReactDOM.hydrate(element, container) to ' +\n- 'ReactDOM.createRoot(container, { hydrate: true })' +\n+ 'ReactDOM.createBlockingRoot(container, { hydrate: true })' +\n '.render(element) or remove the Suspense components from ' +\n 'the server rendered components.',\n );\n@@ -2427,7 +2426,7 @@ function updateDehydratedSuspenseComponent(\n );\n }\n \n- if ((workInProgress.mode & ConcurrentMode) === NoMode) {\n+ if ((workInProgress.mode & BlockingMode) === NoMode) {\n return retrySuspenseComponentWithoutHydrating(\n current,\n workInProgress,\n@@ -2832,7 +2831,7 @@ function updateSuspenseListComponent(\n }\n pushSuspenseContext(workInProgress, suspenseContext);\n \n- if ((workInProgress.mode & ConcurrentMode) === NoMode) {\n+ if ((workInProgress.mode & BlockingMode) === NoMode) {\n \/\/ In legacy mode, SuspenseList doesn't work so we just\n \/\/ use make it a noop by treating it as the default revealOrder.\n workInProgress.memoizedState = null;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\nindex 1dcc0ec9c8..47f65d2da6 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n@@ -55,7 +55,12 @@ import {\n LegacyHiddenComponent,\n CacheComponent,\n } from '.\/ReactWorkTags';\n-import {NoMode, ConcurrentMode, ProfileMode} from '.\/ReactTypeOfMode';\n+import {\n+ NoMode,\n+ BlockingMode,\n+ ConcurrentMode,\n+ ProfileMode,\n+} from '.\/ReactTypeOfMode';\n import {\n Ref,\n Update,\n@@ -1054,10 +1059,12 @@ function completeWork(\n }\n \n if (nextDidTimeout && !prevDidTimeout) {\n+ \/\/ If this subtree is running in blocking mode we can suspend,\n+ \/\/ otherwise we won't suspend.\n \/\/ TODO: This will still suspend a synchronous tree if anything\n \/\/ in the concurrent tree already suspended during this render.\n \/\/ This is a known bug.\n- if ((workInProgress.mode & ConcurrentMode) !== NoMode) {\n+ if ((workInProgress.mode & BlockingMode) !== NoMode) {\n \/\/ TODO: Move this back to throwException because this is too late\n \/\/ if this is a large tree which is common for initial loads. We\n \/\/ don't know if we should restart a render or not until we get\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\nindex dc1112d3b8..df878d24e7 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n@@ -55,7 +55,12 @@ import {\n LegacyHiddenComponent,\n CacheComponent,\n } from '.\/ReactWorkTags';\n-import {NoMode, ConcurrentMode, ProfileMode} from '.\/ReactTypeOfMode';\n+import {\n+ NoMode,\n+ BlockingMode,\n+ ConcurrentMode,\n+ ProfileMode,\n+} from '.\/ReactTypeOfMode';\n import {\n Ref,\n Update,\n@@ -1054,10 +1059,12 @@ function completeWork(\n }\n \n if (nextDidTimeout && !prevDidTimeout) {\n+ \/\/ If this subtree is running in blocking mode we can suspend,\n+ \/\/ otherwise we won't suspend.\n \/\/ TODO: This will still suspend a synchronous tree if anything\n \/\/ in the concurrent tree already suspended during this render.\n \/\/ This is a known bug.\n- if ((workInProgress.mode & ConcurrentMode) !== NoMode) {\n+ if ((workInProgress.mode & BlockingMode) !== NoMode) {\n \/\/ TODO: Move this back to throwException because this is too late\n \/\/ if this is a large tree which is common for initial loads. We\n \/\/ don't know if we should restart a render or not until we get\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\nindex 80d62f2596..9d1fa5f82e 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\n@@ -34,7 +34,7 @@ import {\n \n import {\n NoMode,\n- ConcurrentMode,\n+ BlockingMode,\n DebugTracingMode,\n StrictEffectsMode,\n } from '.\/ReactTypeOfMode';\n@@ -1829,7 +1829,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {\n \n const setId = mountState(id)[1];\n \n- if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {\n+ if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {\n if (\n __DEV__ &&\n enableStrictEffects &&\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\nindex 2bdead48f3..61f1a17452 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\n@@ -34,7 +34,7 @@ import {\n \n import {\n NoMode,\n- ConcurrentMode,\n+ BlockingMode,\n DebugTracingMode,\n StrictEffectsMode,\n } from '.\/ReactTypeOfMode';\n@@ -1829,7 +1829,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {\n \n const setId = mountState(id)[1];\n \n- if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {\n+ if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {\n if (\n __DEV__ &&\n enableStrictEffects &&\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\nindex f06925e10f..ae6a5bdb59 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\n@@ -25,7 +25,7 @@ import {\n } from 'shared\/ReactFeatureFlags';\n import {unstable_getThreadID} from 'scheduler\/tracing';\n import {initializeUpdateQueue} from '.\/ReactUpdateQueue.new';\n-import {LegacyRoot, ConcurrentRoot} from '.\/ReactRootTags';\n+import {LegacyRoot, BlockingRoot, ConcurrentRoot} from '.\/ReactRootTags';\n \n function FiberRootNode(containerInfo, tag, hydrate) {\n this.tag = tag;\n@@ -73,6 +73,9 @@ function FiberRootNode(containerInfo, tag, hydrate) {\n \n if (__DEV__) {\n switch (tag) {\n+ case BlockingRoot:\n+ this._debugRootType = 'createBlockingRoot()';\n+ break;\n case ConcurrentRoot:\n this._debugRootType = 'createRoot()';\n break;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\nindex 712803920e..0c0d45c098 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\n@@ -25,7 +25,7 @@ import {\n } from 'shared\/ReactFeatureFlags';\n import {unstable_getThreadID} from 'scheduler\/tracing';\n import {initializeUpdateQueue} from '.\/ReactUpdateQueue.old';\n-import {LegacyRoot, ConcurrentRoot} from '.\/ReactRootTags';\n+import {LegacyRoot, BlockingRoot, ConcurrentRoot} from '.\/ReactRootTags';\n \n function FiberRootNode(containerInfo, tag, hydrate) {\n this.tag = tag;\n@@ -73,6 +73,9 @@ function FiberRootNode(containerInfo, tag, hydrate) {\n \n if (__DEV__) {\n switch (tag) {\n+ case BlockingRoot:\n+ this._debugRootType = 'createBlockingRoot()';\n+ break;\n case ConcurrentRoot:\n this._debugRootType = 'createRoot()';\n break;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js b\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\nindex 0f7dd89263..af199f0aa8 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\n@@ -34,7 +34,7 @@ import {\n ForceUpdateForLegacySuspense,\n } from '.\/ReactFiberFlags';\n import {shouldCaptureSuspense} from '.\/ReactFiberSuspenseComponent.new';\n-import {NoMode, ConcurrentMode, DebugTracingMode} from '.\/ReactTypeOfMode';\n+import {NoMode, BlockingMode, DebugTracingMode} from '.\/ReactTypeOfMode';\n import {\n enableDebugTracing,\n enableSchedulingProfiler,\n@@ -214,7 +214,7 @@ function throwException(\n \/\/ A legacy mode Suspense quirk, only relevant to hook components.\n const tag = sourceFiber.tag;\n if (\n- (sourceFiber.mode & ConcurrentMode) === NoMode &&\n+ (sourceFiber.mode & BlockingMode) === NoMode &&\n (tag === FunctionComponent ||\n tag === ForwardRef ||\n tag === SimpleMemoComponent)\n@@ -255,13 +255,13 @@ function throwException(\n wakeables.add(wakeable);\n }\n \n- \/\/ If the boundary is in legacy mode, we should *not*\n+ \/\/ If the boundary is outside of blocking mode, we should *not*\n \/\/ suspend the commit. Pretend as if the suspended component rendered\n \/\/ null and keep rendering. In the commit phase, we'll schedule a\n \/\/ subsequent synchronous update to re-render the Suspense.\n \/\/\n \/\/ Note: It doesn't matter whether the component that suspended was\n- \/\/ inside a concurrent mode tree. If the Suspense is outside of it, we\n+ \/\/ inside a blocking mode tree. If the Suspense is outside of it, we\n \/\/ should *not* suspend the commit.\n \/\/\n \/\/ If the suspense boundary suspended itself suspended, we don't have to\n@@ -269,7 +269,7 @@ function throwException(\n \/\/ directly do a second pass over the fallback in this render and\n \/\/ pretend we meant to render that directly.\n if (\n- (workInProgress.mode & ConcurrentMode) === NoMode &&\n+ (workInProgress.mode & BlockingMode) === NoMode &&\n workInProgress !== returnFiber\n ) {\n workInProgress.flags |= DidCapture;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js b\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\nindex f7ceb05202..6ae53d02fc 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\n@@ -34,7 +34,7 @@ import {\n ForceUpdateForLegacySuspense,\n } from '.\/ReactFiberFlags';\n import {shouldCaptureSuspense} from '.\/ReactFiberSuspenseComponent.old';\n-import {NoMode, ConcurrentMode, DebugTracingMode} from '.\/ReactTypeOfMode';\n+import {NoMode, BlockingMode, DebugTracingMode} from '.\/ReactTypeOfMode';\n import {\n enableDebugTracing,\n enableSchedulingProfiler,\n@@ -214,7 +214,7 @@ function throwException(\n \/\/ A legacy mode Suspense quirk, only relevant to hook components.\n const tag = sourceFiber.tag;\n if (\n- (sourceFiber.mode & ConcurrentMode) === NoMode &&\n+ (sourceFiber.mode & BlockingMode) === NoMode &&\n (tag === FunctionComponent ||\n tag === ForwardRef ||\n tag === SimpleMemoComponent)\n@@ -255,13 +255,13 @@ function throwException(\n wakeables.add(wakeable);\n }\n \n- \/\/ If the boundary is in legacy mode, we should *not*\n+ \/\/ If the boundary is outside of blocking mode, we should *not*\n \/\/ suspend the commit. Pretend as if the suspended component rendered\n \/\/ null and keep rendering. In the commit phase, we'll schedule a\n \/\/ subsequent synchronous update to re-render the Suspense.\n \/\/\n \/\/ Note: It doesn't matter whether the component that suspended was\n- \/\/ inside a concurrent mode tree. If the Suspense is outside of it, we\n+ \/\/ inside a blocking mode tree. If the Suspense is outside of it, we\n \/\/ should *not* suspend the commit.\n \/\/\n \/\/ If the suspense boundary suspended itself suspended, we don't have to\n@@ -269,7 +269,7 @@ function throwException(\n \/\/ directly do a second pass over the fallback in this render and\n \/\/ pretend we meant to render that directly.\n if (\n- (workInProgress.mode & ConcurrentMode) === NoMode &&\n+ (workInProgress.mode & BlockingMode) === NoMode &&\n workInProgress !== returnFiber\n ) {\n workInProgress.flags |= DidCapture;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\nindex b404837cb2..7caee07872 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n@@ -106,6 +106,7 @@ import {\n NoMode,\n StrictLegacyMode,\n ProfileMode,\n+ BlockingMode,\n ConcurrentMode,\n } from '.\/ReactTypeOfMode';\n import {\n@@ -391,7 +392,7 @@ export function getCurrentTime() {\n export function requestUpdateLane(fiber: Fiber): Lane {\n \/\/ Special cases\n const mode = fiber.mode;\n- if ((mode & ConcurrentMode) === NoMode) {\n+ if ((mode & BlockingMode) === NoMode) {\n return (SyncLane: Lane);\n } else if ((mode & ConcurrentMode) === NoMode) {\n return getCurrentPriorityLevel() === ImmediateSchedulerPriority\n@@ -482,7 +483,7 @@ function requestRetryLane(fiber: Fiber) {\n \n \/\/ Special cases\n const mode = fiber.mode;\n- if ((mode & ConcurrentMode) === NoMode) {\n+ if ((mode & BlockingMode) === NoMode) {\n return (SyncLane: Lane);\n } else if ((mode & ConcurrentMode) === NoMode) {\n return getCurrentPriorityLevel() === ImmediateSchedulerPriority\n@@ -676,7 +677,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {\n \/\/ Requires some refactoring. Not a big deal though since it's rare for\n \/\/ concurrent apps to have more than a single root.\n workInProgressRoot !== null &&\n- (fiber.mode & ConcurrentMode) !== NoMode &&\n+ (fiber.mode & BlockingMode) !== NoMode &&\n \/\/ If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),\n \/\/ then don't treat this as an interleaved update. This pattern is\n \/\/ accompanied by a warning but we haven't fully deprecated it yet. We can\n@@ -2624,7 +2625,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {\n return;\n }\n \n- if (!(fiber.mode & ConcurrentMode)) {\n+ if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {\n return;\n }\n \n@@ -3003,7 +3004,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {\n didWarnAboutUnmockedScheduler === false &&\n Scheduler.unstable_flushAllWithoutAsserting === undefined\n ) {\n- if (fiber.mode & ConcurrentMode) {\n+ if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {\n didWarnAboutUnmockedScheduler = true;\n console.error(\n 'In Concurrent or Sync modes, the \"scheduler\" module needs to be mocked ' +\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\nindex 0a366eece7..1467929ce4 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n@@ -106,6 +106,7 @@ import {\n NoMode,\n StrictLegacyMode,\n ProfileMode,\n+ BlockingMode,\n ConcurrentMode,\n } from '.\/ReactTypeOfMode';\n import {\n@@ -391,7 +392,7 @@ export function getCurrentTime() {\n export function requestUpdateLane(fiber: Fiber): Lane {\n \/\/ Special cases\n const mode = fiber.mode;\n- if ((mode & ConcurrentMode) === NoMode) {\n+ if ((mode & BlockingMode) === NoMode) {\n return (SyncLane: Lane);\n } else if ((mode & ConcurrentMode) === NoMode) {\n return getCurrentPriorityLevel() === ImmediateSchedulerPriority\n@@ -482,7 +483,7 @@ function requestRetryLane(fiber: Fiber) {\n \n \/\/ Special cases\n const mode = fiber.mode;\n- if ((mode & ConcurrentMode) === NoMode) {\n+ if ((mode & BlockingMode) === NoMode) {\n return (SyncLane: Lane);\n } else if ((mode & ConcurrentMode) === NoMode) {\n return getCurrentPriorityLevel() === ImmediateSchedulerPriority\n@@ -676,7 +677,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {\n \/\/ Requires some refactoring. Not a big deal though since it's rare for\n \/\/ concurrent apps to have more than a single root.\n workInProgressRoot !== null &&\n- (fiber.mode & ConcurrentMode) !== NoMode &&\n+ (fiber.mode & BlockingMode) !== NoMode &&\n \/\/ If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),\n \/\/ then don't treat this as an interleaved update. This pattern is\n \/\/ accompanied by a warning but we haven't fully deprecated it yet. We can\n@@ -2624,7 +2625,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {\n return;\n }\n \n- if (!(fiber.mode & ConcurrentMode)) {\n+ if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {\n return;\n }\n \n@@ -3003,7 +3004,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {\n didWarnAboutUnmockedScheduler === false &&\n Scheduler.unstable_flushAllWithoutAsserting === undefined\n ) {\n- if (fiber.mode & ConcurrentMode) {\n+ if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {\n didWarnAboutUnmockedScheduler = true;\n console.error(\n 'In Concurrent or Sync modes, the \"scheduler\" module needs to be mocked ' +\ndiff --git a\/packages\/react-reconciler\/src\/ReactRootTags.js b\/packages\/react-reconciler\/src\/ReactRootTags.js\nindex cda44d6e1e..409f4bd931 100644\n--- a\/packages\/react-reconciler\/src\/ReactRootTags.js\n+++ b\/packages\/react-reconciler\/src\/ReactRootTags.js\n@@ -7,7 +7,8 @@\n * @flow\n *\/\n \n-export type RootTag = 0 | 1;\n+export type RootTag = 0 | 1 | 2;\n \n export const LegacyRoot = 0;\n-export const ConcurrentRoot = 1;\n+export const BlockingRoot = 1;\n+export const ConcurrentRoot = 2;\ndiff --git a\/packages\/react-reconciler\/src\/ReactTypeOfMode.js b\/packages\/react-reconciler\/src\/ReactTypeOfMode.js\nindex 466363fabd..a6499be7ac 100644\n--- a\/packages\/react-reconciler\/src\/ReactTypeOfMode.js\n+++ b\/packages\/react-reconciler\/src\/ReactTypeOfMode.js\n@@ -10,9 +10,10 @@\n export type TypeOfMode = number;\n \n export const NoMode = \/* *\/ 0b000000;\n-\/\/ TODO: Remove ConcurrentMode by reading from the root tag instead\n-export const ConcurrentMode = \/* *\/ 0b000001;\n-export const ProfileMode = \/* *\/ 0b000010;\n-export const DebugTracingMode = \/* *\/ 0b000100;\n-export const StrictLegacyMode = \/* *\/ 0b001000;\n-export const StrictEffectsMode = \/* *\/ 0b010000;\n+\/\/ TODO: Remove BlockingMode and ConcurrentMode by reading from the root tag instead\n+export const BlockingMode = \/* *\/ 0b000001;\n+export const ConcurrentMode = \/* *\/ 0b000010;\n+export const ProfileMode = \/* *\/ 0b000100;\n+export const DebugTracingMode = \/* *\/ 0b001000;\n+export const StrictLegacyMode = \/* *\/ 0b010000;\n+export const StrictEffectsMode = \/* *\/ 0b100000;\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactBatchedMode-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactBatchedMode-test.internal.js\nnew file mode 100644\nindex 0000000000..c6af59fbd9\n--- \/dev\/null\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactBatchedMode-test.internal.js\n@@ -0,0 +1,167 @@\n+let React;\n+let ReactFeatureFlags;\n+let ReactNoop;\n+let Scheduler;\n+let ReactCache;\n+let Suspense;\n+let TextResource;\n+\n+describe('ReactBlockingMode', () => {\n+ beforeEach(() => {\n+ jest.resetModules();\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+\n+ ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;\n+ React = require('react');\n+ ReactNoop = require('react-noop-renderer');\n+ Scheduler = require('scheduler');\n+ ReactCache = require('react-cache');\n+ Suspense = React.Suspense;\n+\n+ TextResource = ReactCache.unstable_createResource(\n+ ([text, ms = 0]) => {\n+ return new Promise((resolve, reject) =>\n+ setTimeout(() => {\n+ Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);\n+ resolve(text);\n+ }, ms),\n+ );\n+ },\n+ ([text, ms]) => text,\n+ );\n+ });\n+\n+ function Text(props) {\n+ Scheduler.unstable_yieldValue(props.text);\n+ return props.text;\n+ }\n+\n+ function AsyncText(props) {\n+ const text = props.text;\n+ try {\n+ TextResource.read([props.text, props.ms]);\n+ Scheduler.unstable_yieldValue(text);\n+ return props.text;\n+ } catch (promise) {\n+ if (typeof promise.then === 'function') {\n+ Scheduler.unstable_yieldValue(`Suspend! [${text}]`);\n+ } else {\n+ Scheduler.unstable_yieldValue(`Error! [${text}]`);\n+ }\n+ throw promise;\n+ }\n+ }\n+\n+ it('updates flush without yielding in the next event', () => {\n+ const root = ReactNoop.createBlockingRoot();\n+\n+ root.render(\n+ <>\n+ \n+ \n+ \n+ <\/>,\n+ );\n+\n+ \/\/ Nothing should have rendered yet\n+ expect(root).toMatchRenderedOutput(null);\n+\n+ \/\/ Everything should render immediately in the next event\n+ expect(Scheduler).toFlushExpired(['A', 'B', 'C']);\n+ expect(root).toMatchRenderedOutput('ABC');\n+ });\n+\n+ it('layout updates flush synchronously in same event', () => {\n+ const {useLayoutEffect} = React;\n+\n+ function App() {\n+ useLayoutEffect(() => {\n+ Scheduler.unstable_yieldValue('Layout effect');\n+ });\n+ return ;\n+ }\n+\n+ const root = ReactNoop.createBlockingRoot();\n+ root.render();\n+ expect(root).toMatchRenderedOutput(null);\n+\n+ expect(Scheduler).toFlushExpired(['Hi', 'Layout effect']);\n+ expect(root).toMatchRenderedOutput('Hi');\n+ });\n+\n+ it('uses proper Suspense semantics, not legacy ones', async () => {\n+ const root = ReactNoop.createBlockingRoot();\n+ root.render(\n+ }>\n+ \n+ \n+ <\/span>\n+ \n+ \n+ <\/span>\n+ \n+ \n+ <\/span>\n+ <\/Suspense>,\n+ );\n+\n+ expect(Scheduler).toFlushExpired(['A', 'Suspend! [B]', 'C', 'Loading...']);\n+ \/\/ In Legacy Mode, A and B would mount in a hidden primary tree. In Batched\n+ \/\/ and Concurrent Mode, nothing in the primary tree should mount. But the\n+ \/\/ fallback should mount immediately.\n+ expect(root).toMatchRenderedOutput('Loading...');\n+\n+ await jest.advanceTimersByTime(1000);\n+ expect(Scheduler).toHaveYielded(['Promise resolved [B]']);\n+ expect(Scheduler).toFlushExpired(['A', 'B', 'C']);\n+ expect(root).toMatchRenderedOutput(\n+ <>\n+ A<\/span>\n+ B<\/span>\n+ C<\/span>\n+ <\/>,\n+ );\n+ });\n+\n+ it('flushSync does not flush batched work', () => {\n+ const {useState, forwardRef, useImperativeHandle} = React;\n+ const root = ReactNoop.createBlockingRoot();\n+\n+ const Foo = forwardRef(({label}, ref) => {\n+ const [step, setStep] = useState(0);\n+ useImperativeHandle(ref, () => ({setStep}));\n+ return ;\n+ });\n+\n+ const foo1 = React.createRef(null);\n+ const foo2 = React.createRef(null);\n+ root.render(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+\n+ \/\/ Mount\n+ expect(Scheduler).toFlushExpired(['A0', 'B0']);\n+ expect(root).toMatchRenderedOutput('A0B0');\n+\n+ \/\/ Schedule a batched update to the first sibling\n+ ReactNoop.batchedUpdates(() => foo1.current.setStep(1));\n+\n+ \/\/ Before it flushes, update the second sibling inside flushSync\n+ ReactNoop.batchedUpdates(() =>\n+ ReactNoop.flushSync(() => {\n+ foo2.current.setStep(1);\n+ }),\n+ );\n+\n+ \/\/ Only the second update should have flushed synchronously\n+ expect(Scheduler).toHaveYielded(['B1']);\n+ expect(root).toMatchRenderedOutput('A0B1');\n+\n+ \/\/ Now flush the first update\n+ expect(Scheduler).toFlushExpired(['A1']);\n+ expect(root).toMatchRenderedOutput('A1B1');\n+ });\n+});\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\nindex a14c36bfce..613fe89d63 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\n@@ -1870,6 +1870,10 @@ describe('ReactIncrementalErrorHandling', () => {\n const root = ReactNoop.createRoot();\n root.render('Error when completing root');\n expect(Scheduler).toFlushAndThrow('Error when completing root');\n+\n+ const blockingRoot = ReactNoop.createBlockingRoot();\n+ blockingRoot.render('Error when completing root');\n+ expect(Scheduler).toFlushAndThrow('Error when completing root');\n });\n }\n });\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactOffscreen-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactOffscreen-test.js\nindex 2c6914fbfc..b3f14e6ad1 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactOffscreen-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactOffscreen-test.js\n@@ -123,4 +123,46 @@ describe('ReactOffscreen', () => {\n <\/>,\n );\n });\n+\n+ \/\/ @gate experimental\n+ it('does not defer in blocking mode', async () => {\n+ let setState;\n+ function Foo() {\n+ const [state, _setState] = useState('A');\n+ setState = _setState;\n+ return ;\n+ }\n+\n+ const root = ReactNoop.createBlockingRoot();\n+ await ReactNoop.act(async () => {\n+ root.render(\n+ <>\n+ \n+ \n+ <\/LegacyHidden>\n+ \n+ <\/>,\n+ );\n+ \/\/ Should not defer the hidden tree\n+ expect(Scheduler).toFlushUntilNextPaint(['A', 'Outside']);\n+ });\n+ expect(root).toMatchRenderedOutput(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+\n+ \/\/ Test that the children can be updated\n+ await ReactNoop.act(async () => {\n+ setState('B');\n+ });\n+ expect(Scheduler).toHaveYielded(['B']);\n+ expect(root).toMatchRenderedOutput(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+ });\n });\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseFuzz-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseFuzz-test.internal.js\nindex c67edf8a15..eabcb41be0 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseFuzz-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseFuzz-test.internal.js\n@@ -170,6 +170,13 @@ describe('ReactSuspenseFuzz', () => {\n expect(legacyOutput).toEqual(expectedOutput);\n ReactNoop.renderLegacySyncRoot(null);\n \n+ resetCache();\n+ const batchedBlockingRoot = ReactNoop.createBlockingRoot();\n+ batchedBlockingRoot.render(children);\n+ resolveAllTasks();\n+ const batchedSyncOutput = batchedBlockingRoot.getChildrenAsJSX();\n+ expect(batchedSyncOutput).toEqual(expectedOutput);\n+\n resetCache();\n const concurrentRoot = ReactNoop.createRoot();\n concurrentRoot.render(children);\ndiff --git a\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js b\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js\nindex 20c83a46df..cb567340d3 100644\n--- a\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js\n+++ b\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js\n@@ -66,6 +66,23 @@ describe('ReactStrictMode', () => {\n ]);\n });\n \n+ \/\/ @gate experimental\n+ it('should support overriding default via createBlockingRoot option', () => {\n+ act(() => {\n+ const container = document.createElement('div');\n+ const root = ReactDOM.createBlockingRoot(container, {\n+ unstable_strictModeLevel: 0,\n+ });\n+ root.render();\n+ });\n+\n+ expect(log).toEqual([\n+ 'A: render',\n+ 'A: useLayoutEffect mount',\n+ 'A: useEffect mount',\n+ ]);\n+ });\n+\n \/\/ @gate experimental\n it('should disable strict mode if level 0 is specified', () => {\n act(() => {\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex b6c7a2b93d..201546e822 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -27,7 +27,7 @@ export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;\n \/\/ this feature flag only impacts StrictEffectsMode.\n export const enableStrictEffects = false;\n \n-\/\/ If TRUE, trees rendered with createRoot will be StrictEffectsMode.\n+\/\/ If TRUE, trees rendered with createRoot (and createBlockingRoot) APIs will be StrictEffectsMode.\n \/\/ If FALSE, these trees will be StrictLegacyMode.\n export const createRootStrictEffectsByDefault = false;\n \n","commit":{"authorName":"Andrew Clark","revision":"ee432635724d5a50301448016caa137ac3c0a7a2","shortRevision":"ee43263572","authoredAt":"2021-03-02T14:51:18-06:00","subject":"Revert \"Remove blocking mode and blocking root (#20888)\" (#20916)","authorEmail":"git@andrewclark.io"},"parents":["de0ee76dbde0a5ec507cf4a62c9690f67b56d7b6"],"body":"This reverts commit 553440bd1578ef71982c4a10e2cc8c462f33d9be."}

dillon1000/react

Files changed