diff --git a/types/react-dom/experimental.d.ts b/types/react-dom/experimental.d.ts index ad38ceae6075733..b1a69359bf12889 100644 --- a/types/react-dom/experimental.d.ts +++ b/types/react-dom/experimental.d.ts @@ -64,7 +64,7 @@ declare module '.' { * @see https://reactjs.org/docs/concurrent-mode-adoption.html#migration-step-blocking-mode * @see https://reactjs.org/docs/concurrent-mode-reference.html#createblockingroot */ - function createBlockingRoot( + function unstable_createBlockingRoot( container: Element | Document | DocumentFragment | Comment, options?: RootOptions, ): Root; @@ -74,7 +74,7 @@ declare module '.' { * * @see https://reactjs.org/docs/concurrent-mode-reference.html#createroot */ - function createRoot(container: Element | Document | DocumentFragment | Comment, options?: RootOptions): Root; + function unstable_createRoot(container: Element | Document | DocumentFragment | Comment, options?: RootOptions): Root; function unstable_discreteUpdates(callback: () => R): R; diff --git a/types/react-dom/test/experimental-tests.tsx b/types/react-dom/test/experimental-tests.tsx index 0f8ddd63f5717bc..11765a6c4d23fd7 100644 --- a/types/react-dom/test/experimental-tests.tsx +++ b/types/react-dom/test/experimental-tests.tsx @@ -3,7 +3,7 @@ import ReactDOM = require('react-dom'); import 'react-dom/experimental'; function createRoot() { - const root = ReactDOM.createRoot(document); + const root = ReactDOM.unstable_createRoot(document); // NOTE: I don't know yet how to use this; this is just the type it expects // in reality it will do nothing because the root isn't hydrate: true @@ -15,7 +15,7 @@ function createRoot() { } function createBlockingRoot() { - const root = ReactDOM.createBlockingRoot(document, { + const root = ReactDOM.unstable_createBlockingRoot(document, { hydrate: true, }); diff --git a/types/react/experimental.d.ts b/types/react/experimental.d.ts index 9445889d0086e0e..74b9bc786bd895f 100644 --- a/types/react/experimental.d.ts +++ b/types/react/experimental.d.ts @@ -92,7 +92,7 @@ declare module '.' { * @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist * @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist */ - export const SuspenseList: ExoticComponent; + export const unstable_SuspenseList: ExoticComponent; export interface SuspenseConfig extends TimeoutConfig { busyDelayMs?: number; @@ -143,7 +143,7 @@ declare module '.' { * * @see https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue */ - export function useDeferredValue(value: T, config?: TimeoutConfig | null): T; + export function unstable_useDeferredValue(value: T, config?: TimeoutConfig | null): T; /** * Allows components to avoid undesirable loading states by waiting for content to load @@ -162,5 +162,5 @@ declare module '.' { * * @see https://reactjs.org/docs/concurrent-mode-reference.html#usetransition */ - export function useTransition(config?: SuspenseConfig | null): [TransitionStartFunction, boolean]; + export function unstable_useTransition(config?: SuspenseConfig | null): [TransitionStartFunction, boolean]; } diff --git a/types/react/test/experimental.tsx b/types/react/test/experimental.tsx index 9457a55cb05d671..374169be1719554 100644 --- a/types/react/test/experimental.tsx +++ b/types/react/test/experimental.tsx @@ -5,26 +5,26 @@ import React = require('react'); function useExperimentalHooks() { const [toggle, setToggle] = React.useState(false); - const [startTransition, done] = React.useTransition({ busyMinDurationMs: 100, busyDelayMs: 200, timeoutMs: 300 }); + const [startTransition, done] = React.unstable_useTransition({ busyMinDurationMs: 100, busyDelayMs: 200, timeoutMs: 300 }); // $ExpectType boolean done; // $ExpectType boolean - const deferredToggle = React.useDeferredValue(toggle, { timeoutMs: 500 }); + const deferredToggle = React.unstable_useDeferredValue(toggle, { timeoutMs: 500 }); const [func] = React.useState(() => () => 0); // $ExpectType () => number func; // $ExpectType () => number - const deferredFunc = React.useDeferredValue(func); + const deferredFunc = React.unstable_useDeferredValue(func); class Constructor {} // $ExpectType typeof Constructor - const deferredConstructor = React.useDeferredValue(Constructor); + const deferredConstructor = React.unstable_useDeferredValue(Constructor); // $ExpectType () => string - const deferredConstructible = React.useDeferredValue(Constructible); + const deferredConstructible = React.unstable_useDeferredValue(Constructible); return () => { startTransition(() => {