{"parents":["0b61e26983c20b0a4facb50857133cde4a28555f"],"files":[{"path":"packages\/react-debug-tools\/src\/ReactDebugHooks.js","status":"M"},{"path":"packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHooks.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js","status":"M"},{"path":"packages\/react-test-renderer\/src\/ReactShallowRenderer.js","status":"M"},{"path":"packages\/react\/src\/React.js","status":"M"},{"path":"packages\/react\/src\/ReactHooks.js","status":"M"}],"commit":{"authorName":"Luna Ruan","revision":"685ed561f22ea062281a4c570c7067e6020457c4","authorEmail":"lunaris.ruan@gmail.com","authoredAt":"2019-10-18T12:48:43-07:00","subject":"Migrate useDeferredValue and useTransition (#17058)","shortRevision":"685ed561f2"},"body":"Migrated useDeferredValue and useTransition from Facebook's www repo into ReactFiberHooks.","patch":"diff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex 994745b8a7..07e94cd720 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -14,8 +14,9 @@ import type {\n ReactEventResponderListener,\n } from 'shared\/ReactTypes';\n import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n-import type {Hook} from 'react-reconciler\/src\/ReactFiberHooks';\n+import type {Hook, TimeoutConfig} from 'react-reconciler\/src\/ReactFiberHooks';\n import type {Dispatcher as DispatcherType} from 'react-reconciler\/src\/ReactFiberHooks';\n+import type {SuspenseConfig} from 'react-reconciler\/src\/ReactFiberSuspenseConfig';\n \n import ErrorStackParser from 'error-stack-parser';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n@@ -236,6 +237,28 @@ function useResponder(\n };\n }\n \n+function useTransition(\n+ config: SuspenseConfig | null | void,\n+): [(() => void) => void, boolean] {\n+ nextHook();\n+ hookLog.push({\n+ primitive: 'Transition',\n+ stackError: new Error(),\n+ value: config,\n+ });\n+ return [callback => {}, false];\n+}\n+\n+function useDeferredValue(value: T, config: TimeoutConfig | null | void): T {\n+ nextHook();\n+ hookLog.push({\n+ primitive: 'DeferredValue',\n+ stackError: new Error(),\n+ value,\n+ });\n+ return value;\n+}\n+\n const Dispatcher: DispatcherType = {\n readContext,\n useCallback,\n@@ -249,6 +272,8 @@ const Dispatcher: DispatcherType = {\n useRef,\n useState,\n useResponder,\n+ useTransition,\n+ useDeferredValue,\n };\n \n \/\/ Inspect\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js b\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\nindex dbe2c4f781..d054caf530 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\n@@ -7,13 +7,16 @@\n * @flow\n *\/\n \n-import type {Dispatcher as DispatcherType} from 'react-reconciler\/src\/ReactFiberHooks';\n+import type {\n+ Dispatcher as DispatcherType,\n+ TimeoutConfig,\n+} from 'react-reconciler\/src\/ReactFiberHooks';\n import type {ThreadID} from '.\/ReactThreadIDAllocator';\n import type {\n ReactContext,\n ReactEventResponderListener,\n } from 'shared\/ReactTypes';\n-\n+import type {SuspenseConfig} from 'react-reconciler\/src\/ReactFiberSuspenseConfig';\n import {validateContextBounds} from '.\/ReactPartialRendererContext';\n \n import invariant from 'shared\/invariant';\n@@ -457,6 +460,21 @@ function useResponder(responder, props): ReactEventResponderListener {\n };\n }\n \n+function useDeferredValue(value: T, config: TimeoutConfig | null | void): T {\n+ resolveCurrentlyRenderingComponent();\n+ return value;\n+}\n+\n+function useTransition(\n+ config: SuspenseConfig | null | void,\n+): [(callback: () => void) => void, boolean] {\n+ resolveCurrentlyRenderingComponent();\n+ const startTransition = callback => {\n+ callback();\n+ };\n+ return [startTransition, false];\n+}\n+\n function noop(): void {}\n \n export let currentThreadID: ThreadID = 0;\n@@ -481,4 +499,6 @@ export const Dispatcher: DispatcherType = {\n \/\/ Debugging effect\n useDebugValue: noop,\n useResponder,\n+ useDeferredValue,\n+ useTransition,\n };\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\nindex 3f0552ba30..707a65ebef 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n@@ -19,6 +19,7 @@ import type {HookEffectTag} from '.\/ReactHookEffectTags';\n import type {SuspenseConfig} from '.\/ReactFiberSuspenseConfig';\n import type {ReactPriorityLevel} from '.\/SchedulerWithReactIntegration';\n \n+import * as Scheduler from 'scheduler';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n \n import {NoWork} from '.\/ReactFiberExpirationTime';\n@@ -54,7 +55,7 @@ import {markWorkInProgressReceivedUpdate} from '.\/ReactFiberBeginWork';\n import {requestCurrentSuspenseConfig} from '.\/ReactFiberSuspenseConfig';\n import {getCurrentPriorityLevel} from '.\/SchedulerWithReactIntegration';\n \n-const {ReactCurrentDispatcher} = ReactSharedInternals;\n+const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;\n \n export type Dispatcher = {\n readContext(\n@@ -92,6 +93,10 @@ export type Dispatcher = {\n responder: ReactEventResponder,\n props: Object,\n ): ReactEventResponderListener,\n+ useDeferredValue(value: T, config: TimeoutConfig | void | null): T,\n+ useTransition(\n+ config: SuspenseConfig | void | null,\n+ ): [(() => void) => void, boolean],\n };\n \n type Update = {\n@@ -123,7 +128,9 @@ export type HookType =\n | 'useMemo'\n | 'useImperativeHandle'\n | 'useDebugValue'\n- | 'useResponder';\n+ | 'useResponder'\n+ | 'useDeferredValue'\n+ | 'useTransition';\n \n let didWarnAboutMismatchedHooksForComponent;\n if (__DEV__) {\n@@ -152,6 +159,10 @@ export type FunctionComponentUpdateQueue = {\n lastEffect: Effect | null,\n };\n \n+export type TimeoutConfig = {|\n+ timeoutMs: number,\n+|};\n+\n type BasicStateAction = (S => S) | S;\n \n type Dispatch = A => void;\n@@ -1117,6 +1128,96 @@ function updateMemo(\n return nextValue;\n }\n \n+function mountDeferredValue(\n+ value: T,\n+ config: TimeoutConfig | void | null,\n+): T {\n+ const [prevValue, setValue] = mountState(value);\n+ mountEffect(\n+ () => {\n+ Scheduler.unstable_next(() => {\n+ const previousConfig = ReactCurrentBatchConfig.suspense;\n+ ReactCurrentBatchConfig.suspense = config === undefined ? null : config;\n+ try {\n+ setValue(value);\n+ } finally {\n+ ReactCurrentBatchConfig.suspense = previousConfig;\n+ }\n+ });\n+ },\n+ [value, config],\n+ );\n+ return prevValue;\n+}\n+\n+function updateDeferredValue(\n+ value: T,\n+ config: TimeoutConfig | void | null,\n+): T {\n+ const [prevValue, setValue] = updateState(value);\n+ updateEffect(\n+ () => {\n+ Scheduler.unstable_next(() => {\n+ const previousConfig = ReactCurrentBatchConfig.suspense;\n+ ReactCurrentBatchConfig.suspense = config === undefined ? null : config;\n+ try {\n+ setValue(value);\n+ } finally {\n+ ReactCurrentBatchConfig.suspense = previousConfig;\n+ }\n+ });\n+ },\n+ [value, config],\n+ );\n+ return prevValue;\n+}\n+\n+function mountTransition(\n+ config: SuspenseConfig | void | null,\n+): [(() => void) => void, boolean] {\n+ const [isPending, setPending] = mountState(false);\n+ const startTransition = mountCallback(\n+ callback => {\n+ setPending(true);\n+ Scheduler.unstable_next(() => {\n+ const previousConfig = ReactCurrentBatchConfig.suspense;\n+ ReactCurrentBatchConfig.suspense = config === undefined ? null : config;\n+ try {\n+ setPending(false);\n+ callback();\n+ } finally {\n+ ReactCurrentBatchConfig.suspense = previousConfig;\n+ }\n+ });\n+ },\n+ [config, isPending],\n+ );\n+ return [startTransition, isPending];\n+}\n+\n+function updateTransition(\n+ config: SuspenseConfig | void | null,\n+): [(() => void) => void, boolean] {\n+ const [isPending, setPending] = updateState(false);\n+ const startTransition = updateCallback(\n+ callback => {\n+ setPending(true);\n+ Scheduler.unstable_next(() => {\n+ const previousConfig = ReactCurrentBatchConfig.suspense;\n+ ReactCurrentBatchConfig.suspense = config === undefined ? null : config;\n+ try {\n+ setPending(false);\n+ callback();\n+ } finally {\n+ ReactCurrentBatchConfig.suspense = previousConfig;\n+ }\n+ });\n+ },\n+ [config, isPending],\n+ );\n+ return [startTransition, isPending];\n+}\n+\n function dispatchAction(\n fiber: Fiber,\n queue: UpdateQueue,\n@@ -1272,6 +1373,8 @@ export const ContextOnlyDispatcher: Dispatcher = {\n useState: throwInvalidHookError,\n useDebugValue: throwInvalidHookError,\n useResponder: throwInvalidHookError,\n+ useDeferredValue: throwInvalidHookError,\n+ useTransition: throwInvalidHookError,\n };\n \n const HooksDispatcherOnMount: Dispatcher = {\n@@ -1288,6 +1391,8 @@ const HooksDispatcherOnMount: Dispatcher = {\n useState: mountState,\n useDebugValue: mountDebugValue,\n useResponder: createResponderListener,\n+ useDeferredValue: mountDeferredValue,\n+ useTransition: mountTransition,\n };\n \n const HooksDispatcherOnUpdate: Dispatcher = {\n@@ -1304,6 +1409,8 @@ const HooksDispatcherOnUpdate: Dispatcher = {\n useState: updateState,\n useDebugValue: updateDebugValue,\n useResponder: createResponderListener,\n+ useDeferredValue: updateDeferredValue,\n+ useTransition: updateTransition,\n };\n \n let HooksDispatcherOnMountInDEV: Dispatcher | null = null;\n@@ -1441,6 +1548,18 @@ if (__DEV__) {\n mountHookTypesDev();\n return createResponderListener(responder, props);\n },\n+ useDeferredValue(value: T, config: TimeoutConfig | void | null): T {\n+ currentHookNameInDev = 'useDeferredValue';\n+ mountHookTypesDev();\n+ return mountDeferredValue(value, config);\n+ },\n+ useTransition(\n+ config: SuspenseConfig | void | null,\n+ ): [(() => void) => void, boolean] {\n+ currentHookNameInDev = 'useTransition';\n+ mountHookTypesDev();\n+ return mountTransition(config);\n+ },\n };\n \n HooksDispatcherOnMountWithHookTypesInDEV = {\n@@ -1546,6 +1665,18 @@ if (__DEV__) {\n updateHookTypesDev();\n return createResponderListener(responder, props);\n },\n+ useDeferredValue(value: T, config: TimeoutConfig | void | null): T {\n+ currentHookNameInDev = 'useDeferredValue';\n+ updateHookTypesDev();\n+ return mountDeferredValue(value, config);\n+ },\n+ useTransition(\n+ config: SuspenseConfig | void | null,\n+ ): [(() => void) => void, boolean] {\n+ currentHookNameInDev = 'useTransition';\n+ updateHookTypesDev();\n+ return mountTransition(config);\n+ },\n };\n \n HooksDispatcherOnUpdateInDEV = {\n@@ -1651,6 +1782,18 @@ if (__DEV__) {\n updateHookTypesDev();\n return createResponderListener(responder, props);\n },\n+ useDeferredValue(value: T, config: TimeoutConfig | void | null): T {\n+ currentHookNameInDev = 'useDeferredValue';\n+ updateHookTypesDev();\n+ return updateDeferredValue(value, config);\n+ },\n+ useTransition(\n+ config: SuspenseConfig | void | null,\n+ ): [(() => void) => void, boolean] {\n+ currentHookNameInDev = 'useTransition';\n+ updateHookTypesDev();\n+ return updateTransition(config);\n+ },\n };\n \n InvalidNestedHooksDispatcherOnMountInDEV = {\n@@ -1768,6 +1911,20 @@ if (__DEV__) {\n mountHookTypesDev();\n return createResponderListener(responder, props);\n },\n+ useDeferredValue(value: T, config: TimeoutConfig | void | null): T {\n+ currentHookNameInDev = 'useDeferredValue';\n+ warnInvalidHookAccess();\n+ mountHookTypesDev();\n+ return mountDeferredValue(value, config);\n+ },\n+ useTransition(\n+ config: SuspenseConfig | void | null,\n+ ): [(() => void) => void, boolean] {\n+ currentHookNameInDev = 'useTransition';\n+ warnInvalidHookAccess();\n+ mountHookTypesDev();\n+ return mountTransition(config);\n+ },\n };\n \n InvalidNestedHooksDispatcherOnUpdateInDEV = {\n@@ -1885,5 +2042,19 @@ if (__DEV__) {\n updateHookTypesDev();\n return createResponderListener(responder, props);\n },\n+ useDeferredValue(value: T, config: TimeoutConfig | void | null): T {\n+ currentHookNameInDev = 'useDeferredValue';\n+ warnInvalidHookAccess();\n+ updateHookTypesDev();\n+ return updateDeferredValue(value, config);\n+ },\n+ useTransition(\n+ config: SuspenseConfig | void | null,\n+ ): [(() => void) => void, boolean] {\n+ currentHookNameInDev = 'useTransition';\n+ warnInvalidHookAccess();\n+ updateHookTypesDev();\n+ return updateTransition(config);\n+ },\n };\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\nindex 63c7eefca5..898457308a 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\n@@ -2930,7 +2930,7 @@ function flushSuspensePriorityWarningInDEV() {\n 'update to provide immediate feedback, and another update that ' +\n 'triggers the bulk of the changes.' +\n '\\n\\n' +\n- 'Refer to the documentation for useSuspenseTransition to learn how ' +\n+ 'Refer to the documentation for useTransition to learn how ' +\n 'to implement this pattern.',\n \/\/ TODO: Add link to React docs with more information, once it exists\n componentNames.sort().join(', '),\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\nindex 7bece8ee1a..6bc4871e4c 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n@@ -1485,6 +1485,31 @@ describe('ReactHooks', () => {\n useStateHelper,\n ];\n \n+ \/\/ We don't include useContext or useDebugValue in this set,\n+ \/\/ because they aren't added to the hooks list and so won't throw.\n+ let hooksInList = [\n+ useCallbackHelper,\n+ useEffectHelper,\n+ useImperativeHandleHelper,\n+ useLayoutEffectHelper,\n+ useMemoHelper,\n+ useReducerHelper,\n+ useRefHelper,\n+ useStateHelper,\n+ ];\n+\n+ if (__EXPERIMENTAL__) {\n+ const useTransitionHelper = () => React.useTransition({timeoutMs: 1000});\n+ const useDeferredValueHelper = () =>\n+ React.useDeferredValue(0, {timeoutMs: 1000});\n+\n+ orderedHooks.push(useTransitionHelper);\n+ orderedHooks.push(useDeferredValueHelper);\n+\n+ hooksInList.push(useTransitionHelper);\n+ hooksInList.push(useDeferredValueHelper);\n+ }\n+\n const formatHookNamesToMatchErrorMessage = (hookNameA, hookNameB) => {\n return `use${hookNameA}${' '.repeat(24 - hookNameA.length)}${\n hookNameB ? `use${hookNameB}` : undefined\n@@ -1598,19 +1623,6 @@ describe('ReactHooks', () => {\n });\n });\n \n- \/\/ We don't include useContext or useDebugValue in this set,\n- \/\/ because they aren't added to the hooks list and so won't throw.\n- let hooksInList = [\n- useCallbackHelper,\n- useEffectHelper,\n- useImperativeHandleHelper,\n- useLayoutEffectHelper,\n- useMemoHelper,\n- useReducerHelper,\n- useRefHelper,\n- useStateHelper,\n- ];\n-\n hooksInList.forEach((firstHelper, index) => {\n const secondHelper =\n index > 0\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\nindex 1516885925..4cd85e6e85 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\n@@ -13,10 +13,13 @@\n 'use strict';\n \n let React;\n+let ReactCache;\n+let TextResource;\n let ReactFeatureFlags;\n let ReactNoop;\n let Scheduler;\n let SchedulerTracing;\n+let Suspense;\n let useState;\n let useReducer;\n let useEffect;\n@@ -25,6 +28,8 @@ let useCallback;\n let useMemo;\n let useRef;\n let useImperativeHandle;\n+let useTransition;\n+let useDeferredValue;\n let forwardRef;\n let memo;\n let act;\n@@ -32,14 +37,17 @@ let act;\n describe('ReactHooksWithNoopRenderer', () => {\n beforeEach(() => {\n jest.resetModules();\n+ jest.useFakeTimers();\n \n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;\n ReactFeatureFlags.enableSchedulerTracing = true;\n+ ReactFeatureFlags.flushSuspenseFallbacksInTests = false;\n React = require('react');\n ReactNoop = require('react-noop-renderer');\n Scheduler = require('scheduler');\n SchedulerTracing = require('scheduler\/tracing');\n+ ReactCache = require('react-cache');\n useState = React.useState;\n useReducer = React.useReducer;\n useEffect = React.useEffect;\n@@ -50,18 +58,62 @@ describe('ReactHooksWithNoopRenderer', () => {\n useImperativeHandle = React.useImperativeHandle;\n forwardRef = React.forwardRef;\n memo = React.memo;\n+ useTransition = React.useTransition;\n+ useDeferredValue = React.useDeferredValue;\n+ Suspense = React.Suspense;\n act = ReactNoop.act;\n+\n+ TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {\n+ return new Promise((resolve, reject) =>\n+ setTimeout(() => {\n+ Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);\n+ resolve(text);\n+ }, ms),\n+ );\n+ }, ([text, ms]) => text);\n });\n \n function span(prop) {\n return {type: 'span', hidden: false, children: [], prop};\n }\n \n+ function hiddenSpan(prop) {\n+ return {type: 'span', children: [], prop, hidden: true};\n+ }\n+\n function Text(props) {\n Scheduler.unstable_yieldValue(props.text);\n return ;\n }\n \n+ function AsyncText(props) {\n+ const text = props.text;\n+ try {\n+ TextResource.read([props.text, props.ms]);\n+ Scheduler.unstable_yieldValue(text);\n+ return ;\n+ } catch (promise) {\n+ if (typeof promise.then === 'function') {\n+ Scheduler.unstable_yieldValue(`Suspend! [${text}]`);\n+ } else {\n+ Scheduler.unstable_yieldValue(`Error! [${text}]`);\n+ }\n+ throw promise;\n+ }\n+ }\n+\n+ function advanceTimers(ms) {\n+ \/\/ Note: This advances Jest's virtual time but not React's. Use\n+ \/\/ ReactNoop.expire for that.\n+ if (typeof ms !== 'number') {\n+ throw new Error('Must specify ms');\n+ }\n+ jest.advanceTimersByTime(ms);\n+ \/\/ Wait until the end of the current tick\n+ \/\/ We cannot use a timer since we're faking them\n+ return Promise.resolve().then(() => {});\n+ }\n+\n it('resumes after an interruption', () => {\n function Counter(props, ref) {\n const [count, updateCount] = useState(0);\n@@ -1921,7 +1973,213 @@ describe('ReactHooksWithNoopRenderer', () => {\n expect(totalRefUpdates).toBe(2); \/\/ Should not increase since last time\n });\n });\n+ if (__EXPERIMENTAL__) {\n+ describe('useTransition', () => {\n+ it('delays showing loading state until after timeout', async () => {\n+ let transition;\n+ function App() {\n+ const [show, setShow] = useState(false);\n+ const [startTransition, isPending] = useTransition({\n+ timeoutMs: 1000,\n+ });\n+ transition = () => {\n+ startTransition(() => {\n+ setShow(true);\n+ });\n+ };\n+ return (\n+ }>\n+ {show ? (\n+ \n+ ) : (\n+ \n+ )}\n+ <\/Suspense>\n+ );\n+ }\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushAndYield(['Before... Pending: false']);\n+ expect(ReactNoop.getChildren()).toEqual([\n+ span('Before... Pending: false'),\n+ ]);\n+\n+ act(() => {\n+ Scheduler.unstable_runWithPriority(\n+ Scheduler.unstable_UserBlockingPriority,\n+ transition,\n+ );\n+ });\n+ Scheduler.unstable_advanceTime(500);\n+ await advanceTimers(500);\n+ expect(Scheduler).toHaveYielded([\n+ 'Before... Pending: true',\n+ 'Suspend! [After... Pending: false]',\n+ 'Loading... Pending: false',\n+ ]);\n+ expect(ReactNoop.getChildren()).toEqual([\n+ span('Before... Pending: true'),\n+ ]);\n+\n+ Scheduler.unstable_advanceTime(1000);\n+ await advanceTimers(1000);\n+ expect(ReactNoop.getChildren()).toEqual([\n+ hiddenSpan('Before... Pending: true'),\n+ span('Loading... Pending: false'),\n+ ]);\n+\n+ Scheduler.unstable_advanceTime(500);\n+ await advanceTimers(500);\n+ expect(Scheduler).toHaveYielded([\n+ 'Promise resolved [After... Pending: false]',\n+ ]);\n+ expect(Scheduler).toFlushAndYield(['After... Pending: false']);\n+ expect(ReactNoop.getChildren()).toEqual([\n+ span('After... Pending: false'),\n+ ]);\n+ });\n+ it('delays showing loading state until after busyDelayMs + busyMinDurationMs', async () => {\n+ let transition;\n+ function App() {\n+ const [show, setShow] = useState(false);\n+ const [startTransition, isPending] = useTransition({\n+ busyDelayMs: 1000,\n+ busyMinDurationMs: 2000,\n+ });\n+ transition = () => {\n+ startTransition(() => {\n+ setShow(true);\n+ });\n+ };\n+ return (\n+ }>\n+ {show ? (\n+ \n+ ) : (\n+ \n+ )}\n+ <\/Suspense>\n+ );\n+ }\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushAndYield(['Before... Pending: false']);\n+ expect(ReactNoop.getChildren()).toEqual([\n+ span('Before... Pending: false'),\n+ ]);\n+\n+ act(() => {\n+ Scheduler.unstable_runWithPriority(\n+ Scheduler.unstable_UserBlockingPriority,\n+ transition,\n+ );\n+ });\n+ Scheduler.unstable_advanceTime(1000);\n+ await advanceTimers(1000);\n+ expect(Scheduler).toHaveYielded([\n+ 'Before... Pending: true',\n+ 'Suspend! [After... Pending: false]',\n+ 'Loading... Pending: false',\n+ ]);\n+ expect(ReactNoop.getChildren()).toEqual([\n+ span('Before... Pending: true'),\n+ ]);\n+\n+ Scheduler.unstable_advanceTime(1000);\n+ await advanceTimers(1000);\n+ expect(Scheduler).toHaveYielded([\n+ 'Promise resolved [After... Pending: false]',\n+ ]);\n+ expect(Scheduler).toFlushAndYield(['After... Pending: false']);\n+ expect(ReactNoop.getChildren()).toEqual([\n+ span('Before... Pending: true'),\n+ ]);\n+\n+ Scheduler.unstable_advanceTime(1000);\n+ await advanceTimers(1000);\n+ expect(ReactNoop.getChildren()).toEqual([\n+ span('Before... Pending: true'),\n+ ]);\n+ Scheduler.unstable_advanceTime(250);\n+ await advanceTimers(250);\n+ expect(ReactNoop.getChildren()).toEqual([\n+ span('After... Pending: false'),\n+ ]);\n+ });\n+ });\n+ describe('useDeferredValue', () => {\n+ it('defers text value until specified timeout', async () => {\n+ function TextBox({text}) {\n+ return ;\n+ }\n+\n+ let _setText;\n+ function App() {\n+ const [text, setText] = useState('A');\n+ const deferredText = useDeferredValue(text, {\n+ timeoutMs: 500,\n+ });\n+ _setText = setText;\n+ return (\n+ <>\n+ \n+ }>\n+ \n+ <\/Suspense>\n+ <\/>\n+ );\n+ }\n+\n+ act(() => {\n+ ReactNoop.render();\n+ });\n+\n+ expect(Scheduler).toHaveYielded(['A', 'Suspend! [A]', 'Loading']);\n+ expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading')]);\n+\n+ Scheduler.unstable_advanceTime(1000);\n+ await advanceTimers(1000);\n+ expect(Scheduler).toHaveYielded(['Promise resolved [A]']);\n+ expect(Scheduler).toFlushAndYield(['A']);\n+ expect(ReactNoop.getChildren()).toEqual([span('A'), span('A')]);\n+\n+ act(() => {\n+ _setText('B');\n+ });\n+ expect(Scheduler).toHaveYielded([\n+ 'B',\n+ 'A',\n+ 'B',\n+ 'Suspend! [B]',\n+ 'Loading',\n+ ]);\n+ expect(Scheduler).toFlushAndYield([]);\n+ expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);\n+\n+ Scheduler.unstable_advanceTime(250);\n+ await advanceTimers(250);\n+ expect(Scheduler).toFlushAndYield([]);\n+ expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);\n+\n+ Scheduler.unstable_advanceTime(500);\n+ await advanceTimers(500);\n+ expect(ReactNoop.getChildren()).toEqual([\n+ span('B'),\n+ hiddenSpan('A'),\n+ span('Loading'),\n+ ]);\n+\n+ Scheduler.unstable_advanceTime(250);\n+ await advanceTimers(250);\n+ expect(Scheduler).toHaveYielded(['Promise resolved [B]']);\n \n+ act(() => {\n+ expect(Scheduler).toFlushAndYield(['B']);\n+ });\n+ expect(ReactNoop.getChildren()).toEqual([span('B'), span('B')]);\n+ });\n+ });\n+ }\n describe('progressive enhancement (not supported)', () => {\n it('mount additional state', () => {\n let updateA;\ndiff --git a\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js b\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js\nindex 50897342d9..e4e32bd00e 100644\n--- a\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js\n+++ b\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js\n@@ -377,6 +377,23 @@ class ReactShallowRenderer {\n responder,\n });\n \n+ \/\/ TODO: implement if we decide to keep the shallow renderer\n+ const useTransition = (\n+ config,\n+ ): [(callback: () => void) => void, boolean] => {\n+ this._validateCurrentlyRenderingComponent();\n+ const startTransition = callback => {\n+ callback();\n+ };\n+ return [startTransition, false];\n+ };\n+\n+ \/\/ TODO: implement if we decide to keep the shallow renderer\n+ const useDeferredValue = (value: T, config): T => {\n+ this._validateCurrentlyRenderingComponent();\n+ return value;\n+ };\n+\n return {\n readContext,\n useCallback: (identity: any),\n@@ -393,6 +410,8 @@ class ReactShallowRenderer {\n useRef,\n useState,\n useResponder,\n+ useTransition,\n+ useDeferredValue,\n };\n }\n \ndiff --git a\/packages\/react\/src\/React.js b\/packages\/react\/src\/React.js\nindex 112ff1620b..bfae007942 100644\n--- a\/packages\/react\/src\/React.js\n+++ b\/packages\/react\/src\/React.js\n@@ -40,6 +40,8 @@ import {\n useRef,\n useState,\n useResponder,\n+ useTransition,\n+ useDeferredValue,\n } from '.\/ReactHooks';\n import {withSuspenseConfig} from '.\/ReactBatchConfig';\n import {\n@@ -59,6 +61,7 @@ import {\n enableFlareAPI,\n enableFundamentalAPI,\n enableScopeAPI,\n+ exposeConcurrentModeAPIs,\n } from 'shared\/ReactFeatureFlags';\n const React = {\n Children: {\n@@ -107,6 +110,11 @@ const React = {\n __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,\n };\n \n+if (exposeConcurrentModeAPIs) {\n+ React.useTransition = useTransition;\n+ React.useDeferredValue = useDeferredValue;\n+}\n+\n if (enableFlareAPI) {\n React.unstable_useResponder = useResponder;\n React.unstable_createResponder = createResponder;\ndiff --git a\/packages\/react\/src\/ReactHooks.js b\/packages\/react\/src\/ReactHooks.js\nindex 1439500670..6072720cdc 100644\n--- a\/packages\/react\/src\/ReactHooks.js\n+++ b\/packages\/react\/src\/ReactHooks.js\n@@ -160,3 +160,15 @@ export function useResponder(\n }\n return dispatcher.useResponder(responder, listenerProps || emptyObject);\n }\n+\n+export function useTransition(\n+ config: ?Object,\n+): [(() => void) => void, boolean] {\n+ const dispatcher = resolveDispatcher();\n+ return dispatcher.useTransition(config);\n+}\n+\n+export function useDeferredValue(value: T, config: ?Object): T {\n+ const dispatcher = resolveDispatcher();\n+ return dispatcher.useDeferredValue(value, config);\n+}\n"}

dillon1000/react

Files changed