diff --git a/types/react/next.d.ts b/types/react/next.d.ts index c66cdc38a04b6d..ad78fe3212656e 100644 --- a/types/react/next.d.ts +++ b/types/react/next.d.ts @@ -70,6 +70,15 @@ declare module '.' { */ export function useDeferredValue(value: T): T; + export interface useTransitionConfig { + /** + * This timeout (in milliseconds) tells React how long to wait before showing the next state + * + * @see https://reactjs.org/docs/concurrent-mode-reference.html#usetransition + */ + timeoutMs?: number | undefined; + } + /** * Allows components to avoid undesirable loading states by waiting for content to load * before transitioning to the next screen. It also allows components to defer slower, @@ -87,7 +96,7 @@ declare module '.' { * * @see https://reactjs.org/docs/concurrent-mode-reference.html#usetransition */ - export function useTransition(): [boolean, TransitionStartFunction]; + export function useTransition(config?: useTransitionConfig): [boolean, TransitionStartFunction]; /** * Similar to `useTransition` but allows uses where hooks are not available. diff --git a/types/react/test/next.tsx b/types/react/test/next.tsx index 8e366af1004f63..3600f33d1713f0 100644 --- a/types/react/test/next.tsx +++ b/types/react/test/next.tsx @@ -29,7 +29,9 @@ const subscribe: React.MutableSourceSubscribe = (window, callback) => { function useExperimentalHooks() { const [toggle, setToggle] = React.useState(false); - const [done, startTransition] = React.useTransition(); + React.useTransition(); + React.useTransition({}); + const [done, startTransition] = React.useTransition({ timeoutMs: 1000 }); // $ExpectType boolean done;