Remove Blocking Mode (again) (#20974)
* Remove Blocking Mode (again) * Rename batchingmode file and comment
Ricky committed
Mar 10, 2021 at 18:34 UTC
860f673a7a6bf826010d41de2f66de62171ab676
36 files changed
+121
-332
packages/react-dom/index.classic.fb.js
-2
@@ -30,8 +30,6 @@ export {
30
unmountComponentAtNode,
31
createRoot,
32
createRoot as unstable_createRoot,
33
- createBlockingRoot,
34
- createBlockingRoot as unstable_createBlockingRoot,
33
unstable_flushControlled,
34
unstable_scheduleHydration,
35
unstable_runWithPriority,
packages/react-dom/index.experimental.js
-1
@@ -20,7 +20,6 @@ export {
20
unmountComponentAtNode,
21
// exposeConcurrentModeAPIs
22
createRoot as unstable_createRoot,
23
- createBlockingRoot as unstable_createBlockingRoot,
23
unstable_flushControlled,
24
unstable_scheduleHydration,
25
// DO NOT USE: Temporarily exposing this to migrate off of Scheduler.runWithPriority.
packages/react-dom/index.js
-2
@@ -21,8 +21,6 @@ export {
21
unmountComponentAtNode,
22
createRoot,
23
createRoot as unstable_createRoot,
24
- createBlockingRoot,
25
- createBlockingRoot as unstable_createBlockingRoot,
24
unstable_flushControlled,
25
unstable_scheduleHydration,
26
unstable_runWithPriority,
packages/react-dom/index.modern.fb.js
-2
@@ -15,8 +15,6 @@ export {
15
version,
16
createRoot,
17
createRoot as unstable_createRoot,
18
- createBlockingRoot,
19
- createBlockingRoot as unstable_createBlockingRoot,
18
unstable_flushControlled,
19
unstable_scheduleHydration,
20
unstable_runWithPriority,
packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+19
-21
@@ -574,31 +574,29 @@ describe('ReactDOMFiberAsync', () => {
574
expect(containerC.textContent).toEqual('Finished');
575
});
576
577
- describe('createBlockingRoot', () => {
578
- // @gate experimental
579
- it('updates flush without yielding in the next event', () => {
580
- const root = ReactDOM.unstable_createBlockingRoot(container);
577
+ // @gate experimental
578
+ it('updates flush without yielding in the next event', () => {
579
+ const root = ReactDOM.unstable_createRoot(container);
580
582
- function Text(props) {
583
- Scheduler.unstable_yieldValue(props.text);
584
- return props.text;
585
- }
581
+ function Text(props) {
582
+ Scheduler.unstable_yieldValue(props.text);
583
+ return props.text;
584
+ }
585
587
- root.render(
588
- <>
589
- <Text text="A" />
590
- <Text text="B" />
591
- <Text text="C" />
592
- </>,
593
- );
586
+ root.render(
587
+ <>
588
+ <Text text="A" />
589
+ <Text text="B" />
590
+ <Text text="C" />
591
+ </>,
592
+ );
593
595
- // Nothing should have rendered yet
596
- expect(container.textContent).toEqual('');
594
+ // Nothing should have rendered yet
595
+ expect(container.textContent).toEqual('');
596
598
- // Everything should render immediately in the next event
599
- expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
600
- expect(container.textContent).toEqual('ABC');
601
- });
597
+ // Everything should render immediately in the next event
598
+ expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
599
+ expect(container.textContent).toEqual('ABC');
600
});
601
602
// @gate experimental
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+1
-1
@@ -357,7 +357,7 @@ describe('ReactDOMServerPartialHydration', () => {
357
}).toErrorDev(
358
'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
359
'ReactDOM.hydrate(element, container) to ' +
360
- 'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
360
+ 'ReactDOM.createRoot(container, { hydrate: true })' +
361
'.render(element) or remove the Suspense components from the server ' +
362
'rendered components.' +
363
'\n in Suspense (at **)' +
packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+1
-1
@@ -127,7 +127,7 @@ describe('ReactDOMServerSuspense', () => {
127
expect(divB.textContent).toBe('B');
128
129
act(() => {
130
- const root = ReactDOM.createBlockingRoot(parent, {hydrate: true});
130
+ const root = ReactDOM.createRoot(parent, {hydrate: true});
131
root.render(example);
132
});
133
packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+6
-52
@@ -72,33 +72,6 @@ describe('ReactTestUtils.act()', () => {
72
73
runActTests('legacy mode', renderLegacy, unmountLegacy, rerenderLegacy);
74
75
- // and then in blocking mode
76
- if (__EXPERIMENTAL__) {
77
- let blockingRoot = null;
78
- const renderBatched = (el, dom) => {
79
- blockingRoot = ReactDOM.unstable_createBlockingRoot(dom);
80
- blockingRoot.render(el);
81
- };
82
-
83
- const unmountBatched = dom => {
84
- if (blockingRoot !== null) {
85
- blockingRoot.unmount();
86
- blockingRoot = null;
87
- }
88
- };
89
-
90
- const rerenderBatched = el => {
91
- blockingRoot.render(el);
92
- };
93
-
94
- runActTests(
95
- 'blocking mode',
96
- renderBatched,
97
- unmountBatched,
98
- rerenderBatched,
99
- );
100
- }
101
-
75
describe('unacted effects', () => {
76
function App() {
77
React.useEffect(() => {}, []);
@@ -124,19 +97,6 @@ describe('ReactTestUtils.act()', () => {
97
]);
98
});
99
127
- // @gate experimental
128
- it('warns in blocking mode', () => {
129
- expect(() => {
130
- const root = ReactDOM.unstable_createBlockingRoot(
131
- document.createElement('div'),
132
- );
133
- root.render(<App />);
134
- Scheduler.unstable_flushAll();
135
- }).toErrorDev([
136
- 'An update to App ran an effect, but was not wrapped in act(...)',
137
- ]);
138
- });
139
-
100
// @gate experimental
101
it('warns in concurrent mode', () => {
102
expect(() => {
@@ -731,14 +691,10 @@ function runActTests(label, render, unmount, rerender) {
691
692
it('triggers fallbacks if available', async () => {
693
if (label !== 'legacy mode') {
734
- // FIXME: Support for Blocking* and Concurrent Mode were
735
- // intentionally removed from the public version of `act`. It will
736
- // be added back in a future major version, before Blocking and and
737
- // Concurrent Mode are officially released. Consider disabling all
738
- // non-Legacy tests in this suite until then.
739
- //
740
- // *Blocking Mode actually does happen to work, though
741
- // not "officially" since it's an unreleased feature.
694
+ // FIXME: Support for Concurrent Root intentionally removed
695
+ // from the public version of `act`. It will be added back in
696
+ // a future major version, before the Concurrent Root is released.
697
+ // Consider skipping all non-Legacy tests in this suite until then.
698
return;
699
}
700
@@ -794,10 +750,8 @@ function runActTests(label, render, unmount, rerender) {
750
// In Concurrent Mode, refresh transitions delay indefinitely.
751
expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
752
} else {
797
- // In Legacy Mode and Blocking Mode, all fallbacks are forced to
798
- // display, even during a refresh transition.
799
- // TODO: Consider delaying indefinitely in Blocking Mode, to match
800
- // Concurrent Mode semantics.
753
+ // In Legacy Mode, all fallbacks are forced to display,
754
+ // even during a refresh transition.
755
expect(
756
document.querySelector('[data-test-id=spinner]'),
757
).not.toBeNull();
packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
-19
@@ -43,22 +43,3 @@ it('should warn when rendering in concurrent mode', () => {
43
ReactDOM.unstable_createRoot(document.createElement('div')).render(<App />);
44
}).toErrorDev([]);
45
});
46
-
47
-// @gate experimental
48
-it('should warn when rendering in blocking mode', () => {
49
- expect(() => {
50
- ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
51
- <App />,
52
- );
53
- }).toErrorDev(
54
- 'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
55
- 'to guarantee consistent behaviour across tests and browsers.',
56
- {withoutStack: true},
57
- );
58
- // does not warn twice
59
- expect(() => {
60
- ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
61
- <App />,
62
- );
63
- }).toErrorDev([]);
64
-});
packages/react-dom/src/client/ReactDOM.js
+1
-2
@@ -18,7 +18,7 @@ import {
18
unstable_renderSubtreeIntoContainer,
19
unmountComponentAtNode,
20
} from './ReactDOMLegacy';
21
-import {createRoot, createBlockingRoot, isValidContainer} from './ReactDOMRoot';
21
+import {createRoot, isValidContainer} from './ReactDOMRoot';
22
import {createEventHandle} from './ReactDOMEventHandle';
23
24
import {
@@ -201,7 +201,6 @@ export {
201
unmountComponentAtNode,
202
// exposeConcurrentModeAPIs
203
createRoot,
204
- createBlockingRoot,
204
flushControlled as unstable_flushControlled,
205
scheduleHydration as unstable_scheduleHydration,
206
// Disabled behind disableUnstableRenderSubtreeIntoContainer
packages/react-dom/src/client/ReactDOMRoot.js
+6
-26
@@ -51,25 +51,17 @@ import {
51
registerMutableSourceForHydration,
52
} from 'react-reconciler/src/ReactFiberReconciler';
53
import invariant from 'shared/invariant';
54
-import {
55
- BlockingRoot,
56
- ConcurrentRoot,
57
- LegacyRoot,
58
-} from 'react-reconciler/src/ReactRootTags';
54
+import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
55
56
function ReactDOMRoot(container: Container, options: void | RootOptions) {
57
this._internalRoot = createRootImpl(container, ConcurrentRoot, options);
58
}
59
64
-function ReactDOMBlockingRoot(
65
- container: Container,
66
- tag: RootTag,
67
- options: void | RootOptions,
68
-) {
69
- this._internalRoot = createRootImpl(container, tag, options);
60
+function ReactDOMLegacyRoot(container: Container, options: void | RootOptions) {
61
+ this._internalRoot = createRootImpl(container, LegacyRoot, options);
62
}
63
72
-ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function(
64
+ReactDOMRoot.prototype.render = ReactDOMLegacyRoot.prototype.render = function(
65
children: ReactNodeList,
66
): void {
67
const root = this._internalRoot;
@@ -99,7 +91,7 @@ ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function
91
updateContainer(children, root, null, null);
92
};
93
102
-ReactDOMRoot.prototype.unmount = ReactDOMBlockingRoot.prototype.unmount = function(): void {
94
+ReactDOMRoot.prototype.unmount = ReactDOMLegacyRoot.prototype.unmount = function(): void {
95
if (__DEV__) {
96
if (typeof arguments[0] === 'function') {
97
console.error(
@@ -169,23 +161,11 @@ export function createRoot(
161
return new ReactDOMRoot(container, options);
162
}
163
172
-export function createBlockingRoot(
173
- container: Container,
174
- options?: RootOptions,
175
-): RootType {
176
- invariant(
177
- isValidContainer(container),
178
- 'createRoot(...): Target container is not a DOM element.',
179
- );
180
- warnIfReactDOMContainerInDEV(container);
181
- return new ReactDOMBlockingRoot(container, BlockingRoot, options);
182
-}
183
-
164
export function createLegacyRoot(
165
container: Container,
166
options?: RootOptions,
167
): RootType {
188
- return new ReactDOMBlockingRoot(container, LegacyRoot, options);
168
+ return new ReactDOMLegacyRoot(container, options);
169
}
170
171
export function isValidContainer(node: mixed): boolean {
packages/react-noop-renderer/src/ReactNoop.js
-1
@@ -23,7 +23,6 @@ export const {
23
getPendingChildren,
24
getOrCreateRootContainer,
25
createRoot,
26
- createBlockingRoot,
26
createLegacyRoot,
27
getChildrenAsJSX,
28
getPendingChildrenAsJSX,
packages/react-noop-renderer/src/ReactNoopPersistent.js
-1
@@ -23,7 +23,6 @@ export const {
23
getPendingChildren,
24
getOrCreateRootContainer,
25
createRoot,
26
- createBlockingRoot,
26
createLegacyRoot,
27
getChildrenAsJSX,
28
getPendingChildrenAsJSX,
packages/react-noop-renderer/src/createReactNoop.js
+1
-32
@@ -21,11 +21,7 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
21
22
import * as Scheduler from 'scheduler/unstable_mock';
23
import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
24
-import {
25
- ConcurrentRoot,
26
- BlockingRoot,
27
- LegacyRoot,
28
-} from 'react-reconciler/src/ReactRootTags';
24
+import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
25
26
import ReactSharedInternals from 'shared/ReactSharedInternals';
27
import enqueueTask from 'shared/enqueueTask';
@@ -752,33 +748,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
748
};
749
},
750
755
- createBlockingRoot() {
756
- const container = {
757
- rootID: '' + idCounter++,
758
- pendingChildren: [],
759
- children: [],
760
- };
761
- const fiberRoot = NoopRenderer.createContainer(
762
- container,
763
- BlockingRoot,
764
- false,
765
- null,
766
- null,
767
- );
768
- return {
769
- _Scheduler: Scheduler,
770
- render(children: ReactNodeList) {
771
- NoopRenderer.updateContainer(children, fiberRoot, null, null);
772
- },
773
- getChildren() {
774
- return getChildren(container);
775
- },
776
- getChildrenAsJSX() {
777
- return getChildrenAsJSX(container);
778
- },
779
- };
780
- },
781
-
751
createLegacyRoot() {
752
const container = {
753
rootID: '' + idCounter++,
packages/react-reconciler/src/ReactFiber.new.js
+2
-21
@@ -26,7 +26,7 @@ import {
26
enableScopeAPI,
27
} from 'shared/ReactFeatureFlags';
28
import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
29
-import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
29
+import {ConcurrentRoot} from './ReactRootTags';
30
import {
31
IndeterminateComponent,
32
ClassComponent,
@@ -68,7 +68,6 @@ import {
68
ProfileMode,
69
StrictLegacyMode,
70
StrictEffectsMode,
71
- BlockingMode,
71
} from './ReactTypeOfMode';
72
import {
73
REACT_FORWARD_REF_TYPE,
@@ -424,25 +423,7 @@ export function createHostRootFiber(
423
): Fiber {
424
let mode;
425
if (tag === ConcurrentRoot) {
427
- mode = ConcurrentMode | BlockingMode;
428
- if (strictModeLevelOverride !== null) {
429
- if (strictModeLevelOverride >= 1) {
430
- mode |= StrictLegacyMode;
431
- }
432
- if (enableStrictEffects) {
433
- if (strictModeLevelOverride >= 2) {
434
- mode |= StrictEffectsMode;
435
- }
436
- }
437
- } else {
438
- if (enableStrictEffects && createRootStrictEffectsByDefault) {
439
- mode |= StrictLegacyMode | StrictEffectsMode;
440
- } else {
441
- mode |= StrictLegacyMode;
442
- }
443
- }
444
- } else if (tag === BlockingRoot) {
445
- mode = BlockingMode;
426
+ mode = ConcurrentMode;
427
if (strictModeLevelOverride !== null) {
428
if (strictModeLevelOverride >= 1) {
429
mode |= StrictLegacyMode;
packages/react-reconciler/src/ReactFiber.old.js
+2
-21
@@ -26,7 +26,7 @@ import {
26
enableScopeAPI,
27
} from 'shared/ReactFeatureFlags';
28
import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
29
-import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
29
+import {ConcurrentRoot} from './ReactRootTags';
30
import {
31
IndeterminateComponent,
32
ClassComponent,
@@ -68,7 +68,6 @@ import {
68
ProfileMode,
69
StrictLegacyMode,
70
StrictEffectsMode,
71
- BlockingMode,
71
} from './ReactTypeOfMode';
72
import {
73
REACT_FORWARD_REF_TYPE,
@@ -424,25 +423,7 @@ export function createHostRootFiber(
423
): Fiber {
424
let mode;
425
if (tag === ConcurrentRoot) {
427
- mode = ConcurrentMode | BlockingMode;
428
- if (strictModeLevelOverride !== null) {
429
- if (strictModeLevelOverride >= 1) {
430
- mode |= StrictLegacyMode;
431
- }
432
- if (enableStrictEffects) {
433
- if (strictModeLevelOverride >= 2) {
434
- mode |= StrictEffectsMode;
435
- }
436
- }
437
- } else {
438
- if (enableStrictEffects && createRootStrictEffectsByDefault) {
439
- mode |= StrictLegacyMode | StrictEffectsMode;
440
- } else {
441
- mode |= StrictLegacyMode;
442
- }
443
- }
444
- } else if (tag === BlockingRoot) {
445
- mode = BlockingMode;
426
+ mode = ConcurrentMode;
427
if (strictModeLevelOverride !== null) {
428
if (strictModeLevelOverride >= 1) {
429
mode |= StrictLegacyMode;
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+11
-10
@@ -128,7 +128,6 @@ import {
128
NoMode,
129
ProfileMode,
130
StrictLegacyMode,
131
- BlockingMode,
131
} from './ReactTypeOfMode';
132
import {
133
shouldSetTextContent,
@@ -609,7 +608,6 @@ function updateOffscreenComponent(
608
// Rendering a hidden tree.
609
if ((workInProgress.mode & ConcurrentMode) === NoMode) {
610
// In legacy sync mode, don't defer the subtree. Render it now.
612
- // TODO: Figure out what we should do in Blocking mode.
611
const nextState: OffscreenState = {
612
baseLanes: NoLanes,
613
cachePool: null,
@@ -2134,7 +2132,10 @@ function mountSuspenseFallbackChildren(
2132
2133
let primaryChildFragment;
2134
let fallbackChildFragment;
2137
- if ((mode & BlockingMode) === NoMode && progressedPrimaryFragment !== null) {
2135
+ if (
2136
+ (mode & ConcurrentMode) === NoMode &&
2137
+ progressedPrimaryFragment !== null
2138
+ ) {
2139
// In legacy mode, we commit the primary tree as if it successfully
2140
// completed, even though it's in an inconsistent state.
2141
primaryChildFragment = progressedPrimaryFragment;
@@ -2206,7 +2207,7 @@ function updateSuspensePrimaryChildren(
2207
children: primaryChildren,
2208
},
2209
);
2209
- if ((workInProgress.mode & BlockingMode) === NoMode) {
2210
+ if ((workInProgress.mode & ConcurrentMode) === NoMode) {
2211
primaryChildFragment.lanes = renderLanes;
2212
}
2213
primaryChildFragment.return = workInProgress;
@@ -2247,7 +2248,7 @@ function updateSuspenseFallbackChildren(
2248
if (
2249
// In legacy mode, we commit the primary tree as if it successfully
2250
// completed, even though it's in an inconsistent state.
2250
- (mode & BlockingMode) === NoMode &&
2251
+ (mode & ConcurrentMode) === NoMode &&
2252
// Make sure we're on the second pass, i.e. the primary child fragment was
2253
// already cloned. In legacy mode, the only case where this isn't true is
2254
// when DevTools forces us to display a fallback; we skip the first render
@@ -2369,7 +2370,7 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
2370
primaryChildFragment.sibling = fallbackChildFragment;
2371
workInProgress.child = primaryChildFragment;
2372
2372
- if ((workInProgress.mode & BlockingMode) !== NoMode) {
2373
+ if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
2374
// We will have dropped the effect list which contains the
2375
// deletion. We need to reconcile to delete the current child.
2376
reconcileChildFibers(workInProgress, current.child, null, renderLanes);
@@ -2385,12 +2386,12 @@ function mountDehydratedSuspenseComponent(
2386
): null | Fiber {
2387
// During the first pass, we'll bail out and not drill into the children.
2388
// Instead, we'll leave the content in place and try to hydrate it later.
2388
- if ((workInProgress.mode & BlockingMode) === NoMode) {
2389
+ if ((workInProgress.mode & ConcurrentMode) === NoMode) {
2390
if (__DEV__) {
2391
console.error(
2392
'Cannot hydrate Suspense in legacy mode. Switch from ' +
2393
'ReactDOM.hydrate(element, container) to ' +
2393
- 'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
2394
+ 'ReactDOM.createRoot(container, { hydrate: true })' +
2395
'.render(element) or remove the Suspense components from ' +
2396
'the server rendered components.',
2397
);
@@ -2443,7 +2444,7 @@ function updateDehydratedSuspenseComponent(
2444
);
2445
}
2446
2446
- if ((workInProgress.mode & BlockingMode) === NoMode) {
2447
+ if ((workInProgress.mode & ConcurrentMode) === NoMode) {
2448
return retrySuspenseComponentWithoutHydrating(
2449
current,
2450
workInProgress,
@@ -2861,7 +2862,7 @@ function updateSuspenseListComponent(
2862
}
2863
pushSuspenseContext(workInProgress, suspenseContext);
2864
2864
- if ((workInProgress.mode & BlockingMode) === NoMode) {
2865
+ if ((workInProgress.mode & ConcurrentMode) === NoMode) {
2866
// In legacy mode, SuspenseList doesn't work so we just
2867
// use make it a noop by treating it as the default revealOrder.
2868
workInProgress.memoizedState = null;
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+11
-10
@@ -128,7 +128,6 @@ import {
128
NoMode,
129
ProfileMode,
130
StrictLegacyMode,
131
- BlockingMode,
131
} from './ReactTypeOfMode';
132
import {
133
shouldSetTextContent,
@@ -609,7 +608,6 @@ function updateOffscreenComponent(
608
// Rendering a hidden tree.
609
if ((workInProgress.mode & ConcurrentMode) === NoMode) {
610
// In legacy sync mode, don't defer the subtree. Render it now.
612
- // TODO: Figure out what we should do in Blocking mode.
611
const nextState: OffscreenState = {
612
baseLanes: NoLanes,
613
cachePool: null,
@@ -2134,7 +2132,10 @@ function mountSuspenseFallbackChildren(
2132
2133
let primaryChildFragment;
2134
let fallbackChildFragment;
2137
- if ((mode & BlockingMode) === NoMode && progressedPrimaryFragment !== null) {
2135
+ if (
2136
+ (mode & ConcurrentMode) === NoMode &&
2137
+ progressedPrimaryFragment !== null
2138
+ ) {
2139
// In legacy mode, we commit the primary tree as if it successfully
2140
// completed, even though it's in an inconsistent state.
2141
primaryChildFragment = progressedPrimaryFragment;
@@ -2206,7 +2207,7 @@ function updateSuspensePrimaryChildren(
2207
children: primaryChildren,
2208
},
2209
);
2209
- if ((workInProgress.mode & BlockingMode) === NoMode) {
2210
+ if ((workInProgress.mode & ConcurrentMode) === NoMode) {
2211
primaryChildFragment.lanes = renderLanes;
2212
}
2213
primaryChildFragment.return = workInProgress;
@@ -2247,7 +2248,7 @@ function updateSuspenseFallbackChildren(
2248
if (
2249
// In legacy mode, we commit the primary tree as if it successfully
2250
// completed, even though it's in an inconsistent state.
2250
- (mode & BlockingMode) === NoMode &&
2251
+ (mode & ConcurrentMode) === NoMode &&
2252
// Make sure we're on the second pass, i.e. the primary child fragment was
2253
// already cloned. In legacy mode, the only case where this isn't true is
2254
// when DevTools forces us to display a fallback; we skip the first render
@@ -2369,7 +2370,7 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
2370
primaryChildFragment.sibling = fallbackChildFragment;
2371
workInProgress.child = primaryChildFragment;
2372
2372
- if ((workInProgress.mode & BlockingMode) !== NoMode) {
2373
+ if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
2374
// We will have dropped the effect list which contains the
2375
// deletion. We need to reconcile to delete the current child.
2376
reconcileChildFibers(workInProgress, current.child, null, renderLanes);
@@ -2385,12 +2386,12 @@ function mountDehydratedSuspenseComponent(
2386
): null | Fiber {
2387
// During the first pass, we'll bail out and not drill into the children.
2388
// Instead, we'll leave the content in place and try to hydrate it later.
2388
- if ((workInProgress.mode & BlockingMode) === NoMode) {
2389
+ if ((workInProgress.mode & ConcurrentMode) === NoMode) {
2390
if (__DEV__) {
2391
console.error(
2392
'Cannot hydrate Suspense in legacy mode. Switch from ' +
2393
'ReactDOM.hydrate(element, container) to ' +
2393
- 'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
2394
+ 'ReactDOM.createRoot(container, { hydrate: true })' +
2395
'.render(element) or remove the Suspense components from ' +
2396
'the server rendered components.',
2397
);
@@ -2443,7 +2444,7 @@ function updateDehydratedSuspenseComponent(
2444
);
2445
}
2446
2446
- if ((workInProgress.mode & BlockingMode) === NoMode) {
2447
+ if ((workInProgress.mode & ConcurrentMode) === NoMode) {
2448
return retrySuspenseComponentWithoutHydrating(
2449
current,
2450
workInProgress,
@@ -2861,7 +2862,7 @@ function updateSuspenseListComponent(
2862
}
2863
pushSuspenseContext(workInProgress, suspenseContext);
2864
2864
- if ((workInProgress.mode & BlockingMode) === NoMode) {
2865
+ if ((workInProgress.mode & ConcurrentMode) === NoMode) {
2866
// In legacy mode, SuspenseList doesn't work so we just
2867
// use make it a noop by treating it as the default revealOrder.
2868
workInProgress.memoizedState = null;
packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+2
-9
@@ -55,12 +55,7 @@ import {
55
LegacyHiddenComponent,
56
CacheComponent,
57
} from './ReactWorkTags';
58
-import {
59
- NoMode,
60
- BlockingMode,
61
- ConcurrentMode,
62
- ProfileMode,
63
-} from './ReactTypeOfMode';
58
+import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
59
import {
60
Ref,
61
Update,
@@ -1059,12 +1054,10 @@ function completeWork(
1054
}
1055
1056
if (nextDidTimeout && !prevDidTimeout) {
1062
- // If this subtree is running in blocking mode we can suspend,
1063
- // otherwise we won't suspend.
1057
// TODO: This will still suspend a synchronous tree if anything
1058
// in the concurrent tree already suspended during this render.
1059
// This is a known bug.
1067
- if ((workInProgress.mode & BlockingMode) !== NoMode) {
1060
+ if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
1061
// TODO: Move this back to throwException because this is too late
1062
// if this is a large tree which is common for initial loads. We
1063
// don't know if we should restart a render or not until we get
packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+2
-9
@@ -55,12 +55,7 @@ import {
55
LegacyHiddenComponent,
56
CacheComponent,
57
} from './ReactWorkTags';
58
-import {
59
- NoMode,
60
- BlockingMode,
61
- ConcurrentMode,
62
- ProfileMode,
63
-} from './ReactTypeOfMode';
58
+import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
59
import {
60
Ref,
61
Update,
@@ -1059,12 +1054,10 @@ function completeWork(
1054
}
1055
1056
if (nextDidTimeout && !prevDidTimeout) {
1062
- // If this subtree is running in blocking mode we can suspend,
1063
- // otherwise we won't suspend.
1057
// TODO: This will still suspend a synchronous tree if anything
1058
// in the concurrent tree already suspended during this render.
1059
// This is a known bug.
1067
- if ((workInProgress.mode & BlockingMode) !== NoMode) {
1060
+ if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
1061
// TODO: Move this back to throwException because this is too late
1062
// if this is a large tree which is common for initial loads. We
1063
// don't know if we should restart a render or not until we get
packages/react-reconciler/src/ReactFiberHooks.new.js
+2
-2
@@ -34,7 +34,7 @@ import {
34
35
import {
36
NoMode,
37
- BlockingMode,
37
+ ConcurrentMode,
38
DebugTracingMode,
39
StrictEffectsMode,
40
} from './ReactTypeOfMode';
@@ -1809,7 +1809,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
1809
1810
const setId = mountState(id)[1];
1811
1812
- if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
1812
+ if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
1813
if (
1814
__DEV__ &&
1815
enableStrictEffects &&
packages/react-reconciler/src/ReactFiberHooks.old.js
+2
-2
@@ -34,7 +34,7 @@ import {
34
35
import {
36
NoMode,
37
- BlockingMode,
37
+ ConcurrentMode,
38
DebugTracingMode,
39
StrictEffectsMode,
40
} from './ReactTypeOfMode';
@@ -1809,7 +1809,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
1809
1810
const setId = mountState(id)[1];
1811
1812
- if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
1812
+ if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
1813
if (
1814
__DEV__ &&
1815
enableStrictEffects &&
packages/react-reconciler/src/ReactFiberRoot.new.js
+1
-4
@@ -25,7 +25,7 @@ import {
25
} from 'shared/ReactFeatureFlags';
26
import {unstable_getThreadID} from 'scheduler/tracing';
27
import {initializeUpdateQueue} from './ReactUpdateQueue.new';
28
-import {LegacyRoot, BlockingRoot, ConcurrentRoot} from './ReactRootTags';
28
+import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
29
30
function FiberRootNode(containerInfo, tag, hydrate) {
31
this.tag = tag;
@@ -73,9 +73,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
73
74
if (__DEV__) {
75
switch (tag) {
76
- case BlockingRoot:
77
- this._debugRootType = 'createBlockingRoot()';
78
- break;
76
case ConcurrentRoot:
77
this._debugRootType = 'createRoot()';
78
break;
packages/react-reconciler/src/ReactFiberRoot.old.js
+1
-4
@@ -25,7 +25,7 @@ import {
25
} from 'shared/ReactFeatureFlags';
26
import {unstable_getThreadID} from 'scheduler/tracing';
27
import {initializeUpdateQueue} from './ReactUpdateQueue.old';
28
-import {LegacyRoot, BlockingRoot, ConcurrentRoot} from './ReactRootTags';
28
+import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
29
30
function FiberRootNode(containerInfo, tag, hydrate) {
31
this.tag = tag;
@@ -73,9 +73,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
73
74
if (__DEV__) {
75
switch (tag) {
76
- case BlockingRoot:
77
- this._debugRootType = 'createBlockingRoot()';
78
- break;
76
case ConcurrentRoot:
77
this._debugRootType = 'createRoot()';
78
break;
packages/react-reconciler/src/ReactFiberThrow.new.js
+5
-5
@@ -34,7 +34,7 @@ import {
34
ForceUpdateForLegacySuspense,
35
} from './ReactFiberFlags';
36
import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.new';
37
-import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
37
+import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
38
import {
39
enableDebugTracing,
40
enableSchedulingProfiler,
@@ -233,7 +233,7 @@ function throwException(
233
// A legacy mode Suspense quirk, only relevant to hook components.
234
const tag = sourceFiber.tag;
235
if (
236
- (sourceFiber.mode & BlockingMode) === NoMode &&
236
+ (sourceFiber.mode & ConcurrentMode) === NoMode &&
237
(tag === FunctionComponent ||
238
tag === ForwardRef ||
239
tag === SimpleMemoComponent)
@@ -274,13 +274,13 @@ function throwException(
274
wakeables.add(wakeable);
275
}
276
277
- // If the boundary is outside of blocking mode, we should *not*
277
+ // If the boundary is in legacy mode, we should *not*
278
// suspend the commit. Pretend as if the suspended component rendered
279
// null and keep rendering. In the commit phase, we'll schedule a
280
// subsequent synchronous update to re-render the Suspense.
281
//
282
// Note: It doesn't matter whether the component that suspended was
283
- // inside a blocking mode tree. If the Suspense is outside of it, we
283
+ // inside a concurrent mode tree. If the Suspense is outside of it, we
284
// should *not* suspend the commit.
285
//
286
// If the suspense boundary suspended itself suspended, we don't have to
@@ -288,7 +288,7 @@ function throwException(
288
// directly do a second pass over the fallback in this render and
289
// pretend we meant to render that directly.
290
if (
291
- (workInProgress.mode & BlockingMode) === NoMode &&
291
+ (workInProgress.mode & ConcurrentMode) === NoMode &&
292
workInProgress !== returnFiber
293
) {
294
workInProgress.flags |= DidCapture;
packages/react-reconciler/src/ReactFiberThrow.old.js
+5
-5
@@ -34,7 +34,7 @@ import {
34
ForceUpdateForLegacySuspense,
35
} from './ReactFiberFlags';
36
import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
37
-import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
37
+import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
38
import {
39
enableDebugTracing,
40
enableSchedulingProfiler,
@@ -233,7 +233,7 @@ function throwException(
233
// A legacy mode Suspense quirk, only relevant to hook components.
234
const tag = sourceFiber.tag;
235
if (
236
- (sourceFiber.mode & BlockingMode) === NoMode &&
236
+ (sourceFiber.mode & ConcurrentMode) === NoMode &&
237
(tag === FunctionComponent ||
238
tag === ForwardRef ||
239
tag === SimpleMemoComponent)
@@ -274,13 +274,13 @@ function throwException(
274
wakeables.add(wakeable);
275
}
276
277
- // If the boundary is outside of blocking mode, we should *not*
277
+ // If the boundary is in legacy mode, we should *not*
278
// suspend the commit. Pretend as if the suspended component rendered
279
// null and keep rendering. In the commit phase, we'll schedule a
280
// subsequent synchronous update to re-render the Suspense.
281
//
282
// Note: It doesn't matter whether the component that suspended was
283
- // inside a blocking mode tree. If the Suspense is outside of it, we
283
+ // inside a concurrent mode tree. If the Suspense is outside of it, we
284
// should *not* suspend the commit.
285
//
286
// If the suspense boundary suspended itself suspended, we don't have to
@@ -288,7 +288,7 @@ function throwException(
288
// directly do a second pass over the fallback in this render and
289
// pretend we meant to render that directly.
290
if (
291
- (workInProgress.mode & BlockingMode) === NoMode &&
291
+ (workInProgress.mode & ConcurrentMode) === NoMode &&
292
workInProgress !== returnFiber
293
) {
294
workInProgress.flags |= DidCapture;
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+5
-6
@@ -100,7 +100,6 @@ import {
100
NoMode,
101
StrictLegacyMode,
102
ProfileMode,
103
- BlockingMode,
103
ConcurrentMode,
104
} from './ReactTypeOfMode';
105
import {
@@ -386,7 +385,7 @@ export function getCurrentTime() {
385
export function requestUpdateLane(fiber: Fiber): Lane {
386
// Special cases
387
const mode = fiber.mode;
389
- if ((mode & BlockingMode) === NoMode) {
388
+ if ((mode & ConcurrentMode) === NoMode) {
389
return (SyncLane: Lane);
390
} else if ((mode & ConcurrentMode) === NoMode) {
391
return getCurrentUpdateLanePriority() === SyncLanePriority
@@ -467,7 +466,7 @@ function requestRetryLane(fiber: Fiber) {
466
467
// Special cases
468
const mode = fiber.mode;
470
- if ((mode & BlockingMode) === NoMode) {
469
+ if ((mode & ConcurrentMode) === NoMode) {
470
return (SyncLane: Lane);
471
} else if ((mode & ConcurrentMode) === NoMode) {
472
return getCurrentUpdateLanePriority() === SyncLanePriority
@@ -658,7 +657,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
657
// Requires some refactoring. Not a big deal though since it's rare for
658
// concurrent apps to have more than a single root.
659
workInProgressRoot !== null &&
661
- (fiber.mode & BlockingMode) !== NoMode &&
660
+ (fiber.mode & ConcurrentMode) !== NoMode &&
661
// If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
662
// then don't treat this as an interleaved update. This pattern is
663
// accompanied by a warning but we haven't fully deprecated it yet. We can
@@ -2545,7 +2544,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
2544
return;
2545
}
2546
2548
- if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {
2547
+ if (!(fiber.mode & ConcurrentMode)) {
2548
return;
2549
}
2550
@@ -2924,7 +2923,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
2923
didWarnAboutUnmockedScheduler === false &&
2924
Scheduler.unstable_flushAllWithoutAsserting === undefined
2925
) {
2927
- if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
2926
+ if (fiber.mode & ConcurrentMode) {
2927
didWarnAboutUnmockedScheduler = true;
2928
console.error(
2929
'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+5
-6
@@ -100,7 +100,6 @@ import {
100
NoMode,
101
StrictLegacyMode,
102
ProfileMode,
103
- BlockingMode,
103
ConcurrentMode,
104
} from './ReactTypeOfMode';
105
import {
@@ -386,7 +385,7 @@ export function getCurrentTime() {
385
export function requestUpdateLane(fiber: Fiber): Lane {
386
// Special cases
387
const mode = fiber.mode;
389
- if ((mode & BlockingMode) === NoMode) {
388
+ if ((mode & ConcurrentMode) === NoMode) {
389
return (SyncLane: Lane);
390
} else if ((mode & ConcurrentMode) === NoMode) {
391
return getCurrentUpdateLanePriority() === SyncLanePriority
@@ -467,7 +466,7 @@ function requestRetryLane(fiber: Fiber) {
466
467
// Special cases
468
const mode = fiber.mode;
470
- if ((mode & BlockingMode) === NoMode) {
469
+ if ((mode & ConcurrentMode) === NoMode) {
470
return (SyncLane: Lane);
471
} else if ((mode & ConcurrentMode) === NoMode) {
472
return getCurrentUpdateLanePriority() === SyncLanePriority
@@ -658,7 +657,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
657
// Requires some refactoring. Not a big deal though since it's rare for
658
// concurrent apps to have more than a single root.
659
workInProgressRoot !== null &&
661
- (fiber.mode & BlockingMode) !== NoMode &&
660
+ (fiber.mode & ConcurrentMode) !== NoMode &&
661
// If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
662
// then don't treat this as an interleaved update. This pattern is
663
// accompanied by a warning but we haven't fully deprecated it yet. We can
@@ -2545,7 +2544,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
2544
return;
2545
}
2546
2548
- if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {
2547
+ if (!(fiber.mode & ConcurrentMode)) {
2548
return;
2549
}
2550
@@ -2924,7 +2923,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
2923
didWarnAboutUnmockedScheduler === false &&
2924
Scheduler.unstable_flushAllWithoutAsserting === undefined
2925
) {
2927
- if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
2926
+ if (fiber.mode & ConcurrentMode) {
2927
didWarnAboutUnmockedScheduler = true;
2928
console.error(
2929
'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
packages/react-reconciler/src/ReactRootTags.js
+2
-3
@@ -7,8 +7,7 @@
7
* @flow
8
*/
9
10
-export type RootTag = 0 | 1 | 2;
10
+export type RootTag = 0 | 1;
11
12
export const LegacyRoot = 0;
13
-export const BlockingRoot = 1;
14
-export const ConcurrentRoot = 2;
13
+export const ConcurrentRoot = 1;
packages/react-reconciler/src/ReactTypeOfMode.js
+6
-7
@@ -10,10 +10,9 @@
10
export type TypeOfMode = number;
11
12
export const NoMode = /* */ 0b000000;
13
-// TODO: Remove BlockingMode and ConcurrentMode by reading from the root tag instead
14
-export const BlockingMode = /* */ 0b000001;
15
-export const ConcurrentMode = /* */ 0b000010;
16
-export const ProfileMode = /* */ 0b000100;
17
-export const DebugTracingMode = /* */ 0b001000;
18
-export const StrictLegacyMode = /* */ 0b010000;
19
-export const StrictEffectsMode = /* */ 0b100000;
13
+// TODO: Remove ConcurrentMode by reading from the root tag instead
14
+export const ConcurrentMode = /* */ 0b000001;
15
+export const ProfileMode = /* */ 0b000010;
16
+export const DebugTracingMode = /* */ 0b000100;
17
+export const StrictLegacyMode = /* */ 0b001000;
18
+export const StrictEffectsMode = /* */ 0b010000;
packages/react-reconciler/src/__tests__/ReactBatching-test.internal.js
renamed
+13
-12
@@ -53,7 +53,7 @@ describe('ReactBlockingMode', () => {
53
}
54
55
it('updates flush without yielding in the next event', () => {
56
- const root = ReactNoop.createBlockingRoot();
56
+ const root = ReactNoop.createRoot();
57
58
root.render(
59
<>
@@ -67,7 +67,7 @@ describe('ReactBlockingMode', () => {
67
expect(root).toMatchRenderedOutput(null);
68
69
// Everything should render immediately in the next event
70
- expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
70
+ expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
71
expect(root).toMatchRenderedOutput('ABC');
72
});
73
@@ -81,16 +81,17 @@ describe('ReactBlockingMode', () => {
81
return <Text text="Hi" />;
82
}
83
84
- const root = ReactNoop.createBlockingRoot();
84
+ const root = ReactNoop.createRoot();
85
root.render(<App />);
86
expect(root).toMatchRenderedOutput(null);
87
+ expect(Scheduler).toHaveYielded([]);
88
88
- expect(Scheduler).toFlushExpired(['Hi', 'Layout effect']);
89
+ expect(Scheduler).toFlushAndYield(['Hi', 'Layout effect']);
90
expect(root).toMatchRenderedOutput('Hi');
91
});
92
93
it('uses proper Suspense semantics, not legacy ones', async () => {
93
- const root = ReactNoop.createBlockingRoot();
94
+ const root = ReactNoop.createRoot();
95
root.render(
96
<Suspense fallback={<Text text="Loading..." />}>
97
<span>
@@ -105,15 +106,15 @@ describe('ReactBlockingMode', () => {
106
</Suspense>,
107
);
108
108
- expect(Scheduler).toFlushExpired(['A', 'Suspend! [B]', 'C', 'Loading...']);
109
- // In Legacy Mode, A and B would mount in a hidden primary tree. In Batched
110
- // and Concurrent Mode, nothing in the primary tree should mount. But the
109
+ expect(Scheduler).toFlushAndYield(['A', 'Suspend! [B]', 'C', 'Loading...']);
110
+ // In Legacy Mode, A and B would mount in a hidden primary tree. In
111
+ // Concurrent Mode, nothing in the primary tree should mount. But the
112
// fallback should mount immediately.
113
expect(root).toMatchRenderedOutput('Loading...');
114
115
await jest.advanceTimersByTime(1000);
116
expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
116
- expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
117
+ expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
118
expect(root).toMatchRenderedOutput(
119
<>
120
<span>A</span>
@@ -125,7 +126,7 @@ describe('ReactBlockingMode', () => {
126
127
it('flushSync does not flush batched work', () => {
128
const {useState, forwardRef, useImperativeHandle} = React;
128
- const root = ReactNoop.createBlockingRoot();
129
+ const root = ReactNoop.createRoot();
130
131
const Foo = forwardRef(({label}, ref) => {
132
const [step, setStep] = useState(0);
@@ -143,7 +144,7 @@ describe('ReactBlockingMode', () => {
144
);
145
146
// Mount
146
- expect(Scheduler).toFlushExpired(['A0', 'B0']);
147
+ expect(Scheduler).toFlushAndYield(['A0', 'B0']);
148
expect(root).toMatchRenderedOutput('A0B0');
149
150
// Schedule a batched update to the first sibling
@@ -161,7 +162,7 @@ describe('ReactBlockingMode', () => {
162
expect(root).toMatchRenderedOutput('A0B1');
163
164
// Now flush the first update
164
- expect(Scheduler).toFlushExpired(['A1']);
165
+ expect(Scheduler).toFlushAndYield(['A1']);
166
expect(root).toMatchRenderedOutput('A1B1');
167
});
168
});
packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
-4
@@ -1870,10 +1870,6 @@ describe('ReactIncrementalErrorHandling', () => {
1870
const root = ReactNoop.createRoot();
1871
root.render('Error when completing root');
1872
expect(Scheduler).toFlushAndThrow('Error when completing root');
1873
-
1874
- const blockingRoot = ReactNoop.createBlockingRoot();
1875
- blockingRoot.render('Error when completing root');
1876
- expect(Scheduler).toFlushAndThrow('Error when completing root');
1873
});
1874
}
1875
});
packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+8
-4
@@ -125,7 +125,7 @@ describe('ReactOffscreen', () => {
125
});
126
127
// @gate experimental
128
- it('does not defer in blocking mode', async () => {
128
+ it('does defer in concurrent mode', async () => {
129
let setState;
130
function Foo() {
131
const [state, _setState] = useState('A');
@@ -133,7 +133,7 @@ describe('ReactOffscreen', () => {
133
return <Text text={state} />;
134
}
135
136
- const root = ReactNoop.createBlockingRoot();
136
+ const root = ReactNoop.createRoot();
137
await ReactNoop.act(async () => {
138
root.render(
139
<>
@@ -143,9 +143,13 @@ describe('ReactOffscreen', () => {
143
<Text text="Outside" />
144
</>,
145
);
146
- // Should not defer the hidden tree
147
- expect(Scheduler).toFlushUntilNextPaint(['A', 'Outside']);
146
+ // Should defer the hidden tree.
147
+ expect(Scheduler).toFlushUntilNextPaint(['Outside']);
148
});
149
+
150
+ // The hidden tree was rendered at lower priority.
151
+ expect(Scheduler).toHaveYielded(['A']);
152
+
153
expect(root).toMatchRenderedOutput(
154
<>
155
<span prop="A" />
packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
-7
@@ -170,13 +170,6 @@ describe('ReactSuspenseFuzz', () => {
170
expect(legacyOutput).toEqual(expectedOutput);
171
ReactNoop.renderLegacySyncRoot(null);
172
173
- resetCache();
174
- const batchedBlockingRoot = ReactNoop.createBlockingRoot();
175
- batchedBlockingRoot.render(children);
176
- resolveAllTasks();
177
- const batchedSyncOutput = batchedBlockingRoot.getChildrenAsJSX();
178
- expect(batchedSyncOutput).toEqual(expectedOutput);
179
-
173
resetCache();
174
const concurrentRoot = ReactNoop.createRoot();
175
concurrentRoot.render(children);
packages/react/src/__tests__/ReactStrictMode-test.internal.js
-17
@@ -66,23 +66,6 @@ describe('ReactStrictMode', () => {
66
]);
67
});
68
69
- // @gate experimental
70
- it('should support overriding default via createBlockingRoot option', () => {
71
- act(() => {
72
- const container = document.createElement('div');
73
- const root = ReactDOM.createBlockingRoot(container, {
74
- unstable_strictModeLevel: 0,
75
- });
76
- root.render(<Component label="A" />);
77
- });
78
-
79
- expect(log).toEqual([
80
- 'A: render',
81
- 'A: useLayoutEffect mount',
82
- 'A: useEffect mount',
83
- ]);
84
- });
85
-
69
// @gate experimental
70
it('should disable strict mode if level 0 is specified', () => {
71
act(() => {
packages/shared/ReactFeatureFlags.js
+1
-1
@@ -27,7 +27,7 @@ export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
27
// this feature flag only impacts StrictEffectsMode.
28
export const enableStrictEffects = false;
29
30
-// If TRUE, trees rendered with createRoot (and createBlockingRoot) APIs will be StrictEffectsMode.
30
+// If TRUE, trees rendered with createRoot will be StrictEffectsMode.
31
// If FALSE, these trees will be StrictLegacyMode.
32
export const createRootStrictEffectsByDefault = false;
33