{"commit":{"authorEmail":"rickhanlonii@gmail.com","revision":"a632f7de3bd35eaf6d5082054af4da92dd37cf20","authoredAt":"2021-04-20T12:21:44-04:00","authorName":"Ricky","shortRevision":"a632f7de3b","subject":"Flip tuple order of useTransition (#20976)"},"patch":"diff --git a\/packages\/eslint-plugin-react-hooks\/__tests__\/ESLintRuleExhaustiveDeps-test.js b\/packages\/eslint-plugin-react-hooks\/__tests__\/ESLintRuleExhaustiveDeps-test.js\nindex 430e785624..bde0c1cfa3 100644\n--- a\/packages\/eslint-plugin-react-hooks\/__tests__\/ESLintRuleExhaustiveDeps-test.js\n+++ b\/packages\/eslint-plugin-react-hooks\/__tests__\/ESLintRuleExhaustiveDeps-test.js\n@@ -604,10 +604,10 @@ const tests = {\n const [state4, dispatch2] = React.useReducer();\n const [state5, maybeSetState] = useFunnyState();\n const [state6, maybeDispatch] = useFunnyReducer();\n- const [startTransition1] = useTransition();\n- const [startTransition2, isPending2] = useTransition();\n- const [startTransition3] = React.useTransition();\n- const [startTransition4, isPending4] = React.useTransition();\n+ const [isPending1] = useTransition();\n+ const [isPending2, startTransition2] = useTransition();\n+ const [isPending3] = React.useTransition();\n+ const [isPending4, startTransition4] = React.useTransition();\n const mySetState = useCallback(() => {}, []);\n let myDispatch = useCallback(() => {}, []);\n \ndiff --git a\/packages\/eslint-plugin-react-hooks\/src\/ExhaustiveDeps.js b\/packages\/eslint-plugin-react-hooks\/src\/ExhaustiveDeps.js\nindex f4c36fcf22..d40aaba421 100644\n--- a\/packages\/eslint-plugin-react-hooks\/src\/ExhaustiveDeps.js\n+++ b\/packages\/eslint-plugin-react-hooks\/src\/ExhaustiveDeps.js\n@@ -255,9 +255,14 @@ export default {\n }\n }\n } else if (name === 'useTransition') {\n- if (id.type === 'ArrayPattern' && isArray(resolved.identifiers)) {\n- \/\/ Is first tuple value the same reference we're checking?\n- if (id.elements[0] === resolved.identifiers[0]) {\n+ \/\/ Only consider second value in initializing tuple stable.\n+ if (\n+ id.type === 'ArrayPattern' &&\n+ id.elements.length === 2 &&\n+ Array.isArray(resolved.identifiers)\n+ ) {\n+ \/\/ Is second tuple value the same reference we're checking?\n+ if (id.elements[1] === resolved.identifiers[0]) {\n \/\/ Setter is stable.\n return true;\n }\ndiff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex d78f629374..2127082557 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -265,7 +265,7 @@ function useMutableSource(\n return value;\n }\n \n-function useTransition(): [(() => void) => void, boolean] {\n+function useTransition(): [boolean, (() => void) => void] {\n \/\/ useTransition() composes multiple hooks internally.\n \/\/ Advance the current hook index the same number of times\n \/\/ so that subsequent hooks have the right memoized state.\n@@ -276,7 +276,7 @@ function useTransition(): [(() => void) => void, boolean] {\n stackError: new Error(),\n value: undefined,\n });\n- return [callback => {}, false];\n+ return [false, callback => {}];\n }\n \n function useDeferredValue(value: T): T {\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementErrorsAndWarningsTree.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementErrorsAndWarningsTree.js\nindex 3b7aaca321..83d3721a53 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementErrorsAndWarningsTree.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementErrorsAndWarningsTree.js\n@@ -41,8 +41,8 @@ export default function InspectedElementErrorsAndWarningsTree({\n const refresh = useCacheRefresh();\n \n const [\n- startClearErrorsTransition,\n isErrorsTransitionPending,\n+ startClearErrorsTransition,\n ] = useTransition();\n const clearErrorsForInspectedElement = () => {\n const {id} = inspectedElement;\n@@ -60,8 +60,8 @@ export default function InspectedElementErrorsAndWarningsTree({\n };\n \n const [\n- startClearWarningsTransition,\n isWarningsTransitionPending,\n+ startClearWarningsTransition,\n ] = useTransition();\n const clearWarningsForInspectedElement = () => {\n const {id} = inspectedElement;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js\nindex aa5b1bc56e..b39a6d1545 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js\n@@ -90,7 +90,7 @@ export default function KeyValue({\n isReadOnly = value[meta.readonly];\n }\n \n- const [startInspectPathsTransition, isInspectPathsPending] = useTransition();\n+ const [isInspectPathsPending, startInspectPathsTransition] = useTransition();\n const toggleIsOpen = () => {\n if (isOpen) {\n setIsOpen(false);\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js b\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\nindex aeda6e7213..433ab9ae07 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\n@@ -467,12 +467,12 @@ function useDeferredValue(value: T): T {\n return value;\n }\n \n-function useTransition(): [(callback: () => void) => void, boolean] {\n+function useTransition(): [boolean, (callback: () => void) => void] {\n resolveCurrentlyRenderingComponent();\n const startTransition = callback => {\n callback();\n };\n- return [startTransition, false];\n+ return [false, startTransition];\n }\n \n function useOpaqueIdentifier(): OpaqueIDType {\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\nindex 5192c6d274..a507171aec 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\n@@ -1723,27 +1723,27 @@ function startTransition(setPending, callback) {\n }\n }\n \n-function mountTransition(): [(() => void) => void, boolean] {\n+function mountTransition(): [boolean, (() => void) => void] {\n const [isPending, setPending] = mountState(false);\n \/\/ The `start` method never changes.\n const start = startTransition.bind(null, setPending);\n const hook = mountWorkInProgressHook();\n hook.memoizedState = start;\n- return [start, isPending];\n+ return [isPending, start];\n }\n \n-function updateTransition(): [(() => void) => void, boolean] {\n+function updateTransition(): [boolean, (() => void) => void] {\n const [isPending] = updateState(false);\n const hook = updateWorkInProgressHook();\n const start = hook.memoizedState;\n- return [start, isPending];\n+ return [isPending, start];\n }\n \n-function rerenderTransition(): [(() => void) => void, boolean] {\n+function rerenderTransition(): [boolean, (() => void) => void] {\n const [isPending] = rerenderState(false);\n const hook = updateWorkInProgressHook();\n const start = hook.memoizedState;\n- return [start, isPending];\n+ return [isPending, start];\n }\n \n let isUpdatingOpaqueValueInRenderPhase = false;\n@@ -2283,7 +2283,7 @@ if (__DEV__) {\n mountHookTypesDev();\n return mountDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n mountHookTypesDev();\n return mountTransition();\n@@ -2407,7 +2407,7 @@ if (__DEV__) {\n updateHookTypesDev();\n return mountDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n updateHookTypesDev();\n return mountTransition();\n@@ -2531,7 +2531,7 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n updateHookTypesDev();\n return updateTransition();\n@@ -2656,7 +2656,7 @@ if (__DEV__) {\n updateHookTypesDev();\n return rerenderDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n updateHookTypesDev();\n return rerenderTransition();\n@@ -2792,7 +2792,7 @@ if (__DEV__) {\n mountHookTypesDev();\n return mountDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n warnInvalidHookAccess();\n mountHookTypesDev();\n@@ -2931,7 +2931,7 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n warnInvalidHookAccess();\n updateHookTypesDev();\n@@ -3071,7 +3071,7 @@ if (__DEV__) {\n updateHookTypesDev();\n return rerenderDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n warnInvalidHookAccess();\n updateHookTypesDev();\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\nindex a319cdf75b..ad55580431 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\n@@ -1723,27 +1723,27 @@ function startTransition(setPending, callback) {\n }\n }\n \n-function mountTransition(): [(() => void) => void, boolean] {\n+function mountTransition(): [boolean, (() => void) => void] {\n const [isPending, setPending] = mountState(false);\n \/\/ The `start` method never changes.\n const start = startTransition.bind(null, setPending);\n const hook = mountWorkInProgressHook();\n hook.memoizedState = start;\n- return [start, isPending];\n+ return [isPending, start];\n }\n \n-function updateTransition(): [(() => void) => void, boolean] {\n+function updateTransition(): [boolean, (() => void) => void] {\n const [isPending] = updateState(false);\n const hook = updateWorkInProgressHook();\n const start = hook.memoizedState;\n- return [start, isPending];\n+ return [isPending, start];\n }\n \n-function rerenderTransition(): [(() => void) => void, boolean] {\n+function rerenderTransition(): [boolean, (() => void) => void] {\n const [isPending] = rerenderState(false);\n const hook = updateWorkInProgressHook();\n const start = hook.memoizedState;\n- return [start, isPending];\n+ return [isPending, start];\n }\n \n let isUpdatingOpaqueValueInRenderPhase = false;\n@@ -2283,7 +2283,7 @@ if (__DEV__) {\n mountHookTypesDev();\n return mountDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n mountHookTypesDev();\n return mountTransition();\n@@ -2407,7 +2407,7 @@ if (__DEV__) {\n updateHookTypesDev();\n return mountDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n updateHookTypesDev();\n return mountTransition();\n@@ -2531,7 +2531,7 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n updateHookTypesDev();\n return updateTransition();\n@@ -2656,7 +2656,7 @@ if (__DEV__) {\n updateHookTypesDev();\n return rerenderDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n updateHookTypesDev();\n return rerenderTransition();\n@@ -2792,7 +2792,7 @@ if (__DEV__) {\n mountHookTypesDev();\n return mountDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n warnInvalidHookAccess();\n mountHookTypesDev();\n@@ -2931,7 +2931,7 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n warnInvalidHookAccess();\n updateHookTypesDev();\n@@ -3071,7 +3071,7 @@ if (__DEV__) {\n updateHookTypesDev();\n return rerenderDeferredValue(value);\n },\n- useTransition(): [(() => void) => void, boolean] {\n+ useTransition(): [boolean, (() => void) => void] {\n currentHookNameInDev = 'useTransition';\n warnInvalidHookAccess();\n updateHookTypesDev();\ndiff --git a\/packages\/react-reconciler\/src\/ReactInternalTypes.js b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\nindex 0c34eeda8e..08f5cbc2d0 100644\n--- a\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n+++ b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n@@ -311,7 +311,7 @@ export type Dispatcher = {|\n ): void,\n useDebugValue(value: T, formatterFn: ?(value: T) => mixed): void,\n useDeferredValue(value: T): T,\n- useTransition(): [(() => void) => void, boolean],\n+ useTransition(): [boolean, (() => void) => void],\n useMutableSource(\n source: MutableSource,\n getSnapshot: MutableSourceGetSnapshotFn,\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\nindex bc37abbd32..ce9236e114 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n@@ -1511,7 +1511,7 @@ describe('ReactHooks', () => {\n ];\n \n if (__EXPERIMENTAL__) {\n- const useTransitionHelper = () => React.useTransition({timeoutMs: 1000});\n+ const useTransitionHelper = () => React.useTransition();\n const useDeferredValueHelper = () =>\n React.useDeferredValue(0, {timeoutMs: 1000});\n \ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.js\nindex d01cd2a065..95e6a55c78 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.js\n@@ -876,14 +876,11 @@ describe('ReactHooksWithNoopRenderer', () => {\n \/\/ TODO: This should probably warn\n \/\/ @gate experimental\n it('calling startTransition inside render phase', async () => {\n- let startTransition;\n function App() {\n const [counter, setCounter] = useState(0);\n- const [_startTransition] = useTransition();\n- startTransition = _startTransition;\n \n if (counter === 0) {\n- startTransition(() => {\n+ React.unstable_startTransition(() => {\n setCounter(c => c + 1);\n });\n }\n@@ -3227,9 +3224,7 @@ describe('ReactHooksWithNoopRenderer', () => {\n let transition;\n function App() {\n const [show, setShow] = useState(false);\n- const [startTransition, isPending] = useTransition({\n- timeoutMs: 1000,\n- });\n+ const [isPending, startTransition] = useTransition();\n transition = () => {\n startTransition(() => {\n setShow(true);\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.js\nindex bb4e0f6892..7861b2904f 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.js\n@@ -3745,7 +3745,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {\n let startTransition;\n function B() {\n const [textB, _setTextB] = useState('B');\n- const [_startTransition] = useTransition({timeoutMs: 10000});\n+ \/\/ eslint-disable-next-line no-unused-vars\n+ const [_, _startTransition] = useTransition();\n startTransition = _startTransition;\n setTextB = _setTextB;\n return (\n@@ -3843,12 +3844,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {\n let setTextWithLongTransition;\n \n function App() {\n- const [startShortTransition, isPending1] = React.unstable_useTransition({\n- timeoutMs: 5000,\n- });\n- const [startLongTransition, isPending2] = React.unstable_useTransition({\n- timeoutMs: 30000,\n- });\n+ const [isPending1, startShortTransition] = React.unstable_useTransition();\n+ const [isPending2, startLongTransition] = React.unstable_useTransition();\n const isPending = isPending1 || isPending2;\n const [text, setText] = React.useState('');\n const [mirror, setMirror] = React.useState('');\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactTransition-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactTransition-test.js\nindex 09ba5dded7..71c40cefeb 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactTransition-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactTransition-test.js\n@@ -164,7 +164,7 @@ describe('ReactTransition', () => {\n let start;\n function App() {\n const [show, setShow] = useState(false);\n- const [_start, isPending] = useTransition();\n+ const [isPending, _start] = useTransition();\n start = () => _start(() => setShow(true));\n return (\n }>\n@@ -208,7 +208,7 @@ describe('ReactTransition', () => {\n async () => {\n let update;\n function App() {\n- const [startContentChange, isContentPending] = useTransition();\n+ const [isContentPending, startContentChange] = useTransition();\n const [label, setLabel] = useState('A');\n const [contents, setContents] = useState('A');\n update = value => {\ndiff --git a\/packages\/react-server\/src\/ReactFizzHooks.js b\/packages\/react-server\/src\/ReactFizzHooks.js\nindex 9fd9e0f420..23a35c1803 100644\n--- a\/packages\/react-server\/src\/ReactFizzHooks.js\n+++ b\/packages\/react-server\/src\/ReactFizzHooks.js\n@@ -470,9 +470,9 @@ function unsupportedStartTransition() {\n invariant(false, 'startTransition cannot be called during server rendering.');\n }\n \n-function useTransition(): [(callback: () => void) => void, boolean] {\n+function useTransition(): [boolean, (callback: () => void) => void] {\n resolveCurrentlyRenderingComponent();\n- return [unsupportedStartTransition, false];\n+ return [false, unsupportedStartTransition];\n }\n \n function useOpaqueIdentifier(): OpaqueIDType {\ndiff --git a\/packages\/react\/src\/ReactHooks.js b\/packages\/react\/src\/ReactHooks.js\nindex 18920be2c8..82bd886d82 100644\n--- a\/packages\/react\/src\/ReactHooks.js\n+++ b\/packages\/react\/src\/ReactHooks.js\n@@ -145,7 +145,7 @@ export function useDebugValue(\n \n export const emptyObject = {};\n \n-export function useTransition(): [(() => void) => void, boolean] {\n+export function useTransition(): [boolean, (() => void) => void] {\n const dispatcher = resolveDispatcher();\n return dispatcher.useTransition();\n }\n","body":"","files":[{"status":"M","path":"packages\/eslint-plugin-react-hooks\/__tests__\/ESLintRuleExhaustiveDeps-test.js"},{"status":"M","path":"packages\/eslint-plugin-react-hooks\/src\/ExhaustiveDeps.js"},{"status":"M","path":"packages\/react-debug-tools\/src\/ReactDebugHooks.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementErrorsAndWarningsTree.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js"},{"status":"M","path":"packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactInternalTypes.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactTransition-test.js"},{"status":"M","path":"packages\/react-server\/src\/ReactFizzHooks.js"},{"status":"M","path":"packages\/react\/src\/ReactHooks.js"}],"parents":["bd7f4a013be3ef272a01874532bee71ad861e617"]}

dillon1000/react

Files changed