From 26c358ea9a49855130d94d249d1c7230cd6dacec Mon Sep 17 00:00:00 2001 From: Sean Corrales Date: Mon, 24 Jan 2022 16:50:56 -0600 Subject: [PATCH 1/4] Add typing for useTransition config --- types/react/next.d.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/types/react/next.d.ts b/types/react/next.d.ts index c66cdc38a04b6d..800e7eb9582dbc 100644 --- a/types/react/next.d.ts +++ b/types/react/next.d.ts @@ -70,6 +70,13 @@ 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 + */ + 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 +94,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. From cbad46d4296f28aa07aa3654307e31d3b50292cd Mon Sep 17 00:00:00 2001 From: Sean Corrales Date: Mon, 24 Jan 2022 17:10:54 -0600 Subject: [PATCH 2/4] Update tests --- types/react/test/next.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/types/react/test/next.tsx b/types/react/test/next.tsx index 8e366af1004f63..ba321a59a53ef7 100644 --- a/types/react/test/next.tsx +++ b/types/react/test/next.tsx @@ -33,6 +33,8 @@ function useExperimentalHooks() { // $ExpectType boolean done; + React.useTransition({ timeoutMs: 1000 }); + // $ExpectType boolean const deferredToggle = React.useDeferredValue(toggle); From 36a006f743b9c61d7a31a006b67c7062edfbfb95 Mon Sep 17 00:00:00 2001 From: Sean Corrales Date: Mon, 24 Jan 2022 17:16:39 -0600 Subject: [PATCH 3/4] Another test update --- types/react/test/next.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/react/test/next.tsx b/types/react/test/next.tsx index ba321a59a53ef7..3600f33d1713f0 100644 --- a/types/react/test/next.tsx +++ b/types/react/test/next.tsx @@ -29,12 +29,12 @@ 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; - React.useTransition({ timeoutMs: 1000 }); - // $ExpectType boolean const deferredToggle = React.useDeferredValue(toggle); From 79206fb721bd03f987e0d7c36a8cb2856ed18432 Mon Sep 17 00:00:00 2001 From: Sean Corrales Date: Mon, 24 Jan 2022 17:29:08 -0600 Subject: [PATCH 4/4] Updating comment --- types/react/next.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/types/react/next.d.ts b/types/react/next.d.ts index 800e7eb9582dbc..ad78fe3212656e 100644 --- a/types/react/next.d.ts +++ b/types/react/next.d.ts @@ -73,6 +73,8 @@ declare module '.' { 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; }