Skip to content

Commit dc3c2fb

Browse files
rickhanloniirickhanlonii
committed
Flip tuple order of useTransition
1 parent 60182d6 commit dc3c2fb

14 files changed

Lines changed: 53 additions & 55 deletions

File tree

‎packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -604,10 +604,10 @@ const tests = {
604604
const [state4, dispatch2] = React.useReducer();
605605
const [state5, maybeSetState] = useFunnyState();
606606
const [state6, maybeDispatch] = useFunnyReducer();
607-
const [startTransition1] = useTransition();
608-
const [startTransition2, isPending2] = useTransition();
609-
const [startTransition3] = React.useTransition();
610-
const [startTransition4, isPending4] = React.useTransition();
607+
const [isPending1] = useTransition();
608+
const [isPending2, startTransition2] = useTransition();
609+
const [isPending3] = React.useTransition();
610+
const [isPending4, startTransition4] = React.useTransition();
611611
const mySetState = useCallback(() => {}, []);
612612
let myDispatch = useCallback(() => {}, []);
613613

‎packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -253,12 +253,14 @@ export default {
253253
}
254254
}
255255
} else if (name === 'useTransition') {
256+
// Only consider second value in initializing tuple stable.
256257
if (
257258
id.type === 'ArrayPattern' &&
259+
id.elements.length === 2 &&
258260
Array.isArray(resolved.identifiers)
259261
) {
260-
// Is first tuple value the same reference we're checking?
261-
if (id.elements[0] === resolved.identifiers[0]) {
262+
// Is second tuple value the same reference we're checking?g
263+
if (id.elements[1] === resolved.identifiers[0]) {
262264
// Setter is stable.
263265
return true;
264266
}

‎packages/react-debug-tools/src/ReactDebugHooks.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ function useMutableSource<Source, Snapshot>(
271271
return value;
272272
}
273273

274-
function useTransition(): [(() => void) => void, boolean] {
274+
function useTransition(): [boolean, (() => void) => void] {
275275
// useTransition() composes multiple hooks internally.
276276
// Advance the current hook index the same number of times
277277
// so that subsequent hooks have the right memoized state.
@@ -282,7 +282,7 @@ function useTransition(): [(() => void) => void, boolean] {
282282
stackError: new Error(),
283283
value: undefined,
284284
});
285-
return [callback => {}, false];
285+
return [false, callback => {}];
286286
}
287287

288288
function useDeferredValue<T>(value: T): T {

‎packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ export default function InspectedElementErrorsAndWarningsTree({
4141
const refresh = useCacheRefresh();
4242

4343
const [
44-
startClearErrorsTransition,
4544
isErrorsTransitionPending,
45+
startClearErrorsTransition,
4646
] = useTransition();
4747
const clearErrorsForInspectedElement = () => {
4848
const {id} = inspectedElement;
@@ -60,8 +60,8 @@ export default function InspectedElementErrorsAndWarningsTree({
6060
};
6161

6262
const [
63-
startClearWarningsTransition,
6463
isWarningsTransitionPending,
64+
startClearWarningsTransition,
6565
] = useTransition();
6666
const clearWarningsForInspectedElement = () => {
6767
const {id} = inspectedElement;

‎packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export default function KeyValue({
9090
isReadOnly = value[meta.readonly];
9191
}
9292

93-
const [startInspectPathsTransition, isInspectPathsPending] = useTransition();
93+
const [isInspectPathsPending, startInspectPathsTransition] = useTransition();
9494
const toggleIsOpen = () => {
9595
if (isOpen) {
9696
setIsOpen(false);

‎packages/react-dom/src/server/ReactPartialRendererHooks.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -473,12 +473,12 @@ function useDeferredValue<T>(value: T): T {
473473
return value;
474474
}
475475

476-
function useTransition(): [(callback: () => void) => void, boolean] {
476+
function useTransition(): [boolean, (callback: () => void) => void] {
477477
resolveCurrentlyRenderingComponent();
478478
const startTransition = callback => {
479479
callback();
480480
};
481-
return [startTransition, false];
481+
return [false, startTransition];
482482
}
483483

484484
function useOpaqueIdentifier(): OpaqueIDType {

‎packages/react-reconciler/src/ReactFiberHooks.new.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1728,27 +1728,27 @@ function startTransition(setPending, callback) {
17281728
}
17291729
}
17301730

1731-
function mountTransition(): [(() => void) => void, boolean] {
1731+
function mountTransition(): [boolean, (() => void) => void] {
17321732
const [isPending, setPending] = mountState(false);
17331733
// The `start` method never changes.
17341734
const start = startTransition.bind(null, setPending);
17351735
const hook = mountWorkInProgressHook();
17361736
hook.memoizedState = start;
1737-
return [start, isPending];
1737+
return [isPending, start];
17381738
}
17391739

1740-
function updateTransition(): [(() => void) => void, boolean] {
1740+
function updateTransition(): [boolean, (() => void) => void] {
17411741
const [isPending] = updateState(false);
17421742
const hook = updateWorkInProgressHook();
17431743
const start = hook.memoizedState;
1744-
return [start, isPending];
1744+
return [isPending, start];
17451745
}
17461746

1747-
function rerenderTransition(): [(() => void) => void, boolean] {
1747+
function rerenderTransition(): [boolean, (() => void) => void] {
17481748
const [isPending] = rerenderState(false);
17491749
const hook = updateWorkInProgressHook();
17501750
const start = hook.memoizedState;
1751-
return [start, isPending];
1751+
return [isPending, start];
17521752
}
17531753

17541754
let isUpdatingOpaqueValueInRenderPhase = false;
@@ -2294,7 +2294,7 @@ if (__DEV__) {
22942294
mountHookTypesDev();
22952295
return mountDeferredValue(value);
22962296
},
2297-
useTransition(): [(() => void) => void, boolean] {
2297+
useTransition(): [boolean, (() => void) => void] {
22982298
currentHookNameInDev = 'useTransition';
22992299
mountHookTypesDev();
23002300
return mountTransition();
@@ -2424,7 +2424,7 @@ if (__DEV__) {
24242424
updateHookTypesDev();
24252425
return mountDeferredValue(value);
24262426
},
2427-
useTransition(): [(() => void) => void, boolean] {
2427+
useTransition(): [boolean, (() => void) => void] {
24282428
currentHookNameInDev = 'useTransition';
24292429
updateHookTypesDev();
24302430
return mountTransition();
@@ -2554,7 +2554,7 @@ if (__DEV__) {
25542554
updateHookTypesDev();
25552555
return updateDeferredValue(value);
25562556
},
2557-
useTransition(): [(() => void) => void, boolean] {
2557+
useTransition(): [boolean, (() => void) => void] {
25582558
currentHookNameInDev = 'useTransition';
25592559
updateHookTypesDev();
25602560
return updateTransition();
@@ -2685,7 +2685,7 @@ if (__DEV__) {
26852685
updateHookTypesDev();
26862686
return rerenderDeferredValue(value);
26872687
},
2688-
useTransition(): [(() => void) => void, boolean] {
2688+
useTransition(): [boolean, (() => void) => void] {
26892689
currentHookNameInDev = 'useTransition';
26902690
updateHookTypesDev();
26912691
return rerenderTransition();
@@ -2827,7 +2827,7 @@ if (__DEV__) {
28272827
mountHookTypesDev();
28282828
return mountDeferredValue(value);
28292829
},
2830-
useTransition(): [(() => void) => void, boolean] {
2830+
useTransition(): [boolean, (() => void) => void] {
28312831
currentHookNameInDev = 'useTransition';
28322832
warnInvalidHookAccess();
28332833
mountHookTypesDev();
@@ -2972,7 +2972,7 @@ if (__DEV__) {
29722972
updateHookTypesDev();
29732973
return updateDeferredValue(value);
29742974
},
2975-
useTransition(): [(() => void) => void, boolean] {
2975+
useTransition(): [boolean, (() => void) => void] {
29762976
currentHookNameInDev = 'useTransition';
29772977
warnInvalidHookAccess();
29782978
updateHookTypesDev();
@@ -3118,7 +3118,7 @@ if (__DEV__) {
31183118
updateHookTypesDev();
31193119
return rerenderDeferredValue(value);
31203120
},
3121-
useTransition(): [(() => void) => void, boolean] {
3121+
useTransition(): [boolean, (() => void) => void] {
31223122
currentHookNameInDev = 'useTransition';
31233123
warnInvalidHookAccess();
31243124
updateHookTypesDev();

‎packages/react-reconciler/src/ReactFiberHooks.old.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1728,27 +1728,27 @@ function startTransition(setPending, callback) {
17281728
}
17291729
}
17301730

1731-
function mountTransition(): [(() => void) => void, boolean] {
1731+
function mountTransition(): [boolean, (() => void) => void] {
17321732
const [isPending, setPending] = mountState(false);
17331733
// The `start` method never changes.
17341734
const start = startTransition.bind(null, setPending);
17351735
const hook = mountWorkInProgressHook();
17361736
hook.memoizedState = start;
1737-
return [start, isPending];
1737+
return [isPending, start];
17381738
}
17391739

1740-
function updateTransition(): [(() => void) => void, boolean] {
1740+
function updateTransition(): [boolean, (() => void) => void] {
17411741
const [isPending] = updateState(false);
17421742
const hook = updateWorkInProgressHook();
17431743
const start = hook.memoizedState;
1744-
return [start, isPending];
1744+
return [isPending, start];
17451745
}
17461746

1747-
function rerenderTransition(): [(() => void) => void, boolean] {
1747+
function rerenderTransition(): [boolean, (() => void) => void] {
17481748
const [isPending] = rerenderState(false);
17491749
const hook = updateWorkInProgressHook();
17501750
const start = hook.memoizedState;
1751-
return [start, isPending];
1751+
return [isPending, start];
17521752
}
17531753

17541754
let isUpdatingOpaqueValueInRenderPhase = false;
@@ -2294,7 +2294,7 @@ if (__DEV__) {
22942294
mountHookTypesDev();
22952295
return mountDeferredValue(value);
22962296
},
2297-
useTransition(): [(() => void) => void, boolean] {
2297+
useTransition(): [boolean, (() => void) => void] {
22982298
currentHookNameInDev = 'useTransition';
22992299
mountHookTypesDev();
23002300
return mountTransition();
@@ -2424,7 +2424,7 @@ if (__DEV__) {
24242424
updateHookTypesDev();
24252425
return mountDeferredValue(value);
24262426
},
2427-
useTransition(): [(() => void) => void, boolean] {
2427+
useTransition(): [boolean, (() => void) => void] {
24282428
currentHookNameInDev = 'useTransition';
24292429
updateHookTypesDev();
24302430
return mountTransition();
@@ -2554,7 +2554,7 @@ if (__DEV__) {
25542554
updateHookTypesDev();
25552555
return updateDeferredValue(value);
25562556
},
2557-
useTransition(): [(() => void) => void, boolean] {
2557+
useTransition(): [boolean, (() => void) => void] {
25582558
currentHookNameInDev = 'useTransition';
25592559
updateHookTypesDev();
25602560
return updateTransition();
@@ -2685,7 +2685,7 @@ if (__DEV__) {
26852685
updateHookTypesDev();
26862686
return rerenderDeferredValue(value);
26872687
},
2688-
useTransition(): [(() => void) => void, boolean] {
2688+
useTransition(): [boolean, (() => void) => void] {
26892689
currentHookNameInDev = 'useTransition';
26902690
updateHookTypesDev();
26912691
return rerenderTransition();
@@ -2827,7 +2827,7 @@ if (__DEV__) {
28272827
mountHookTypesDev();
28282828
return mountDeferredValue(value);
28292829
},
2830-
useTransition(): [(() => void) => void, boolean] {
2830+
useTransition(): [boolean, (() => void) => void] {
28312831
currentHookNameInDev = 'useTransition';
28322832
warnInvalidHookAccess();
28332833
mountHookTypesDev();
@@ -2972,7 +2972,7 @@ if (__DEV__) {
29722972
updateHookTypesDev();
29732973
return updateDeferredValue(value);
29742974
},
2975-
useTransition(): [(() => void) => void, boolean] {
2975+
useTransition(): [boolean, (() => void) => void] {
29762976
currentHookNameInDev = 'useTransition';
29772977
warnInvalidHookAccess();
29782978
updateHookTypesDev();
@@ -3118,7 +3118,7 @@ if (__DEV__) {
31183118
updateHookTypesDev();
31193119
return rerenderDeferredValue(value);
31203120
},
3121-
useTransition(): [(() => void) => void, boolean] {
3121+
useTransition(): [boolean, (() => void) => void] {
31223122
currentHookNameInDev = 'useTransition';
31233123
warnInvalidHookAccess();
31243124
updateHookTypesDev();

‎packages/react-reconciler/src/ReactInternalTypes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ export type Dispatcher = {|
313313
): void,
314314
useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
315315
useDeferredValue<T>(value: T): T,
316-
useTransition(): [(() => void) => void, boolean],
316+
useTransition(): [boolean, (() => void) => void],
317317
useMutableSource<Source, Snapshot>(
318318
source: MutableSource<Source>,
319319
getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,

‎packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1511,7 +1511,7 @@ describe('ReactHooks', () => {
15111511
];
15121512

15131513
if (__EXPERIMENTAL__) {
1514-
const useTransitionHelper = () => React.useTransition({timeoutMs: 1000});
1514+
const useTransitionHelper = () => React.useTransition();
15151515
const useDeferredValueHelper = () =>
15161516
React.useDeferredValue(0, {timeoutMs: 1000});
15171517

0 commit comments

Comments
 (0)
⚡