@samitouri / QOS-React-2 / commits / fe7163e73d

Add unstable prefix to experimental APIs (#18825)

We've been shipping unprefixed experimental APIs (like `createRoot` and `useTransition`) to the Experimental release channel, with the rationale that because these APIs do not appear in any stable release, we're free to change or remove them later without breaking any downstream projects. What we didn't consider is that downstream projects might be tempted to use feature detection: ```js const useTransition = React.useTransition || fallbackUseTransition; ``` This pattern assumes that the version of `useTransition` that exists in the Experimental channel today has the same API contract as the final `useTransition` API that we'll eventually ship to stable. To discourage feature detection, I've added an `unstable_` prefix to all of our unstable APIs. The Facebook builds still have the unprefixed APIs, though. We will continue to support those; if we make any breaking changes, we'll migrate the internal callers like we usually do. To make testing easier, I added the `unstable_`-prefixed APIs to the www builds, too. That way our tests can always use the prefixed ones without gating on the release channel.

Andrew Clark committed May 4, 2020 at 22:25 UTC fe7163e73dadceda2655736d97cdd745d7abc8ea
31 files changed +280 -214
fixtures/blocks/src/server/App.block.js
+1 -1
@@ -7,7 +7,7 @@
7 /* eslint-disable import/first */
8
9 import * as React from 'react';
10 -import {block} from 'react';
10 +import {unstable_block as block} from 'react';
11
12 // Server
13
fixtures/dom/src/__tests__/wrong-act-test.js
+1 -1
@@ -179,7 +179,7 @@ it("doesn't warn if you use nested acts from different renderers", () => {
179
180 if (__EXPERIMENTAL__) {
181 it('warns when using createRoot() + .render', () => {
182 - const root = ReactDOM.createRoot(document.createElement('div'));
182 + const root = ReactDOM.unstable_createRoot(document.createElement('div'));
183 expect(() => {
184 TestRenderer.act(() => {
185 root.render(<App />);
packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+103 -101
@@ -366,121 +366,123 @@ describe('ReactHooksInspectionIntegration', () => {
366 ]);
367 });
368
369 - if (__EXPERIMENTAL__) {
370 - it('should support composite useTransition hook', () => {
371 - function Foo(props) {
372 - React.useTransition();
373 - const memoizedValue = React.useMemo(() => 'hello', []);
374 - return <div>{memoizedValue}</div>;
375 - }
376 - const renderer = ReactTestRenderer.create(<Foo />);
377 - const childFiber = renderer.root.findByType(Foo)._currentFiber();
378 - const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
379 - expect(tree).toEqual([
380 - {
381 - id: 0,
382 - isStateEditable: false,
383 - name: 'Transition',
384 - value: undefined,
385 - subHooks: [],
386 - },
387 - {
388 - id: 1,
389 - isStateEditable: false,
390 - name: 'Memo',
391 - value: 'hello',
392 - subHooks: [],
393 - },
394 - ]);
395 - });
396 -
397 - it('should support composite useDeferredValue hook', () => {
398 - function Foo(props) {
399 - React.useDeferredValue('abc', {
400 - timeoutMs: 500,
401 - });
402 - const [state] = React.useState(() => 'hello', []);
403 - return <div>{state}</div>;
404 - }
405 - const renderer = ReactTestRenderer.create(<Foo />);
406 - const childFiber = renderer.root.findByType(Foo)._currentFiber();
407 - const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
408 - expect(tree).toEqual([
409 - {
410 - id: 0,
411 - isStateEditable: false,
412 - name: 'DeferredValue',
413 - value: 'abc',
414 - subHooks: [],
415 - },
416 - {
417 - id: 1,
418 - isStateEditable: true,
419 - name: 'State',
420 - value: 'hello',
421 - subHooks: [],
422 - },
423 - ]);
424 - });
425 -
426 - it('should support composite useOpaqueIdentifier hook', () => {
427 - function Foo(props) {
428 - const id = React.unstable_useOpaqueIdentifier();
429 - const [state] = React.useState(() => 'hello', []);
430 - return <div id={id}>{state}</div>;
431 - }
432 -
433 - const renderer = ReactTestRenderer.create(<Foo />);
434 - const childFiber = renderer.root.findByType(Foo)._currentFiber();
435 - const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
436 -
437 - expect(tree.length).toEqual(2);
438 -
439 - expect(tree[0].id).toEqual(0);
440 - expect(tree[0].isStateEditable).toEqual(false);
441 - expect(tree[0].name).toEqual('OpaqueIdentifier');
442 - expect((tree[0].value + '').startsWith('c_')).toBe(true);
369 + // @gate experimental
370 + it('should support composite useTransition hook', () => {
371 + function Foo(props) {
372 + React.unstable_useTransition();
373 + const memoizedValue = React.useMemo(() => 'hello', []);
374 + return <div>{memoizedValue}</div>;
375 + }
376 + const renderer = ReactTestRenderer.create(<Foo />);
377 + const childFiber = renderer.root.findByType(Foo)._currentFiber();
378 + const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
379 + expect(tree).toEqual([
380 + {
381 + id: 0,
382 + isStateEditable: false,
383 + name: 'Transition',
384 + value: undefined,
385 + subHooks: [],
386 + },
387 + {
388 + id: 1,
389 + isStateEditable: false,
390 + name: 'Memo',
391 + value: 'hello',
392 + subHooks: [],
393 + },
394 + ]);
395 + });
396
444 - expect(tree[1]).toEqual({
397 + // @gate experimental
398 + it('should support composite useDeferredValue hook', () => {
399 + function Foo(props) {
400 + React.unstable_useDeferredValue('abc', {
401 + timeoutMs: 500,
402 + });
403 + const [state] = React.useState(() => 'hello', []);
404 + return <div>{state}</div>;
405 + }
406 + const renderer = ReactTestRenderer.create(<Foo />);
407 + const childFiber = renderer.root.findByType(Foo)._currentFiber();
408 + const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
409 + expect(tree).toEqual([
410 + {
411 + id: 0,
412 + isStateEditable: false,
413 + name: 'DeferredValue',
414 + value: 'abc',
415 + subHooks: [],
416 + },
417 + {
418 id: 1,
419 isStateEditable: true,
420 name: 'State',
421 value: 'hello',
422 subHooks: [],
450 - });
423 + },
424 + ]);
425 + });
426 +
427 + // @gate experimental
428 + it('should support composite useOpaqueIdentifier hook', () => {
429 + function Foo(props) {
430 + const id = React.unstable_useOpaqueIdentifier();
431 + const [state] = React.useState(() => 'hello', []);
432 + return <div id={id}>{state}</div>;
433 + }
434 +
435 + const renderer = ReactTestRenderer.create(<Foo />);
436 + const childFiber = renderer.root.findByType(Foo)._currentFiber();
437 + const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
438 +
439 + expect(tree.length).toEqual(2);
440 +
441 + expect(tree[0].id).toEqual(0);
442 + expect(tree[0].isStateEditable).toEqual(false);
443 + expect(tree[0].name).toEqual('OpaqueIdentifier');
444 + expect((tree[0].value + '').startsWith('c_')).toBe(true);
445 +
446 + expect(tree[1]).toEqual({
447 + id: 1,
448 + isStateEditable: true,
449 + name: 'State',
450 + value: 'hello',
451 + subHooks: [],
452 });
453 + });
454
453 - it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
454 - function Foo(props) {
455 - const id = React.unstable_useOpaqueIdentifier();
456 - const [state] = React.useState(() => 'hello', []);
457 - return <div id={id}>{state}</div>;
458 - }
455 + // @gate experimental
456 + it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
457 + function Foo(props) {
458 + const id = React.unstable_useOpaqueIdentifier();
459 + const [state] = React.useState(() => 'hello', []);
460 + return <div id={id}>{state}</div>;
461 + }
462
460 - const renderer = ReactTestRenderer.create(<Foo />, {
461 - unstable_isConcurrent: true,
462 - });
463 - expect(Scheduler).toFlushWithoutYielding();
463 + const renderer = ReactTestRenderer.create(<Foo />, {
464 + unstable_isConcurrent: true,
465 + });
466 + expect(Scheduler).toFlushWithoutYielding();
467
465 - const childFiber = renderer.root.findByType(Foo)._currentFiber();
466 - const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
468 + const childFiber = renderer.root.findByType(Foo)._currentFiber();
469 + const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
470
468 - expect(tree.length).toEqual(2);
471 + expect(tree.length).toEqual(2);
472
470 - expect(tree[0].id).toEqual(0);
471 - expect(tree[0].isStateEditable).toEqual(false);
472 - expect(tree[0].name).toEqual('OpaqueIdentifier');
473 - expect((tree[0].value + '').startsWith('c_')).toBe(true);
473 + expect(tree[0].id).toEqual(0);
474 + expect(tree[0].isStateEditable).toEqual(false);
475 + expect(tree[0].name).toEqual('OpaqueIdentifier');
476 + expect((tree[0].value + '').startsWith('c_')).toBe(true);
477
475 - expect(tree[1]).toEqual({
476 - id: 1,
477 - isStateEditable: true,
478 - name: 'State',
479 - value: 'hello',
480 - subHooks: [],
481 - });
478 + expect(tree[1]).toEqual({
479 + id: 1,
480 + isStateEditable: true,
481 + name: 'State',
482 + value: 'hello',
483 + subHooks: [],
484 });
483 - }
485 + });
486
487 describe('useDebugValue', () => {
488 it('should support inspectable values for multiple custom hooks', () => {
packages/react-devtools-shared/src/__tests__/store-test.js
+3 -3
@@ -352,18 +352,18 @@ describe('Store', () => {
352 };
353 const Wrapper = ({shouldSuspense}) => (
354 <React.Fragment>
355 - <React.SuspenseList revealOrder="forwards" tail="collapsed">
355 + <React.unstable_SuspenseList revealOrder="forwards" tail="collapsed">
356 <Component key="A" />
357 <React.Suspense fallback={<Loading />}>
358 {shouldSuspense ? <SuspendingComponent /> : <Component key="B" />}
359 </React.Suspense>
360 <Component key="C" />
361 - </React.SuspenseList>
361 + </React.unstable_SuspenseList>
362 </React.Fragment>
363 );
364
365 const container = document.createElement('div');
366 - const root = ReactDOM.createRoot(container);
366 + const root = ReactDOM.unstable_createRoot(container);
367 act(() => {
368 root.render(<Wrapper shouldSuspense={true} />);
369 });
packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+18 -18
@@ -63,7 +63,7 @@ describe('StoreStressConcurrent', () => {
63 // 1. Render a normal version of [a, b, c, d, e].
64 let container = document.createElement('div');
65 // $FlowFixMe
66 - let root = ReactDOM.createRoot(container);
66 + let root = ReactDOM.unstable_createRoot(container);
67 act(() => root.render(<Parent>{[a, b, c, d, e]}</Parent>));
68 expect(store).toMatchInlineSnapshot(
69 `
@@ -147,7 +147,7 @@ describe('StoreStressConcurrent', () => {
147 // Ensure fresh mount.
148 container = document.createElement('div');
149 // $FlowFixMe
150 - root = ReactDOM.createRoot(container);
150 + root = ReactDOM.unstable_createRoot(container);
151
152 // Verify mounting 'abcde'.
153 act(() => root.render(<Parent>{cases[i]}</Parent>));
@@ -177,7 +177,7 @@ describe('StoreStressConcurrent', () => {
177 // There'll be no unmounting until the very end.
178 container = document.createElement('div');
179 // $FlowFixMe
180 - root = ReactDOM.createRoot(container);
180 + root = ReactDOM.unstable_createRoot(container);
181 for (let i = 0; i < cases.length; i++) {
182 // Verify mounting 'abcde'.
183 act(() => root.render(<Parent>{cases[i]}</Parent>));
@@ -243,7 +243,7 @@ describe('StoreStressConcurrent', () => {
243 const snapshots = [];
244 let container = document.createElement('div');
245 // $FlowFixMe
246 - let root = ReactDOM.createRoot(container);
246 + let root = ReactDOM.unstable_createRoot(container);
247 for (let i = 0; i < steps.length; i++) {
248 act(() => root.render(<Root>{steps[i]}</Root>));
249 // We snapshot each step once so it doesn't regress.
@@ -316,7 +316,7 @@ describe('StoreStressConcurrent', () => {
316 for (let j = 0; j < steps.length; j++) {
317 container = document.createElement('div');
318 // $FlowFixMe
319 - root = ReactDOM.createRoot(container);
319 + root = ReactDOM.unstable_createRoot(container);
320 act(() => root.render(<Root>{steps[i]}</Root>));
321 expect(print(store)).toMatch(snapshots[i]);
322 act(() => root.render(<Root>{steps[j]}</Root>));
@@ -333,7 +333,7 @@ describe('StoreStressConcurrent', () => {
333 for (let j = 0; j < steps.length; j++) {
334 container = document.createElement('div');
335 // $FlowFixMe
336 - root = ReactDOM.createRoot(container);
336 + root = ReactDOM.unstable_createRoot(container);
337 act(() =>
338 root.render(
339 <Root>
@@ -405,7 +405,7 @@ describe('StoreStressConcurrent', () => {
405 const snapshots = [];
406 let container = document.createElement('div');
407 // $FlowFixMe
408 - let root = ReactDOM.createRoot(container);
408 + let root = ReactDOM.unstable_createRoot(container);
409 for (let i = 0; i < steps.length; i++) {
410 act(() =>
411 root.render(
@@ -532,7 +532,7 @@ describe('StoreStressConcurrent', () => {
532 // Always start with a fresh container and steps[i].
533 container = document.createElement('div');
534 // $FlowFixMe
535 - root = ReactDOM.createRoot(container);
535 + root = ReactDOM.unstable_createRoot(container);
536 act(() =>
537 root.render(
538 <Root>
@@ -578,7 +578,7 @@ describe('StoreStressConcurrent', () => {
578 // Always start with a fresh container and steps[i].
579 container = document.createElement('div');
580 // $FlowFixMe
581 - root = ReactDOM.createRoot(container);
581 + root = ReactDOM.unstable_createRoot(container);
582 act(() =>
583 root.render(
584 <Root>
@@ -636,7 +636,7 @@ describe('StoreStressConcurrent', () => {
636 // Always start with a fresh container and steps[i].
637 container = document.createElement('div');
638 // $FlowFixMe
639 - root = ReactDOM.createRoot(container);
639 + root = ReactDOM.unstable_createRoot(container);
640 act(() =>
641 root.render(
642 <Root>
@@ -686,7 +686,7 @@ describe('StoreStressConcurrent', () => {
686 // Always start with a fresh container and steps[i].
687 container = document.createElement('div');
688 // $FlowFixMe
689 - root = ReactDOM.createRoot(container);
689 + root = ReactDOM.unstable_createRoot(container);
690 act(() =>
691 root.render(
692 <Root>
@@ -740,7 +740,7 @@ describe('StoreStressConcurrent', () => {
740 // Always start with a fresh container and steps[i].
741 container = document.createElement('div');
742 // $FlowFixMe
743 - root = ReactDOM.createRoot(container);
743 + root = ReactDOM.unstable_createRoot(container);
744 act(() =>
745 root.render(
746 <Root>
@@ -894,7 +894,7 @@ describe('StoreStressConcurrent', () => {
894 const snapshots = [];
895 let container = document.createElement('div');
896 // $FlowFixMe
897 - let root = ReactDOM.createRoot(container);
897 + let root = ReactDOM.unstable_createRoot(container);
898 for (let i = 0; i < steps.length; i++) {
899 act(() =>
900 root.render(
@@ -1051,7 +1051,7 @@ describe('StoreStressConcurrent', () => {
1051 // Always start with a fresh container and steps[i].
1052 container = document.createElement('div');
1053 // $FlowFixMe
1054 - root = ReactDOM.createRoot(container);
1054 + root = ReactDOM.unstable_createRoot(container);
1055 act(() =>
1056 root.render(
1057 <Root>
@@ -1103,7 +1103,7 @@ describe('StoreStressConcurrent', () => {
1103 // Always start with a fresh container and steps[i].
1104 container = document.createElement('div');
1105 // $FlowFixMe
1106 - root = ReactDOM.createRoot(container);
1106 + root = ReactDOM.unstable_createRoot(container);
1107 act(() =>
1108 root.render(
1109 <Root>
@@ -1170,7 +1170,7 @@ describe('StoreStressConcurrent', () => {
1170 // Always start with a fresh container and steps[i].
1171 container = document.createElement('div');
1172 // $FlowFixMe
1173 - root = ReactDOM.createRoot(container);
1173 + root = ReactDOM.unstable_createRoot(container);
1174 act(() =>
1175 root.render(
1176 <Root>
@@ -1222,7 +1222,7 @@ describe('StoreStressConcurrent', () => {
1222 // Always start with a fresh container and steps[i].
1223 container = document.createElement('div');
1224 // $FlowFixMe
1225 - root = ReactDOM.createRoot(container);
1225 + root = ReactDOM.unstable_createRoot(container);
1226 act(() =>
1227 root.render(
1228 <Root>
@@ -1274,7 +1274,7 @@ describe('StoreStressConcurrent', () => {
1274 // Always start with a fresh container and steps[i].
1275 container = document.createElement('div');
1276 // $FlowFixMe
1277 - root = ReactDOM.createRoot(container);
1277 + root = ReactDOM.unstable_createRoot(container);
1278 act(() =>
1279 root.render(
1280 <Root>
packages/react-dom/index.classic.fb.js
+2
@@ -29,7 +29,9 @@ export {
29 render,
30 unmountComponentAtNode,
31 createRoot,
32 + createRoot as unstable_createRoot,
33 createBlockingRoot,
34 + createBlockingRoot as unstable_createBlockingRoot,
35 unstable_flushControlled,
36 unstable_scheduleHydration,
37 unstable_renderSubtreeIntoContainer,
packages/react-dom/index.experimental.js
+2 -2
@@ -19,8 +19,8 @@ export {
19 render,
20 unmountComponentAtNode,
21 // exposeConcurrentModeAPIs
22 - createRoot,
23 - createBlockingRoot,
22 + createRoot as unstable_createRoot,
23 + createBlockingRoot as unstable_createBlockingRoot,
24 unstable_flushControlled,
25 unstable_scheduleHydration,
26 // Disabled behind disableUnstableRenderSubtreeIntoContainer
packages/react-dom/index.js
+21 -1
@@ -7,4 +7,24 @@
7 * @flow
8 */
9
10 -export * from './src/client/ReactDOM';
10 +// Export all exports so that they're available in tests.
11 +// We can't use export * from in Flow for some reason.
12 +export {
13 + createPortal,
14 + unstable_batchedUpdates,
15 + flushSync,
16 + __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
17 + version,
18 + findDOMNode,
19 + hydrate,
20 + render,
21 + unmountComponentAtNode,
22 + createRoot,
23 + createRoot as unstable_createRoot,
24 + createBlockingRoot,
25 + createBlockingRoot as unstable_createBlockingRoot,
26 + unstable_flushControlled,
27 + unstable_scheduleHydration,
28 + unstable_renderSubtreeIntoContainer,
29 + unstable_createPortal,
30 +} from './src/client/ReactDOM';
packages/react-dom/index.modern.fb.js
+2
@@ -14,7 +14,9 @@ export {
14 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
15 version,
16 createRoot,
17 + createRoot as unstable_createRoot,
18 createBlockingRoot,
19 + createBlockingRoot as unstable_createBlockingRoot,
20 unstable_flushControlled,
21 unstable_scheduleHydration,
22 } from './src/client/ReactDOM';
packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+11 -11
@@ -192,7 +192,7 @@ describe('ReactDOMFiberAsync', () => {
192 );
193 }
194 }
195 - const root = ReactDOM.createRoot(container);
195 + const root = ReactDOM.unstable_createRoot(container);
196 root.render(<Counter />);
197 Scheduler.unstable_flushAll();
198 expect(asyncValueRef.current.textContent).toBe('');
@@ -213,7 +213,7 @@ describe('ReactDOMFiberAsync', () => {
213
214 // @gate experimental
215 it('top-level updates are concurrent', () => {
216 - const root = ReactDOM.createRoot(container);
216 + const root = ReactDOM.unstable_createRoot(container);
217 root.render(<div>Hi</div>);
218 expect(container.textContent).toEqual('');
219 Scheduler.unstable_flushAll();
@@ -236,7 +236,7 @@ describe('ReactDOMFiberAsync', () => {
236 }
237 }
238
239 - const root = ReactDOM.createRoot(container);
239 + const root = ReactDOM.unstable_createRoot(container);
240 root.render(<Component />);
241 expect(container.textContent).toEqual('');
242 Scheduler.unstable_flushAll();
@@ -267,7 +267,7 @@ describe('ReactDOMFiberAsync', () => {
267 }
268 }
269
270 - const root = ReactDOM.createRoot(container);
270 + const root = ReactDOM.unstable_createRoot(container);
271 root.render(<Component />);
272 Scheduler.unstable_flushAll();
273
@@ -309,7 +309,7 @@ describe('ReactDOMFiberAsync', () => {
309 return this.state.counter;
310 }
311 }
312 - const root = ReactDOM.createRoot(container);
312 + const root = ReactDOM.unstable_createRoot(container);
313 root.render(<Counter />);
314 Scheduler.unstable_flushAll();
315 expect(container.textContent).toEqual('0');
@@ -423,7 +423,7 @@ describe('ReactDOMFiberAsync', () => {
423 }
424 }
425
426 - const root = ReactDOM.createRoot(container);
426 + const root = ReactDOM.unstable_createRoot(container);
427 root.render(<Form />);
428 // Flush
429 Scheduler.unstable_flushAll();
@@ -490,7 +490,7 @@ describe('ReactDOMFiberAsync', () => {
490 }
491 }
492
493 - const root = ReactDOM.createRoot(container);
493 + const root = ReactDOM.unstable_createRoot(container);
494 root.render(<Form />);
495 // Flush
496 Scheduler.unstable_flushAll();
@@ -551,7 +551,7 @@ describe('ReactDOMFiberAsync', () => {
551 }
552 }
553
554 - const root = ReactDOM.createRoot(container);
554 + const root = ReactDOM.unstable_createRoot(container);
555 root.render(<Form />);
556 // Flush
557 Scheduler.unstable_flushAll();
@@ -614,7 +614,7 @@ describe('ReactDOMFiberAsync', () => {
614 describe('createBlockingRoot', () => {
615 // @gate experimental
616 it('updates flush without yielding in the next event', () => {
617 - const root = ReactDOM.createBlockingRoot(container);
617 + const root = ReactDOM.unstable_createBlockingRoot(container);
618
619 function Text(props) {
620 Scheduler.unstable_yieldValue(props.text);
@@ -661,7 +661,7 @@ describe('ReactDOMFiberAsync', () => {
661 return <button ref={ref}>new</button>;
662 }
663
664 - const oldRoot = ReactDOM.createRoot(container);
664 + const oldRoot = ReactDOM.unstable_createRoot(container);
665 act(() => {
666 oldRoot.render(<OldApp />);
667 });
@@ -673,7 +673,7 @@ describe('ReactDOMFiberAsync', () => {
673 expect(container.textContent).toBe('');
674
675 // We can now render a new one.
676 - const newRoot = ReactDOM.createRoot(container);
676 + const newRoot = ReactDOM.unstable_createRoot(container);
677 ReactDOM.flushSync(() => {
678 newRoot.render(<NewApp />);
679 });
packages/react-dom/src/__tests__/ReactDOMHooks-test.js
+1 -1
@@ -126,7 +126,7 @@ describe('ReactDOMHooks', () => {
126 const inputRef = createRef();
127 const labelRef = createRef();
128
129 - const root = ReactDOM.createRoot(container);
129 + const root = ReactDOM.unstable_createRoot(container);
130 root.render(<Example inputRef={inputRef} labelRef={labelRef} />);
131
132 Scheduler.unstable_flushAll();
packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+20 -20
@@ -28,13 +28,13 @@ describe('ReactDOMRoot', () => {
28
29 if (!__EXPERIMENTAL__) {
30 it('createRoot is not exposed in stable build', () => {
31 - expect(ReactDOM.createRoot).toBe(undefined);
31 + expect(ReactDOM.unstable_createRoot).toBe(undefined);
32 });
33 return;
34 }
35
36 it('renders children', () => {
37 - const root = ReactDOM.createRoot(container);
37 + const root = ReactDOM.unstable_createRoot(container);
38 root.render(<div>Hi</div>);
39 Scheduler.unstable_flushAll();
40 expect(container.textContent).toEqual('Hi');
@@ -42,7 +42,7 @@ describe('ReactDOMRoot', () => {
42
43 it('warns if a callback parameter is provided to render', () => {
44 const callback = jest.fn();
45 - const root = ReactDOM.createRoot(container);
45 + const root = ReactDOM.unstable_createRoot(container);
46 expect(() =>
47 root.render(<div>Hi</div>, callback),
48 ).toErrorDev(
@@ -56,7 +56,7 @@ describe('ReactDOMRoot', () => {
56
57 it('warns if a callback parameter is provided to unmount', () => {
58 const callback = jest.fn();
59 - const root = ReactDOM.createRoot(container);
59 + const root = ReactDOM.unstable_createRoot(container);
60 root.render(<div>Hi</div>);
61 expect(() =>
62 root.unmount(callback),
@@ -70,7 +70,7 @@ describe('ReactDOMRoot', () => {
70 });
71
72 it('unmounts children', () => {
73 - const root = ReactDOM.createRoot(container);
73 + const root = ReactDOM.unstable_createRoot(container);
74 root.render(<div>Hi</div>);
75 Scheduler.unstable_flushAll();
76 expect(container.textContent).toEqual('Hi');
@@ -93,7 +93,7 @@ describe('ReactDOMRoot', () => {
93 // Does not hydrate by default
94 const container1 = document.createElement('div');
95 container1.innerHTML = markup;
96 - const root1 = ReactDOM.createRoot(container1);
96 + const root1 = ReactDOM.unstable_createRoot(container1);
97 root1.render(
98 <div>
99 <span />
@@ -104,7 +104,7 @@ describe('ReactDOMRoot', () => {
104 // Accepts `hydrate` option
105 const container2 = document.createElement('div');
106 container2.innerHTML = markup;
107 - const root2 = ReactDOM.createRoot(container2, {hydrate: true});
107 + const root2 = ReactDOM.unstable_createRoot(container2, {hydrate: true});
108 root2.render(
109 <div>
110 <span />
@@ -136,7 +136,7 @@ describe('ReactDOMRoot', () => {
136
137 it('clears existing children', async () => {
138 container.innerHTML = '<div>a</div><div>b</div>';
139 - const root = ReactDOM.createRoot(container);
139 + const root = ReactDOM.unstable_createRoot(container);
140 root.render(
141 <div>
142 <span>c</span>
@@ -157,12 +157,12 @@ describe('ReactDOMRoot', () => {
157
158 it('throws a good message on invalid containers', () => {
159 expect(() => {
160 - ReactDOM.createRoot(<div>Hi</div>);
160 + ReactDOM.unstable_createRoot(<div>Hi</div>);
161 }).toThrow('createRoot(...): Target container is not a DOM element.');
162 });
163
164 it('warns when rendering with legacy API into createRoot() container', () => {
165 - const root = ReactDOM.createRoot(container);
165 + const root = ReactDOM.unstable_createRoot(container);
166 root.render(<div>Hi</div>);
167 Scheduler.unstable_flushAll();
168 expect(container.textContent).toEqual('Hi');
@@ -185,7 +185,7 @@ describe('ReactDOMRoot', () => {
185 });
186
187 it('warns when hydrating with legacy API into createRoot() container', () => {
188 - const root = ReactDOM.createRoot(container);
188 + const root = ReactDOM.unstable_createRoot(container);
189 root.render(<div>Hi</div>);
190 Scheduler.unstable_flushAll();
191 expect(container.textContent).toEqual('Hi');
@@ -205,7 +205,7 @@ describe('ReactDOMRoot', () => {
205 });
206
207 it('warns when unmounting with legacy API (no previous content)', () => {
208 - const root = ReactDOM.createRoot(container);
208 + const root = ReactDOM.unstable_createRoot(container);
209 root.render(<div>Hi</div>);
210 Scheduler.unstable_flushAll();
211 expect(container.textContent).toEqual('Hi');
@@ -234,7 +234,7 @@ describe('ReactDOMRoot', () => {
234 // Currently createRoot().render() doesn't clear this.
235 container.appendChild(document.createElement('div'));
236 // The rest is the same as test above.
237 - const root = ReactDOM.createRoot(container);
237 + const root = ReactDOM.unstable_createRoot(container);
238 root.render(<div>Hi</div>);
239 Scheduler.unstable_flushAll();
240 expect(container.textContent).toEqual('Hi');
@@ -260,7 +260,7 @@ describe('ReactDOMRoot', () => {
260 it('warns when passing legacy container to createRoot()', () => {
261 ReactDOM.render(<div>Hi</div>, container);
262 expect(() => {
263 - ReactDOM.createRoot(container);
263 + ReactDOM.unstable_createRoot(container);
264 }).toErrorDev(
265 'You are calling ReactDOM.createRoot() on a container that was previously ' +
266 'passed to ReactDOM.render(). This is not supported.',
@@ -269,9 +269,9 @@ describe('ReactDOMRoot', () => {
269 });
270
271 it('warns when creating two roots managing the same container', () => {
272 - ReactDOM.createRoot(container);
272 + ReactDOM.unstable_createRoot(container);
273 expect(() => {
274 - ReactDOM.createRoot(container);
274 + ReactDOM.unstable_createRoot(container);
275 }).toErrorDev(
276 'You are calling ReactDOM.createRoot() on a container that ' +
277 'has already been passed to createRoot() before. Instead, call ' +
@@ -281,15 +281,15 @@ describe('ReactDOMRoot', () => {
281 });
282
283 it('does not warn when creating second root after first one is unmounted', () => {
284 - const root = ReactDOM.createRoot(container);
284 + const root = ReactDOM.unstable_createRoot(container);
285 root.unmount();
286 Scheduler.unstable_flushAll();
287 - ReactDOM.createRoot(container); // No warning
287 + ReactDOM.unstable_createRoot(container); // No warning
288 });
289
290 it('warns if creating a root on the document.body', async () => {
291 expect(() => {
292 - ReactDOM.createRoot(document.body);
292 + ReactDOM.unstable_createRoot(document.body);
293 }).toErrorDev(
294 'createRoot(): Creating roots directly with document.body is ' +
295 'discouraged, since its children are often manipulated by third-party ' +
@@ -301,7 +301,7 @@ describe('ReactDOMRoot', () => {
301 });
302
303 it('warns if updating a root that has had its contents removed', async () => {
304 - const root = ReactDOM.createRoot(container);
304 + const root = ReactDOM.unstable_createRoot(container);
305 root.render(<div>Hi</div>);
306 Scheduler.unstable_flushAll();
307 container.innerHTML = '';
packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+33 -15
@@ -1051,7 +1051,7 @@ describe('ReactDOMServerHooks', () => {
1051 document.body.append(container);
1052
1053 container.innerHTML = ReactDOMServer.renderToString(<App />);
1054 - const root = ReactDOM.createRoot(container, {hydrate: true});
1054 + const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
1055 root.render(<App />);
1056 Scheduler.unstable_flushAll();
1057 jest.runAllTimers();
@@ -1136,7 +1136,7 @@ describe('ReactDOMServerHooks', () => {
1136 const container = document.createElement('div');
1137 document.body.append(container);
1138 container.innerHTML = ReactDOMServer.renderToString(<App />);
1139 - const root = ReactDOM.createRoot(container, {hydrate: true});
1139 + const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
1140 ReactTestUtils.act(() => {
1141 root.render(<App />);
1142 });
@@ -1196,7 +1196,7 @@ describe('ReactDOMServerHooks', () => {
1196 const container = document.createElement('div');
1197 document.body.append(container);
1198 container.innerHTML = ReactDOMServer.renderToString(<App />);
1199 - const root = ReactDOM.createRoot(container, {hydrate: true});
1199 + const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
1200 ReactTestUtils.act(() => {
1201 root.render(<App />);
1202 });
@@ -1291,7 +1291,7 @@ describe('ReactDOMServerHooks', () => {
1291
1292 const childOneSpan = container.getElementsByTagName('span')[0];
1293
1294 - const root = ReactDOM.createRoot(container, {hydrate: true});
1294 + const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
1295 root.render(<App show={false} />);
1296 expect(Scheduler).toHaveYielded([]);
1297
@@ -1397,7 +1397,7 @@ describe('ReactDOMServerHooks', () => {
1397 container.innerHTML = ReactDOMServer.renderToString(<App />);
1398
1399 suspend = true;
1400 - const root = ReactDOM.createRoot(container, {hydrate: true});
1400 + const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
1401 await ReactTestUtils.act(async () => {
1402 root.render(<App />);
1403 });
@@ -1447,7 +1447,9 @@ describe('ReactDOMServerHooks', () => {
1447
1448 // This is the wrong HTML string
1449 container.innerHTML = '<span></span>';
1450 - ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
1450 + ReactDOM.unstable_createRoot(container, {hydrate: true}).render(
1451 + <App />,
1452 + );
1453 expect(() =>
1454 expect(() => Scheduler.unstable_flushAll()).toThrow(),
1455 ).toErrorDev([
@@ -1497,7 +1499,7 @@ describe('ReactDOMServerHooks', () => {
1499 container.innerHTML = ReactDOMServer.renderToString(<App />);
1500
1501 suspend = false;
1500 - const root = ReactDOM.createRoot(container, {hydrate: true});
1502 + const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
1503 await ReactTestUtils.act(async () => {
1504 root.render(<App />);
1505 });
@@ -1533,7 +1535,9 @@ describe('ReactDOMServerHooks', () => {
1535
1536 // This is the wrong HTML string
1537 container.innerHTML = '<span></span>';
1536 - ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
1538 + ReactDOM.unstable_createRoot(container, {hydrate: true}).render(
1539 + <App />,
1540 + );
1541 expect(() =>
1542 expect(() => Scheduler.unstable_flushAll()).toThrow(),
1543 ).toErrorDev([
@@ -1555,7 +1559,9 @@ describe('ReactDOMServerHooks', () => {
1559
1560 // This is the wrong HTML string
1561 container.innerHTML = '<span></span>';
1558 - ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
1562 + ReactDOM.unstable_createRoot(container, {hydrate: true}).render(
1563 + <App />,
1564 + );
1565 expect(() =>
1566 expect(() => Scheduler.unstable_flushAll()).toThrow(
1567 'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
@@ -1584,7 +1590,9 @@ describe('ReactDOMServerHooks', () => {
1590
1591 // This is the wrong HTML string
1592 container.innerHTML = '<span></span>';
1587 - ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
1593 + ReactDOM.unstable_createRoot(container, {hydrate: true}).render(
1594 + <App />,
1595 + );
1596 expect(() =>
1597 expect(() => Scheduler.unstable_flushAll()).toThrow(
1598 'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
@@ -1612,7 +1620,9 @@ describe('ReactDOMServerHooks', () => {
1620 document.body.appendChild(container);
1621
1622 container.innerHTML = ReactDOMServer.renderToString(<App />);
1615 - ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
1623 + ReactDOM.unstable_createRoot(container, {hydrate: true}).render(
1624 + <App />,
1625 + );
1626 expect(() =>
1627 expect(() => Scheduler.unstable_flushAll()).toThrow(
1628 'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
@@ -1637,7 +1647,9 @@ describe('ReactDOMServerHooks', () => {
1647 document.body.appendChild(container);
1648
1649 container.innerHTML = ReactDOMServer.renderToString(<App />);
1640 - ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
1650 + ReactDOM.unstable_createRoot(container, {hydrate: true}).render(
1651 + <App />,
1652 + );
1653 expect(() =>
1654 expect(() => Scheduler.unstable_flushAll()).toThrow(
1655 'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
@@ -1670,7 +1682,9 @@ describe('ReactDOMServerHooks', () => {
1682
1683 container.innerHTML = ReactDOMServer.renderToString(<App />);
1684
1673 - ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
1685 + ReactDOM.unstable_createRoot(container, {hydrate: true}).render(
1686 + <App />,
1687 + );
1688
1689 if (gate(flags => flags.new)) {
1690 expect(() => Scheduler.unstable_flushAll()).toErrorDev([
@@ -1712,7 +1726,9 @@ describe('ReactDOMServerHooks', () => {
1726
1727 container.innerHTML = ReactDOMServer.renderToString(<App />);
1728
1715 - ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
1729 + ReactDOM.unstable_createRoot(container, {hydrate: true}).render(
1730 + <App />,
1731 + );
1732
1733 if (gate(flags => flags.new)) {
1734 expect(() => Scheduler.unstable_flushAll()).toErrorDev([
@@ -1772,7 +1788,9 @@ describe('ReactDOMServerHooks', () => {
1788 .getAttribute('aria-labelledby'),
1789 ).toEqual(serverID);
1790
1775 - ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
1791 + ReactDOM.unstable_createRoot(container, {hydrate: true}).render(
1792 + <App />,
1793 + );
1794 jest.runAllTimers();
1795 expect(Scheduler).toHaveYielded([]);
1796 expect(Scheduler).toFlushAndYield([]);
packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+1 -1
@@ -496,7 +496,7 @@ describe('ReactDOMServerHydration', () => {
496 const finalHTML = ReactDOMServer.renderToString(<div />);
497 const container = document.createElement('div');
498 container.innerHTML = finalHTML;
499 - const root = ReactDOM.createRoot(container, {hydrate: true});
499 + const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
500 root.render(<div />);
501 Scheduler.unstable_flushAll();
502 root.render(null);
packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+8 -4
@@ -30,7 +30,7 @@ describe('ReactTestUtils.act()', () => {
30 if (__EXPERIMENTAL__) {
31 let concurrentRoot = null;
32 const renderConcurrent = (el, dom) => {
33 - concurrentRoot = ReactDOM.createRoot(dom);
33 + concurrentRoot = ReactDOM.unstable_createRoot(dom);
34 concurrentRoot.render(el);
35 };
36
@@ -76,7 +76,7 @@ describe('ReactTestUtils.act()', () => {
76 if (__EXPERIMENTAL__) {
77 let blockingRoot = null;
78 const renderBatched = (el, dom) => {
79 - blockingRoot = ReactDOM.createBlockingRoot(dom);
79 + blockingRoot = ReactDOM.unstable_createBlockingRoot(dom);
80 blockingRoot.render(el);
81 };
82
@@ -127,7 +127,9 @@ describe('ReactTestUtils.act()', () => {
127 // @gate experimental
128 it('warns in blocking mode', () => {
129 expect(() => {
130 - const root = ReactDOM.createBlockingRoot(document.createElement('div'));
130 + const root = ReactDOM.unstable_createBlockingRoot(
131 + document.createElement('div'),
132 + );
133 root.render(<App />);
134 Scheduler.unstable_flushAll();
135 }).toErrorDev([
@@ -138,7 +140,9 @@ describe('ReactTestUtils.act()', () => {
140 // @gate experimental
141 it('warns in concurrent mode', () => {
142 expect(() => {
141 - const root = ReactDOM.createRoot(document.createElement('div'));
143 + const root = ReactDOM.unstable_createRoot(
144 + document.createElement('div'),
145 + );
146 root.render(<App />);
147 Scheduler.unstable_flushAll();
148 }).toErrorDev([
packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
+8 -4
@@ -30,7 +30,7 @@ it('does not warn when rendering in legacy mode', () => {
30 // @gate experimental
31 it('should warn when rendering in concurrent mode', () => {
32 expect(() => {
33 - ReactDOM.createRoot(document.createElement('div')).render(<App />);
33 + ReactDOM.unstable_createRoot(document.createElement('div')).render(<App />);
34 }).toErrorDev(
35 'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
36 'to guarantee consistent behaviour across tests and browsers.',
@@ -38,14 +38,16 @@ it('should warn when rendering in concurrent mode', () => {
38 );
39 // does not warn twice
40 expect(() => {
41 - ReactDOM.createRoot(document.createElement('div')).render(<App />);
41 + ReactDOM.unstable_createRoot(document.createElement('div')).render(<App />);
42 }).toErrorDev([]);
43 });
44
45 // @gate experimental
46 it('should warn when rendering in blocking mode', () => {
47 expect(() => {
48 - ReactDOM.createBlockingRoot(document.createElement('div')).render(<App />);
48 + ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
49 + <App />,
50 + );
51 }).toErrorDev(
52 'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
53 'to guarantee consistent behaviour across tests and browsers.',
@@ -53,6 +55,8 @@ it('should warn when rendering in blocking mode', () => {
55 );
56 // does not warn twice
57 expect(() => {
56 - ReactDOM.createBlockingRoot(document.createElement('div')).render(<App />);
58 + ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
59 + <App />,
60 + );
61 }).toErrorDev([]);
62 });
packages/react-dom/src/__tests__/ReactUpdates-test.js
+1 -1
@@ -1319,7 +1319,7 @@ describe('ReactUpdates', () => {
1319 );
1320 }
1321
1322 - const root = ReactDOM.createRoot(container);
1322 + const root = ReactDOM.unstable_createRoot(container);
1323 let hiddenDiv;
1324 act(() => {
1325 root.render(<Foo />);
packages/react-dom/src/events/plugins/__tests__/LegacyChangeEventPlugin-test.js
+6 -6
@@ -479,7 +479,7 @@ describe('ChangeEventPlugin', () => {
479
480 // @gate experimental
481 it('text input', () => {
482 - const root = ReactDOM.createRoot(container);
482 + const root = ReactDOM.unstable_createRoot(container);
483 let input;
484
485 class ControlledInput extends React.Component {
@@ -522,7 +522,7 @@ describe('ChangeEventPlugin', () => {
522
523 // @gate experimental
524 it('checkbox input', () => {
525 - const root = ReactDOM.createRoot(container);
525 + const root = ReactDOM.unstable_createRoot(container);
526 let input;
527
528 class ControlledInput extends React.Component {
@@ -578,7 +578,7 @@ describe('ChangeEventPlugin', () => {
578
579 // @gate experimental
580 it('textarea', () => {
581 - const root = ReactDOM.createRoot(container);
581 + const root = ReactDOM.unstable_createRoot(container);
582 let textarea;
583
584 class ControlledTextarea extends React.Component {
@@ -621,7 +621,7 @@ describe('ChangeEventPlugin', () => {
621
622 // @gate experimental
623 it('parent of input', () => {
624 - const root = ReactDOM.createRoot(container);
624 + const root = ReactDOM.unstable_createRoot(container);
625 let input;
626
627 class ControlledInput extends React.Component {
@@ -668,7 +668,7 @@ describe('ChangeEventPlugin', () => {
668
669 // @gate experimental
670 it('is async for non-input events', () => {
671 - const root = ReactDOM.createRoot(container);
671 + const root = ReactDOM.unstable_createRoot(container);
672 let input;
673
674 class ControlledInput extends React.Component {
@@ -728,7 +728,7 @@ describe('ChangeEventPlugin', () => {
728 const {act} = TestUtils;
729 const {useState} = React;
730
731 - const root = ReactDOM.createRoot(container);
731 + const root = ReactDOM.unstable_createRoot(container);
732
733 const target = React.createRef(null);
734 function Foo() {
packages/react-dom/src/events/plugins/__tests__/LegacySimpleEventPlugin-test.js
+3 -3
@@ -239,7 +239,7 @@ describe('SimpleEventPlugin', function() {
239 // @gate experimental
240 it('flushes pending interactive work before extracting event handler', () => {
241 container = document.createElement('div');
242 - const root = ReactDOM.createRoot(container);
242 + const root = ReactDOM.unstable_createRoot(container);
243 document.body.appendChild(container);
244
245 let button;
@@ -310,7 +310,7 @@ describe('SimpleEventPlugin', function() {
310 // @gate experimental
311 it('end result of many interactive updates is deterministic', () => {
312 container = document.createElement('div');
313 - const root = ReactDOM.createRoot(container);
313 + const root = ReactDOM.unstable_createRoot(container);
314 document.body.appendChild(container);
315
316 let button;
@@ -409,7 +409,7 @@ describe('SimpleEventPlugin', function() {
409 }
410
411 // Initial mount
412 - const root = ReactDOM.createRoot(container);
412 + const root = ReactDOM.unstable_createRoot(container);
413 root.render(<Wrapper />);
414 expect(Scheduler).toFlushAndYield([
415 'High-pri count: 0, Low-pri count: 0',
packages/react-reconciler/src/__tests__/ReactBlocks-test.js
+1 -1
@@ -24,7 +24,7 @@ describe('ReactBlocks', () => {
24 React = require('react');
25 ReactNoop = require('react-noop-renderer');
26
27 - block = React.block;
27 + block = React.unstable_block;
28 useState = React.useState;
29 Suspense = React.Suspense;
30 const cache = new Map();
packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+2 -2
@@ -63,8 +63,8 @@ describe('ReactHooksWithNoopRenderer', () => {
63 useImperativeHandle = React.useImperativeHandle;
64 forwardRef = React.forwardRef;
65 memo = React.memo;
66 - useTransition = React.useTransition;
67 - useDeferredValue = React.useDeferredValue;
66 + useTransition = React.unstable_useTransition;
67 + useDeferredValue = React.unstable_useDeferredValue;
68 Suspense = React.Suspense;
69 act = ReactNoop.act;
70
packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+1 -1
@@ -12,7 +12,7 @@ describe('ReactSuspenseList', () => {
12 ReactNoop = require('react-noop-renderer');
13 Scheduler = require('scheduler');
14 Suspense = React.Suspense;
15 - SuspenseList = React.SuspenseList;
15 + SuspenseList = React.unstable_SuspenseList;
16 });
17
18 function Text(props) {
packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+6 -4
@@ -2737,7 +2737,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2737
2738 function App() {
2739 const [page, setPage] = React.useState('A');
2740 - const [startLoading, isLoading] = React.useTransition(SUSPENSE_CONFIG);
2740 + const [startLoading, isLoading] = React.unstable_useTransition(
2741 + SUSPENSE_CONFIG,
2742 + );
2743 transitionToPage = nextPage => startLoading(() => setPage(nextPage));
2744 return (
2745 <Fragment>
@@ -3718,7 +3720,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3720
3721 // @gate experimental
3722 it('regression: ping at high priority causes update to be dropped', async () => {
3721 - const {useState, useTransition} = React;
3723 + const {useState, unstable_useTransition: useTransition} = React;
3724
3725 let setTextA;
3726 function A() {
@@ -3836,10 +3838,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3838 let setTextWithLongTransition;
3839
3840 function App() {
3839 - const [startShortTransition, isPending1] = React.useTransition({
3841 + const [startShortTransition, isPending1] = React.unstable_useTransition({
3842 timeoutMs: 5000,
3843 });
3842 - const [startLongTransition, isPending2] = React.useTransition({
3844 + const [startLongTransition, isPending2] = React.unstable_useTransition({
3845 timeoutMs: 30000,
3846 });
3847 const isPending = isPending1 || isPending2;
packages/react-reconciler/src/__tests__/ReactTransition-test.js
+1 -1
@@ -25,7 +25,7 @@ describe('ReactTransition', () => {
25 ReactNoop = require('react-noop-renderer');
26 Scheduler = require('scheduler');
27 useState = React.useState;
28 - useTransition = React.useTransition;
28 + useTransition = React.unstable_useTransition;
29 Suspense = React.Suspense;
30 act = ReactNoop.act;
31 });
packages/react-refresh/src/__tests__/ReactFresh-test.js
+1 -1
@@ -2424,7 +2424,7 @@ describe('ReactFresh', () => {
2424 };
2425 });
2426
2427 - const root = ReactDOM.createRoot(container);
2427 + const root = ReactDOM.unstable_createRoot(container);
2428 root.render(<AppV1 offscreen={true} />);
2429 expect(Scheduler).toFlushAndYieldThrough(['App#layout']);
2430 const el = container.firstChild;
packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+4 -4
@@ -183,7 +183,7 @@ describe('ReactFlightDOM', () => {
183 const response = ReactTransportDOMClient.createFromReadableStream(readable);
184
185 const container = document.createElement('div');
186 - const root = ReactDOM.createRoot(container);
186 + const root = ReactDOM.unstable_createRoot(container);
187 await act(async () => {
188 root.render(<App response={response} />);
189 });
@@ -222,7 +222,7 @@ describe('ReactFlightDOM', () => {
222 const response = ReactTransportDOMClient.createFromReadableStream(readable);
223
224 const container = document.createElement('div');
225 - const root = ReactDOM.createRoot(container);
225 + const root = ReactDOM.unstable_createRoot(container);
226 await act(async () => {
227 root.render(<App response={response} />);
228 });
@@ -259,7 +259,7 @@ describe('ReactFlightDOM', () => {
259 const response = ReactTransportDOMClient.createFromReadableStream(readable);
260
261 const container = document.createElement('div');
262 - const root = ReactDOM.createRoot(container);
262 + const root = ReactDOM.unstable_createRoot(container);
263 await act(async () => {
264 root.render(<App response={response} />);
265 });
@@ -418,7 +418,7 @@ describe('ReactFlightDOM', () => {
418 const response = ReactTransportDOMClient.createFromReadableStream(readable);
419
420 const container = document.createElement('div');
421 - const root = ReactDOM.createRoot(container);
421 + const root = ReactDOM.unstable_createRoot(container);
422 await act(async () => {
423 root.render(<ProfilePage response={response} />);
424 });
packages/react/index.classic.fb.js
+4
@@ -40,11 +40,15 @@ export {
40 createFactory,
41 // exposeConcurrentModeAPIs
42 useTransition,
43 + useTransition as unstable_useTransition,
44 useDeferredValue,
45 + useDeferredValue as unstable_useDeferredValue,
46 SuspenseList,
47 + SuspenseList as unstable_SuspenseList,
48 unstable_withSuspenseConfig,
49 // enableBlocksAPI
50 block,
51 + block as unstable_block,
52 // enableDeprecatedFlareAPI
53 DEPRECATED_useResponder,
54 DEPRECATED_createResponder,
packages/react/index.experimental.js
+4 -4
@@ -39,12 +39,12 @@ export {
39 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
40 createFactory,
41 // exposeConcurrentModeAPIs
42 - useTransition,
43 - useDeferredValue,
44 - SuspenseList,
42 + useTransition as unstable_useTransition,
43 + useDeferredValue as unstable_useDeferredValue,
44 + SuspenseList as unstable_SuspenseList,
45 unstable_withSuspenseConfig,
46 // enableBlocksAPI
47 - block,
47 + block as unstable_block,
48 unstable_useOpaqueIdentifier,
49 // enableDebugTracing
50 unstable_DebugTracingMode,
packages/react/index.js
+4
@@ -69,10 +69,14 @@ export {
69 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
70 createFactory,
71 useTransition,
72 + useTransition as unstable_useTransition,
73 useDeferredValue,
74 + useDeferredValue as unstable_useDeferredValue,
75 SuspenseList,
76 + SuspenseList as unstable_SuspenseList,
77 unstable_withSuspenseConfig,
78 block,
79 + block as unstable_block,
80 DEPRECATED_useResponder,
81 DEPRECATED_createResponder,
82 unstable_createFundamental,
packages/react/index.modern.fb.js
+4
@@ -39,11 +39,15 @@ export {
39 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
40 // exposeConcurrentModeAPIs
41 useTransition,
42 + useTransition as unstable_useTransition,
43 useDeferredValue,
44 + useDeferredValue as unstable_useDeferredValue,
45 SuspenseList,
46 + SuspenseList as unstable_SuspenseList,
47 unstable_withSuspenseConfig,
48 // enableBlocksAPI
49 block,
50 + block as unstable_block,
51 // enableDeprecatedFlareAPI
52 DEPRECATED_useResponder,
53 DEPRECATED_createResponder,
packages/react/src/__tests__/ReactStrictMode-test.js
+3 -3
@@ -398,7 +398,7 @@ describe('Concurrent Mode', () => {
398 }
399
400 const container = document.createElement('div');
401 - const root = ReactDOM.createRoot(container);
401 + const root = ReactDOM.unstable_createRoot(container);
402 root.render(<AsyncRoot />);
403 expect(() => Scheduler.unstable_flushAll()).toErrorDev(
404 [
@@ -454,7 +454,7 @@ Please update the following components: AsyncRoot`,
454 }
455
456 const container = document.createElement('div');
457 - const root = ReactDOM.createRoot(container);
457 + const root = ReactDOM.unstable_createRoot(container);
458 root.render(<AsyncRoot />);
459
460 expect(() => {
@@ -533,7 +533,7 @@ Please update the following components: Parent`,
533 }
534
535 const container = document.createElement('div');
536 - const root = ReactDOM.createRoot(container);
536 + const root = ReactDOM.unstable_createRoot(container);
537 root.render(<AsyncRoot foo={true} />);
538 expect(() =>
539 Scheduler.unstable_flushAll(),