react(-dom): Update experimental typings (#49152)

* react: Remove timeoutMS

* react: Add unstable_startTransition

* Fix new lint rules

* Add unstable_expectedLoadTime

* react-dom: Remove unstable_discreteUpdates and unstable_flushDiscreteUpdates

types/react-dom/experimental.d.ts

@@ -76,21 +76,6 @@ declare module '.' {
      */
     function unstable_createRoot(container: Element | Document | DocumentFragment | Comment, options?: RootOptions): Root;
 
-    function unstable_discreteUpdates<R>(callback: () => R): R;
-
-    function unstable_discreteUpdates<R, A1>(callback: (a1: A1) => R, a1: A1): R;
-
-    function unstable_discreteUpdates<R, A1, A2>(callback: (a1: A1, a2: A2) => R, a1: A1, a2: A2): R;
-
-    function unstable_discreteUpdates<R, A1, A2, A3>(
-        callback: (a1: A1, a2: A2, a3: A3) => R,
-        a1: A1,
-        a2: A2,
-        a3: A3,
-    ): R;
-
-    function unstable_flushDiscreteUpdates(): void;
-
     function unstable_flushControlled(callback: () => void): void;
 
     // enableSelectiveHydration feature

types/react-dom/test/experimental-tests.tsx

@@ -25,14 +25,5 @@ function createBlockingRoot() {
 }
 
 function updates() {
-    // $ExpectType 0
-    ReactDOM.unstable_discreteUpdates((): 0 => 0);
-    // $ExpectType number
-    ReactDOM.unstable_discreteUpdates((foo: number) => foo, 1);
-    // $ExpectError
-    ReactDOM.unstable_discreteUpdates((foo: number) => foo);
-
-    ReactDOM.unstable_flushDiscreteUpdates();
-
     ReactDOM.unstable_flushControlled(() => {});
 }

types/react/experimental.d.ts

@@ -39,6 +39,15 @@ import React = require('.');
 export {};
 
 declare module '.' {
+    export interface SuspenseProps {
+        /**
+         * The presence of this prop indicates that the content is computationally expensive to render.
+         * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).
+         * @see {@link https://github.com/facebook/react/pull/19936}
+         */
+        unstable_expectedLoadTime?: number;
+    }
+
     export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';
     export type SuspenseListTailMode = 'collapsed' | 'hidden';
 
@@ -94,7 +103,7 @@ declare module '.' {
      */
     export const unstable_SuspenseList: ExoticComponent<SuspenseListProps>;
 
-    export interface SuspenseConfig extends TimeoutConfig {
+    export interface SuspenseConfig {
         busyDelayMs?: number;
         busyMinDurationMs?: number;
     }
@@ -105,17 +114,6 @@ declare module '.' {
         config: SuspenseConfig | null | undefined,
     ): void;
 
-    export interface TimeoutConfig {
-        /**
-         * This timeout (in milliseconds) tells React how long to wait before showing the next state.
-         *
-         * React will always try to use a shorter lag when network and device allows it.
-         *
-         * **NOTE: We recommend that you share Suspense Config between different modules.**
-         */
-        timeoutMs: number;
-    }
-
     // must be synchronous
     export type TransitionFunction = () => void | undefined;
     // strange definition to allow vscode to show documentation on the invocation
@@ -139,11 +137,10 @@ declare module '.' {
      * A good example of this is a text input.
      *
      * @param value The value that is going to be deferred
-     * @param config An optional object with `timeoutMs`
      *
      * @see https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue
      */
-    export function unstable_useDeferredValue<T>(value: T, config?: TimeoutConfig | null): T;
+    export function unstable_useDeferredValue<T>(value: T): T;
 
     /**
      * Allows components to avoid undesirable loading states by waiting for content to load
@@ -164,9 +161,6 @@ declare module '.' {
      */
     export function unstable_useTransition(config?: SuspenseConfig | null): [TransitionStartFunction, boolean];
 
-    /**
-     * @private
-     */
     const opaqueIdentifierBranding: unique symbol;
     /**
      * WARNING: Don't use this as a `string`.
@@ -185,4 +179,11 @@ declare module '.' {
     };
 
     export function unstable_useOpaqueIdentifier(): OpaqueIdentifier;
+
+    /**
+     * Similar to `useTransition` but allows uses where hooks are not available.
+     *
+     * @param callback A _synchronous_ function which causes state updates that can be deferred.
+     */
+    export function unstable_startTransition(scope: TransitionFunction): void;
 }

types/react/test/experimental.tsx

@@ -8,13 +8,12 @@ function useExperimentalHooks() {
     const [startTransition, done] = React.unstable_useTransition({
         busyMinDurationMs: 100,
         busyDelayMs: 200,
-        timeoutMs: 300,
     });
     // $ExpectType boolean
     done;
 
     // $ExpectType boolean
-    const deferredToggle = React.unstable_useDeferredValue(toggle, { timeoutMs: 500 });
+    const deferredToggle = React.unstable_useDeferredValue(toggle);
 
     const [func] = React.useState(() => () => 0);
 
@@ -69,3 +68,28 @@ function InvalidOpaqueIdentifierUsage() {
 
     return null;
 }
+
+function startTransitionTest() {
+    function transitionToPage(page: string) {}
+
+    React.unstable_startTransition(() => {
+        transitionToPage('/');
+    });
+
+    // $ExpectError
+    React.unstable_startTransition(async () => {});
+}
+
+function suspenseTest() {
+    function DisplayData() {
+        return null;
+    }
+
+    function FlameChart() {
+        return (
+            <React.Suspense fallback="computing..." unstable_expectedLoadTime={2000}>
+                <DisplayData />
+            </React.Suspense>
+        );
+    }
+}