fix(react,react-dom)!: add unstable prefix to experimental APIs (#44564)

* [react] Add unstable prefix to experimental APIs * [react-dom] Add unstable prefix to experimental APIs
DefinitelyTyped · May 11, 2020 · 7ec0183 · 7ec0183
1 parent 4ba5d8d
commit 7ec0183
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git 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<R>(callback: () => R): R;
 

diff --git 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
@@ -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<SuspenseListProps>;
+    export const unstable_SuspenseList: ExoticComponent<SuspenseListProps>;
 
     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<T>(value: T, config?: TimeoutConfig | null): T;
+    export function unstable_useDeferredValue<T>(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
@@ -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(() => {