diff --git a/fixtures/blocks/src/server/App.block.js b/fixtures/blocks/src/server/App.block.js index 4a73c58faa7a..9347bbe0cf57 100644 --- a/fixtures/blocks/src/server/App.block.js +++ b/fixtures/blocks/src/server/App.block.js @@ -7,7 +7,7 @@ /* eslint-disable import/first */ import * as React from 'react'; -import {block} from 'react'; +import {unstable_block as block} from 'react'; // Server diff --git a/fixtures/dom/src/__tests__/wrong-act-test.js b/fixtures/dom/src/__tests__/wrong-act-test.js index 38029be9b9ca..da574e337a83 100644 --- a/fixtures/dom/src/__tests__/wrong-act-test.js +++ b/fixtures/dom/src/__tests__/wrong-act-test.js @@ -179,7 +179,7 @@ it("doesn't warn if you use nested acts from different renderers", () => { if (__EXPERIMENTAL__) { it('warns when using createRoot() + .render', () => { - const root = ReactDOM.createRoot(document.createElement('div')); + const root = ReactDOM.unstable_createRoot(document.createElement('div')); expect(() => { TestRenderer.act(() => { root.render(); diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js index cca7a71dd603..23503b7c54e0 100644 --- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js +++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js @@ -366,121 +366,123 @@ describe('ReactHooksInspectionIntegration', () => { ]); }); - if (__EXPERIMENTAL__) { - it('should support composite useTransition hook', () => { - function Foo(props) { - React.useTransition(); - const memoizedValue = React.useMemo(() => 'hello', []); - return
{memoizedValue}
; - } - const renderer = ReactTestRenderer.create(); - const childFiber = renderer.root.findByType(Foo)._currentFiber(); - const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); - expect(tree).toEqual([ - { - id: 0, - isStateEditable: false, - name: 'Transition', - value: undefined, - subHooks: [], - }, - { - id: 1, - isStateEditable: false, - name: 'Memo', - value: 'hello', - subHooks: [], - }, - ]); - }); - - it('should support composite useDeferredValue hook', () => { - function Foo(props) { - React.useDeferredValue('abc', { - timeoutMs: 500, - }); - const [state] = React.useState(() => 'hello', []); - return
{state}
; - } - const renderer = ReactTestRenderer.create(); - const childFiber = renderer.root.findByType(Foo)._currentFiber(); - const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); - expect(tree).toEqual([ - { - id: 0, - isStateEditable: false, - name: 'DeferredValue', - value: 'abc', - subHooks: [], - }, - { - id: 1, - isStateEditable: true, - name: 'State', - value: 'hello', - subHooks: [], - }, - ]); - }); - - it('should support composite useOpaqueIdentifier hook', () => { - function Foo(props) { - const id = React.unstable_useOpaqueIdentifier(); - const [state] = React.useState(() => 'hello', []); - return
{state}
; - } - - const renderer = ReactTestRenderer.create(); - const childFiber = renderer.root.findByType(Foo)._currentFiber(); - const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); - - expect(tree.length).toEqual(2); - - expect(tree[0].id).toEqual(0); - expect(tree[0].isStateEditable).toEqual(false); - expect(tree[0].name).toEqual('OpaqueIdentifier'); - expect((tree[0].value + '').startsWith('c_')).toBe(true); + // @gate experimental + it('should support composite useTransition hook', () => { + function Foo(props) { + React.unstable_useTransition(); + const memoizedValue = React.useMemo(() => 'hello', []); + return
{memoizedValue}
; + } + const renderer = ReactTestRenderer.create(); + const childFiber = renderer.root.findByType(Foo)._currentFiber(); + const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); + expect(tree).toEqual([ + { + id: 0, + isStateEditable: false, + name: 'Transition', + value: undefined, + subHooks: [], + }, + { + id: 1, + isStateEditable: false, + name: 'Memo', + value: 'hello', + subHooks: [], + }, + ]); + }); - expect(tree[1]).toEqual({ + // @gate experimental + it('should support composite useDeferredValue hook', () => { + function Foo(props) { + React.unstable_useDeferredValue('abc', { + timeoutMs: 500, + }); + const [state] = React.useState(() => 'hello', []); + return
{state}
; + } + const renderer = ReactTestRenderer.create(); + const childFiber = renderer.root.findByType(Foo)._currentFiber(); + const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); + expect(tree).toEqual([ + { + id: 0, + isStateEditable: false, + name: 'DeferredValue', + value: 'abc', + subHooks: [], + }, + { id: 1, isStateEditable: true, name: 'State', value: 'hello', subHooks: [], - }); + }, + ]); + }); + + // @gate experimental + it('should support composite useOpaqueIdentifier hook', () => { + function Foo(props) { + const id = React.unstable_useOpaqueIdentifier(); + const [state] = React.useState(() => 'hello', []); + return
{state}
; + } + + const renderer = ReactTestRenderer.create(); + const childFiber = renderer.root.findByType(Foo)._currentFiber(); + const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); + + expect(tree.length).toEqual(2); + + expect(tree[0].id).toEqual(0); + expect(tree[0].isStateEditable).toEqual(false); + expect(tree[0].name).toEqual('OpaqueIdentifier'); + expect((tree[0].value + '').startsWith('c_')).toBe(true); + + expect(tree[1]).toEqual({ + id: 1, + isStateEditable: true, + name: 'State', + value: 'hello', + subHooks: [], }); + }); - it('should support composite useOpaqueIdentifier hook in concurrent mode', () => { - function Foo(props) { - const id = React.unstable_useOpaqueIdentifier(); - const [state] = React.useState(() => 'hello', []); - return
{state}
; - } + // @gate experimental + it('should support composite useOpaqueIdentifier hook in concurrent mode', () => { + function Foo(props) { + const id = React.unstable_useOpaqueIdentifier(); + const [state] = React.useState(() => 'hello', []); + return
{state}
; + } - const renderer = ReactTestRenderer.create(, { - unstable_isConcurrent: true, - }); - expect(Scheduler).toFlushWithoutYielding(); + const renderer = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + expect(Scheduler).toFlushWithoutYielding(); - const childFiber = renderer.root.findByType(Foo)._currentFiber(); - const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); + const childFiber = renderer.root.findByType(Foo)._currentFiber(); + const tree = ReactDebugTools.inspectHooksOfFiber(childFiber); - expect(tree.length).toEqual(2); + expect(tree.length).toEqual(2); - expect(tree[0].id).toEqual(0); - expect(tree[0].isStateEditable).toEqual(false); - expect(tree[0].name).toEqual('OpaqueIdentifier'); - expect((tree[0].value + '').startsWith('c_')).toBe(true); + expect(tree[0].id).toEqual(0); + expect(tree[0].isStateEditable).toEqual(false); + expect(tree[0].name).toEqual('OpaqueIdentifier'); + expect((tree[0].value + '').startsWith('c_')).toBe(true); - expect(tree[1]).toEqual({ - id: 1, - isStateEditable: true, - name: 'State', - value: 'hello', - subHooks: [], - }); + expect(tree[1]).toEqual({ + id: 1, + isStateEditable: true, + name: 'State', + value: 'hello', + subHooks: [], }); - } + }); describe('useDebugValue', () => { it('should support inspectable values for multiple custom hooks', () => { diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 201b73ffc9c4..8d713ed2f2cd 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -352,18 +352,18 @@ describe('Store', () => { }; const Wrapper = ({shouldSuspense}) => ( - + }> {shouldSuspense ? : } - + ); const container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); act(() => { root.render(); }); diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js index 360b78a3ad2e..1090e24a0f73 100644 --- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js +++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js @@ -63,7 +63,7 @@ describe('StoreStressConcurrent', () => { // 1. Render a normal version of [a, b, c, d, e]. let container = document.createElement('div'); // $FlowFixMe - let root = ReactDOM.createRoot(container); + let root = ReactDOM.unstable_createRoot(container); act(() => root.render({[a, b, c, d, e]})); expect(store).toMatchInlineSnapshot( ` @@ -147,7 +147,7 @@ describe('StoreStressConcurrent', () => { // Ensure fresh mount. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); // Verify mounting 'abcde'. act(() => root.render({cases[i]})); @@ -177,7 +177,7 @@ describe('StoreStressConcurrent', () => { // There'll be no unmounting until the very end. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); for (let i = 0; i < cases.length; i++) { // Verify mounting 'abcde'. act(() => root.render({cases[i]})); @@ -243,7 +243,7 @@ describe('StoreStressConcurrent', () => { const snapshots = []; let container = document.createElement('div'); // $FlowFixMe - let root = ReactDOM.createRoot(container); + let root = ReactDOM.unstable_createRoot(container); for (let i = 0; i < steps.length; i++) { act(() => root.render({steps[i]})); // We snapshot each step once so it doesn't regress. @@ -316,7 +316,7 @@ describe('StoreStressConcurrent', () => { for (let j = 0; j < steps.length; j++) { container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render({steps[i]})); expect(print(store)).toMatch(snapshots[i]); act(() => root.render({steps[j]})); @@ -333,7 +333,7 @@ describe('StoreStressConcurrent', () => { for (let j = 0; j < steps.length; j++) { container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( @@ -405,7 +405,7 @@ describe('StoreStressConcurrent', () => { const snapshots = []; let container = document.createElement('div'); // $FlowFixMe - let root = ReactDOM.createRoot(container); + let root = ReactDOM.unstable_createRoot(container); for (let i = 0; i < steps.length; i++) { act(() => root.render( @@ -532,7 +532,7 @@ describe('StoreStressConcurrent', () => { // Always start with a fresh container and steps[i]. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( @@ -578,7 +578,7 @@ describe('StoreStressConcurrent', () => { // Always start with a fresh container and steps[i]. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( @@ -636,7 +636,7 @@ describe('StoreStressConcurrent', () => { // Always start with a fresh container and steps[i]. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( @@ -686,7 +686,7 @@ describe('StoreStressConcurrent', () => { // Always start with a fresh container and steps[i]. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( @@ -740,7 +740,7 @@ describe('StoreStressConcurrent', () => { // Always start with a fresh container and steps[i]. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( @@ -894,7 +894,7 @@ describe('StoreStressConcurrent', () => { const snapshots = []; let container = document.createElement('div'); // $FlowFixMe - let root = ReactDOM.createRoot(container); + let root = ReactDOM.unstable_createRoot(container); for (let i = 0; i < steps.length; i++) { act(() => root.render( @@ -1051,7 +1051,7 @@ describe('StoreStressConcurrent', () => { // Always start with a fresh container and steps[i]. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( @@ -1103,7 +1103,7 @@ describe('StoreStressConcurrent', () => { // Always start with a fresh container and steps[i]. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( @@ -1170,7 +1170,7 @@ describe('StoreStressConcurrent', () => { // Always start with a fresh container and steps[i]. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( @@ -1222,7 +1222,7 @@ describe('StoreStressConcurrent', () => { // Always start with a fresh container and steps[i]. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( @@ -1274,7 +1274,7 @@ describe('StoreStressConcurrent', () => { // Always start with a fresh container and steps[i]. container = document.createElement('div'); // $FlowFixMe - root = ReactDOM.createRoot(container); + root = ReactDOM.unstable_createRoot(container); act(() => root.render( diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js index 1264badae76c..04c59dbc55b3 100644 --- a/packages/react-dom/index.classic.fb.js +++ b/packages/react-dom/index.classic.fb.js @@ -29,7 +29,9 @@ export { render, unmountComponentAtNode, createRoot, + createRoot as unstable_createRoot, createBlockingRoot, + createBlockingRoot as unstable_createBlockingRoot, unstable_flushControlled, unstable_scheduleHydration, unstable_renderSubtreeIntoContainer, diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js index 40676689ee28..dba70ca2b6c9 100644 --- a/packages/react-dom/index.experimental.js +++ b/packages/react-dom/index.experimental.js @@ -19,8 +19,8 @@ export { render, unmountComponentAtNode, // exposeConcurrentModeAPIs - createRoot, - createBlockingRoot, + createRoot as unstable_createRoot, + createBlockingRoot as unstable_createBlockingRoot, unstable_flushControlled, unstable_scheduleHydration, // Disabled behind disableUnstableRenderSubtreeIntoContainer diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js index 3714de11244f..2487bf5e4980 100644 --- a/packages/react-dom/index.js +++ b/packages/react-dom/index.js @@ -7,4 +7,24 @@ * @flow */ -export * from './src/client/ReactDOM'; +// Export all exports so that they're available in tests. +// We can't use export * from in Flow for some reason. +export { + createPortal, + unstable_batchedUpdates, + flushSync, + __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, + version, + findDOMNode, + hydrate, + render, + unmountComponentAtNode, + createRoot, + createRoot as unstable_createRoot, + createBlockingRoot, + createBlockingRoot as unstable_createBlockingRoot, + unstable_flushControlled, + unstable_scheduleHydration, + unstable_renderSubtreeIntoContainer, + unstable_createPortal, +} from './src/client/ReactDOM'; diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js index 258e12303ec1..ae9262a3801f 100644 --- a/packages/react-dom/index.modern.fb.js +++ b/packages/react-dom/index.modern.fb.js @@ -14,7 +14,9 @@ export { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, version, createRoot, + createRoot as unstable_createRoot, createBlockingRoot, + createBlockingRoot as unstable_createBlockingRoot, unstable_flushControlled, unstable_scheduleHydration, } from './src/client/ReactDOM'; diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js index c98fdabcbcf2..d6baddbe45c9 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js @@ -192,7 +192,7 @@ describe('ReactDOMFiberAsync', () => { ); } } - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); Scheduler.unstable_flushAll(); expect(asyncValueRef.current.textContent).toBe(''); @@ -213,7 +213,7 @@ describe('ReactDOMFiberAsync', () => { // @gate experimental it('top-level updates are concurrent', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); expect(container.textContent).toEqual(''); Scheduler.unstable_flushAll(); @@ -236,7 +236,7 @@ describe('ReactDOMFiberAsync', () => { } } - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); expect(container.textContent).toEqual(''); Scheduler.unstable_flushAll(); @@ -267,7 +267,7 @@ describe('ReactDOMFiberAsync', () => { } } - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); Scheduler.unstable_flushAll(); @@ -309,7 +309,7 @@ describe('ReactDOMFiberAsync', () => { return this.state.counter; } } - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); Scheduler.unstable_flushAll(); expect(container.textContent).toEqual('0'); @@ -423,7 +423,7 @@ describe('ReactDOMFiberAsync', () => { } } - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
); // Flush Scheduler.unstable_flushAll(); @@ -490,7 +490,7 @@ describe('ReactDOMFiberAsync', () => { } } - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); // Flush Scheduler.unstable_flushAll(); @@ -551,7 +551,7 @@ describe('ReactDOMFiberAsync', () => { } } - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); // Flush Scheduler.unstable_flushAll(); @@ -614,7 +614,7 @@ describe('ReactDOMFiberAsync', () => { describe('createBlockingRoot', () => { // @gate experimental it('updates flush without yielding in the next event', () => { - const root = ReactDOM.createBlockingRoot(container); + const root = ReactDOM.unstable_createBlockingRoot(container); function Text(props) { Scheduler.unstable_yieldValue(props.text); @@ -661,7 +661,7 @@ describe('ReactDOMFiberAsync', () => { return ; } - const oldRoot = ReactDOM.createRoot(container); + const oldRoot = ReactDOM.unstable_createRoot(container); act(() => { oldRoot.render(); }); @@ -673,7 +673,7 @@ describe('ReactDOMFiberAsync', () => { expect(container.textContent).toBe(''); // We can now render a new one. - const newRoot = ReactDOM.createRoot(container); + const newRoot = ReactDOM.unstable_createRoot(container); ReactDOM.flushSync(() => { newRoot.render(); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js index 1968bf4726b2..59ec9dd4f7a9 100644 --- a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js @@ -126,7 +126,7 @@ describe('ReactDOMHooks', () => { const inputRef = createRef(); const labelRef = createRef(); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); Scheduler.unstable_flushAll(); diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js index 29acb9ba1582..25a560c5c32a 100644 --- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js @@ -28,13 +28,13 @@ describe('ReactDOMRoot', () => { if (!__EXPERIMENTAL__) { it('createRoot is not exposed in stable build', () => { - expect(ReactDOM.createRoot).toBe(undefined); + expect(ReactDOM.unstable_createRoot).toBe(undefined); }); return; } it('renders children', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); Scheduler.unstable_flushAll(); expect(container.textContent).toEqual('Hi'); @@ -42,7 +42,7 @@ describe('ReactDOMRoot', () => { it('warns if a callback parameter is provided to render', () => { const callback = jest.fn(); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); expect(() => root.render(
Hi
, callback), ).toErrorDev( @@ -56,7 +56,7 @@ describe('ReactDOMRoot', () => { it('warns if a callback parameter is provided to unmount', () => { const callback = jest.fn(); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); expect(() => root.unmount(callback), @@ -70,7 +70,7 @@ describe('ReactDOMRoot', () => { }); it('unmounts children', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); Scheduler.unstable_flushAll(); expect(container.textContent).toEqual('Hi'); @@ -93,7 +93,7 @@ describe('ReactDOMRoot', () => { // Does not hydrate by default const container1 = document.createElement('div'); container1.innerHTML = markup; - const root1 = ReactDOM.createRoot(container1); + const root1 = ReactDOM.unstable_createRoot(container1); root1.render(
@@ -104,7 +104,7 @@ describe('ReactDOMRoot', () => { // Accepts `hydrate` option const container2 = document.createElement('div'); container2.innerHTML = markup; - const root2 = ReactDOM.createRoot(container2, {hydrate: true}); + const root2 = ReactDOM.unstable_createRoot(container2, {hydrate: true}); root2.render(
@@ -136,7 +136,7 @@ describe('ReactDOMRoot', () => { it('clears existing children', async () => { container.innerHTML = '
a
b
'; - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
c @@ -157,12 +157,12 @@ describe('ReactDOMRoot', () => { it('throws a good message on invalid containers', () => { expect(() => { - ReactDOM.createRoot(
Hi
); + ReactDOM.unstable_createRoot(
Hi
); }).toThrow('createRoot(...): Target container is not a DOM element.'); }); it('warns when rendering with legacy API into createRoot() container', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); Scheduler.unstable_flushAll(); expect(container.textContent).toEqual('Hi'); @@ -185,7 +185,7 @@ describe('ReactDOMRoot', () => { }); it('warns when hydrating with legacy API into createRoot() container', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); Scheduler.unstable_flushAll(); expect(container.textContent).toEqual('Hi'); @@ -205,7 +205,7 @@ describe('ReactDOMRoot', () => { }); it('warns when unmounting with legacy API (no previous content)', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); Scheduler.unstable_flushAll(); expect(container.textContent).toEqual('Hi'); @@ -234,7 +234,7 @@ describe('ReactDOMRoot', () => { // Currently createRoot().render() doesn't clear this. container.appendChild(document.createElement('div')); // The rest is the same as test above. - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); Scheduler.unstable_flushAll(); expect(container.textContent).toEqual('Hi'); @@ -260,7 +260,7 @@ describe('ReactDOMRoot', () => { it('warns when passing legacy container to createRoot()', () => { ReactDOM.render(
Hi
, container); expect(() => { - ReactDOM.createRoot(container); + ReactDOM.unstable_createRoot(container); }).toErrorDev( 'You are calling ReactDOM.createRoot() on a container that was previously ' + 'passed to ReactDOM.render(). This is not supported.', @@ -269,9 +269,9 @@ describe('ReactDOMRoot', () => { }); it('warns when creating two roots managing the same container', () => { - ReactDOM.createRoot(container); + ReactDOM.unstable_createRoot(container); expect(() => { - ReactDOM.createRoot(container); + ReactDOM.unstable_createRoot(container); }).toErrorDev( 'You are calling ReactDOM.createRoot() on a container that ' + 'has already been passed to createRoot() before. Instead, call ' + @@ -281,15 +281,15 @@ describe('ReactDOMRoot', () => { }); it('does not warn when creating second root after first one is unmounted', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.unmount(); Scheduler.unstable_flushAll(); - ReactDOM.createRoot(container); // No warning + ReactDOM.unstable_createRoot(container); // No warning }); it('warns if creating a root on the document.body', async () => { expect(() => { - ReactDOM.createRoot(document.body); + ReactDOM.unstable_createRoot(document.body); }).toErrorDev( 'createRoot(): Creating roots directly with document.body is ' + 'discouraged, since its children are often manipulated by third-party ' + @@ -301,7 +301,7 @@ describe('ReactDOMRoot', () => { }); it('warns if updating a root that has had its contents removed', async () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); Scheduler.unstable_flushAll(); container.innerHTML = ''; diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js index c087ec93765c..8c90d593a74a 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js @@ -1051,7 +1051,7 @@ describe('ReactDOMServerHooks', () => { document.body.append(container); container.innerHTML = ReactDOMServer.renderToString(); - const root = ReactDOM.createRoot(container, {hydrate: true}); + const root = ReactDOM.unstable_createRoot(container, {hydrate: true}); root.render(); Scheduler.unstable_flushAll(); jest.runAllTimers(); @@ -1136,7 +1136,7 @@ describe('ReactDOMServerHooks', () => { const container = document.createElement('div'); document.body.append(container); container.innerHTML = ReactDOMServer.renderToString(); - const root = ReactDOM.createRoot(container, {hydrate: true}); + const root = ReactDOM.unstable_createRoot(container, {hydrate: true}); ReactTestUtils.act(() => { root.render(); }); @@ -1196,7 +1196,7 @@ describe('ReactDOMServerHooks', () => { const container = document.createElement('div'); document.body.append(container); container.innerHTML = ReactDOMServer.renderToString(); - const root = ReactDOM.createRoot(container, {hydrate: true}); + const root = ReactDOM.unstable_createRoot(container, {hydrate: true}); ReactTestUtils.act(() => { root.render(); }); @@ -1291,7 +1291,7 @@ describe('ReactDOMServerHooks', () => { const childOneSpan = container.getElementsByTagName('span')[0]; - const root = ReactDOM.createRoot(container, {hydrate: true}); + const root = ReactDOM.unstable_createRoot(container, {hydrate: true}); root.render(); expect(Scheduler).toHaveYielded([]); @@ -1397,7 +1397,7 @@ describe('ReactDOMServerHooks', () => { container.innerHTML = ReactDOMServer.renderToString(); suspend = true; - const root = ReactDOM.createRoot(container, {hydrate: true}); + const root = ReactDOM.unstable_createRoot(container, {hydrate: true}); await ReactTestUtils.act(async () => { root.render(); }); @@ -1447,7 +1447,9 @@ describe('ReactDOMServerHooks', () => { // This is the wrong HTML string container.innerHTML = ''; - ReactDOM.createRoot(container, {hydrate: true}).render(); + ReactDOM.unstable_createRoot(container, {hydrate: true}).render( + , + ); expect(() => expect(() => Scheduler.unstable_flushAll()).toThrow(), ).toErrorDev([ @@ -1497,7 +1499,7 @@ describe('ReactDOMServerHooks', () => { container.innerHTML = ReactDOMServer.renderToString(); suspend = false; - const root = ReactDOM.createRoot(container, {hydrate: true}); + const root = ReactDOM.unstable_createRoot(container, {hydrate: true}); await ReactTestUtils.act(async () => { root.render(); }); @@ -1533,7 +1535,9 @@ describe('ReactDOMServerHooks', () => { // This is the wrong HTML string container.innerHTML = ''; - ReactDOM.createRoot(container, {hydrate: true}).render(); + ReactDOM.unstable_createRoot(container, {hydrate: true}).render( + , + ); expect(() => expect(() => Scheduler.unstable_flushAll()).toThrow(), ).toErrorDev([ @@ -1555,7 +1559,9 @@ describe('ReactDOMServerHooks', () => { // This is the wrong HTML string container.innerHTML = ''; - ReactDOM.createRoot(container, {hydrate: true}).render(); + ReactDOM.unstable_createRoot(container, {hydrate: true}).render( + , + ); expect(() => expect(() => Scheduler.unstable_flushAll()).toThrow( 'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' + @@ -1584,7 +1590,9 @@ describe('ReactDOMServerHooks', () => { // This is the wrong HTML string container.innerHTML = ''; - ReactDOM.createRoot(container, {hydrate: true}).render(); + ReactDOM.unstable_createRoot(container, {hydrate: true}).render( + , + ); expect(() => expect(() => Scheduler.unstable_flushAll()).toThrow( 'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' + @@ -1612,7 +1620,9 @@ describe('ReactDOMServerHooks', () => { document.body.appendChild(container); container.innerHTML = ReactDOMServer.renderToString(); - ReactDOM.createRoot(container, {hydrate: true}).render(); + ReactDOM.unstable_createRoot(container, {hydrate: true}).render( + , + ); expect(() => expect(() => Scheduler.unstable_flushAll()).toThrow( 'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' + @@ -1637,7 +1647,9 @@ describe('ReactDOMServerHooks', () => { document.body.appendChild(container); container.innerHTML = ReactDOMServer.renderToString(); - ReactDOM.createRoot(container, {hydrate: true}).render(); + ReactDOM.unstable_createRoot(container, {hydrate: true}).render( + , + ); expect(() => expect(() => Scheduler.unstable_flushAll()).toThrow( 'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' + @@ -1670,7 +1682,9 @@ describe('ReactDOMServerHooks', () => { container.innerHTML = ReactDOMServer.renderToString(); - ReactDOM.createRoot(container, {hydrate: true}).render(); + ReactDOM.unstable_createRoot(container, {hydrate: true}).render( + , + ); if (gate(flags => flags.new)) { expect(() => Scheduler.unstable_flushAll()).toErrorDev([ @@ -1712,7 +1726,9 @@ describe('ReactDOMServerHooks', () => { container.innerHTML = ReactDOMServer.renderToString(); - ReactDOM.createRoot(container, {hydrate: true}).render(); + ReactDOM.unstable_createRoot(container, {hydrate: true}).render( + , + ); if (gate(flags => flags.new)) { expect(() => Scheduler.unstable_flushAll()).toErrorDev([ @@ -1772,7 +1788,9 @@ describe('ReactDOMServerHooks', () => { .getAttribute('aria-labelledby'), ).toEqual(serverID); - ReactDOM.createRoot(container, {hydrate: true}).render(); + ReactDOM.unstable_createRoot(container, {hydrate: true}).render( + , + ); jest.runAllTimers(); expect(Scheduler).toHaveYielded([]); expect(Scheduler).toFlushAndYield([]); diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js index 770740e59102..0ad352648c3e 100644 --- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js +++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js @@ -496,7 +496,7 @@ describe('ReactDOMServerHydration', () => { const finalHTML = ReactDOMServer.renderToString(
); const container = document.createElement('div'); container.innerHTML = finalHTML; - const root = ReactDOM.createRoot(container, {hydrate: true}); + const root = ReactDOM.unstable_createRoot(container, {hydrate: true}); root.render(
); Scheduler.unstable_flushAll(); root.render(null); diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js index 0629a810fc90..8b72f084c367 100644 --- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js +++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js @@ -30,7 +30,7 @@ describe('ReactTestUtils.act()', () => { if (__EXPERIMENTAL__) { let concurrentRoot = null; const renderConcurrent = (el, dom) => { - concurrentRoot = ReactDOM.createRoot(dom); + concurrentRoot = ReactDOM.unstable_createRoot(dom); concurrentRoot.render(el); }; @@ -76,7 +76,7 @@ describe('ReactTestUtils.act()', () => { if (__EXPERIMENTAL__) { let blockingRoot = null; const renderBatched = (el, dom) => { - blockingRoot = ReactDOM.createBlockingRoot(dom); + blockingRoot = ReactDOM.unstable_createBlockingRoot(dom); blockingRoot.render(el); }; @@ -127,7 +127,9 @@ describe('ReactTestUtils.act()', () => { // @gate experimental it('warns in blocking mode', () => { expect(() => { - const root = ReactDOM.createBlockingRoot(document.createElement('div')); + const root = ReactDOM.unstable_createBlockingRoot( + document.createElement('div'), + ); root.render(); Scheduler.unstable_flushAll(); }).toErrorDev([ @@ -138,7 +140,9 @@ describe('ReactTestUtils.act()', () => { // @gate experimental it('warns in concurrent mode', () => { expect(() => { - const root = ReactDOM.createRoot(document.createElement('div')); + const root = ReactDOM.unstable_createRoot( + document.createElement('div'), + ); root.render(); Scheduler.unstable_flushAll(); }).toErrorDev([ diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js index dc59341312d6..57fc7fdcdc40 100644 --- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js +++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js @@ -30,7 +30,7 @@ it('does not warn when rendering in legacy mode', () => { // @gate experimental it('should warn when rendering in concurrent mode', () => { expect(() => { - ReactDOM.createRoot(document.createElement('div')).render(); + ReactDOM.unstable_createRoot(document.createElement('div')).render(); }).toErrorDev( 'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' + 'to guarantee consistent behaviour across tests and browsers.', @@ -38,14 +38,16 @@ it('should warn when rendering in concurrent mode', () => { ); // does not warn twice expect(() => { - ReactDOM.createRoot(document.createElement('div')).render(); + ReactDOM.unstable_createRoot(document.createElement('div')).render(); }).toErrorDev([]); }); // @gate experimental it('should warn when rendering in blocking mode', () => { expect(() => { - ReactDOM.createBlockingRoot(document.createElement('div')).render(); + ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render( + , + ); }).toErrorDev( 'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' + 'to guarantee consistent behaviour across tests and browsers.', @@ -53,6 +55,8 @@ it('should warn when rendering in blocking mode', () => { ); // does not warn twice expect(() => { - ReactDOM.createBlockingRoot(document.createElement('div')).render(); + ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render( + , + ); }).toErrorDev([]); }); diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js index 9fc50d0f34b4..7b4af4f928ab 100644 --- a/packages/react-dom/src/__tests__/ReactUpdates-test.js +++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js @@ -1319,7 +1319,7 @@ describe('ReactUpdates', () => { ); } - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); let hiddenDiv; act(() => { root.render(); diff --git a/packages/react-dom/src/events/plugins/__tests__/LegacyChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/LegacyChangeEventPlugin-test.js index c83cfc454897..5c81747996b1 100644 --- a/packages/react-dom/src/events/plugins/__tests__/LegacyChangeEventPlugin-test.js +++ b/packages/react-dom/src/events/plugins/__tests__/LegacyChangeEventPlugin-test.js @@ -479,7 +479,7 @@ describe('ChangeEventPlugin', () => { // @gate experimental it('text input', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); let input; class ControlledInput extends React.Component { @@ -522,7 +522,7 @@ describe('ChangeEventPlugin', () => { // @gate experimental it('checkbox input', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); let input; class ControlledInput extends React.Component { @@ -578,7 +578,7 @@ describe('ChangeEventPlugin', () => { // @gate experimental it('textarea', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); let textarea; class ControlledTextarea extends React.Component { @@ -621,7 +621,7 @@ describe('ChangeEventPlugin', () => { // @gate experimental it('parent of input', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); let input; class ControlledInput extends React.Component { @@ -668,7 +668,7 @@ describe('ChangeEventPlugin', () => { // @gate experimental it('is async for non-input events', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); let input; class ControlledInput extends React.Component { @@ -728,7 +728,7 @@ describe('ChangeEventPlugin', () => { const {act} = TestUtils; const {useState} = React; - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); const target = React.createRef(null); function Foo() { diff --git a/packages/react-dom/src/events/plugins/__tests__/LegacySimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/LegacySimpleEventPlugin-test.js index f01568970325..bcf5e12e0986 100644 --- a/packages/react-dom/src/events/plugins/__tests__/LegacySimpleEventPlugin-test.js +++ b/packages/react-dom/src/events/plugins/__tests__/LegacySimpleEventPlugin-test.js @@ -239,7 +239,7 @@ describe('SimpleEventPlugin', function() { // @gate experimental it('flushes pending interactive work before extracting event handler', () => { container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); document.body.appendChild(container); let button; @@ -310,7 +310,7 @@ describe('SimpleEventPlugin', function() { // @gate experimental it('end result of many interactive updates is deterministic', () => { container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); document.body.appendChild(container); let button; @@ -409,7 +409,7 @@ describe('SimpleEventPlugin', function() { } // Initial mount - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); expect(Scheduler).toFlushAndYield([ 'High-pri count: 0, Low-pri count: 0', diff --git a/packages/react-reconciler/src/__tests__/ReactBlocks-test.js b/packages/react-reconciler/src/__tests__/ReactBlocks-test.js index 56be93864958..06662e63f3eb 100644 --- a/packages/react-reconciler/src/__tests__/ReactBlocks-test.js +++ b/packages/react-reconciler/src/__tests__/ReactBlocks-test.js @@ -24,7 +24,7 @@ describe('ReactBlocks', () => { React = require('react'); ReactNoop = require('react-noop-renderer'); - block = React.block; + block = React.unstable_block; useState = React.useState; Suspense = React.Suspense; const cache = new Map(); diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js index 5dff2fde2c05..5e34e346466f 100644 --- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js +++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js @@ -63,8 +63,8 @@ describe('ReactHooksWithNoopRenderer', () => { useImperativeHandle = React.useImperativeHandle; forwardRef = React.forwardRef; memo = React.memo; - useTransition = React.useTransition; - useDeferredValue = React.useDeferredValue; + useTransition = React.unstable_useTransition; + useDeferredValue = React.unstable_useDeferredValue; Suspense = React.Suspense; act = ReactNoop.act; diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js index 19cea8e172c9..4df09b53707e 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js @@ -12,7 +12,7 @@ describe('ReactSuspenseList', () => { ReactNoop = require('react-noop-renderer'); Scheduler = require('scheduler'); Suspense = React.Suspense; - SuspenseList = React.SuspenseList; + SuspenseList = React.unstable_SuspenseList; }); function Text(props) { diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js index bf1f1a696ea2..f27ec62ff84e 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js @@ -2737,7 +2737,9 @@ describe('ReactSuspenseWithNoopRenderer', () => { function App() { const [page, setPage] = React.useState('A'); - const [startLoading, isLoading] = React.useTransition(SUSPENSE_CONFIG); + const [startLoading, isLoading] = React.unstable_useTransition( + SUSPENSE_CONFIG, + ); transitionToPage = nextPage => startLoading(() => setPage(nextPage)); return ( @@ -3718,7 +3720,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { // @gate experimental it('regression: ping at high priority causes update to be dropped', async () => { - const {useState, useTransition} = React; + const {useState, unstable_useTransition: useTransition} = React; let setTextA; function A() { @@ -3836,10 +3838,10 @@ describe('ReactSuspenseWithNoopRenderer', () => { let setTextWithLongTransition; function App() { - const [startShortTransition, isPending1] = React.useTransition({ + const [startShortTransition, isPending1] = React.unstable_useTransition({ timeoutMs: 5000, }); - const [startLongTransition, isPending2] = React.useTransition({ + const [startLongTransition, isPending2] = React.unstable_useTransition({ timeoutMs: 30000, }); const isPending = isPending1 || isPending2; diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js index 3970fcaaf2f3..1b25cf7dd187 100644 --- a/packages/react-reconciler/src/__tests__/ReactTransition-test.js +++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js @@ -25,7 +25,7 @@ describe('ReactTransition', () => { ReactNoop = require('react-noop-renderer'); Scheduler = require('scheduler'); useState = React.useState; - useTransition = React.useTransition; + useTransition = React.unstable_useTransition; Suspense = React.Suspense; act = ReactNoop.act; }); diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js index 268bf4d11126..e24ec52c9240 100644 --- a/packages/react-refresh/src/__tests__/ReactFresh-test.js +++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js @@ -2424,7 +2424,7 @@ describe('ReactFresh', () => { }; }); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); expect(Scheduler).toFlushAndYieldThrough(['App#layout']); const el = container.firstChild; diff --git a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js index 46f424409c88..72aa615260f2 100644 --- a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js +++ b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js @@ -183,7 +183,7 @@ describe('ReactFlightDOM', () => { const response = ReactTransportDOMClient.createFromReadableStream(readable); const container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); await act(async () => { root.render(); }); @@ -222,7 +222,7 @@ describe('ReactFlightDOM', () => { const response = ReactTransportDOMClient.createFromReadableStream(readable); const container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); await act(async () => { root.render(); }); @@ -259,7 +259,7 @@ describe('ReactFlightDOM', () => { const response = ReactTransportDOMClient.createFromReadableStream(readable); const container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); await act(async () => { root.render(); }); @@ -418,7 +418,7 @@ describe('ReactFlightDOM', () => { const response = ReactTransportDOMClient.createFromReadableStream(readable); const container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); await act(async () => { root.render(); }); diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js index 9c94c49fb21c..96f4791d4ff6 100644 --- a/packages/react/index.classic.fb.js +++ b/packages/react/index.classic.fb.js @@ -40,11 +40,15 @@ export { createFactory, // exposeConcurrentModeAPIs useTransition, + useTransition as unstable_useTransition, useDeferredValue, + useDeferredValue as unstable_useDeferredValue, SuspenseList, + SuspenseList as unstable_SuspenseList, unstable_withSuspenseConfig, // enableBlocksAPI block, + block as unstable_block, // enableDeprecatedFlareAPI DEPRECATED_useResponder, DEPRECATED_createResponder, diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js index c2cb40a81574..47f8a1b0e6bc 100644 --- a/packages/react/index.experimental.js +++ b/packages/react/index.experimental.js @@ -39,12 +39,12 @@ export { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, createFactory, // exposeConcurrentModeAPIs - useTransition, - useDeferredValue, - SuspenseList, + useTransition as unstable_useTransition, + useDeferredValue as unstable_useDeferredValue, + SuspenseList as unstable_SuspenseList, unstable_withSuspenseConfig, // enableBlocksAPI - block, + block as unstable_block, unstable_useOpaqueIdentifier, // enableDebugTracing unstable_DebugTracingMode, diff --git a/packages/react/index.js b/packages/react/index.js index d3fa1b145ff4..4cd2d761fb6a 100644 --- a/packages/react/index.js +++ b/packages/react/index.js @@ -69,10 +69,14 @@ export { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, createFactory, useTransition, + useTransition as unstable_useTransition, useDeferredValue, + useDeferredValue as unstable_useDeferredValue, SuspenseList, + SuspenseList as unstable_SuspenseList, unstable_withSuspenseConfig, block, + block as unstable_block, DEPRECATED_useResponder, DEPRECATED_createResponder, unstable_createFundamental, diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js index a162ef330662..b039b25ef436 100644 --- a/packages/react/index.modern.fb.js +++ b/packages/react/index.modern.fb.js @@ -39,11 +39,15 @@ export { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, // exposeConcurrentModeAPIs useTransition, + useTransition as unstable_useTransition, useDeferredValue, + useDeferredValue as unstable_useDeferredValue, SuspenseList, + SuspenseList as unstable_SuspenseList, unstable_withSuspenseConfig, // enableBlocksAPI block, + block as unstable_block, // enableDeprecatedFlareAPI DEPRECATED_useResponder, DEPRECATED_createResponder, diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js index a9eecf61277c..55e473f2b60f 100644 --- a/packages/react/src/__tests__/ReactStrictMode-test.js +++ b/packages/react/src/__tests__/ReactStrictMode-test.js @@ -398,7 +398,7 @@ describe('Concurrent Mode', () => { } const container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); expect(() => Scheduler.unstable_flushAll()).toErrorDev( [ @@ -454,7 +454,7 @@ Please update the following components: AsyncRoot`, } const container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); expect(() => { @@ -533,7 +533,7 @@ Please update the following components: Parent`, } const container = document.createElement('div'); - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); expect(() => Scheduler.unstable_flushAll(),