Skip to content

Commit 9b972e5

Browse files
rickhanloniirickhanlonii
committed
Flip tuple order of useTransition
1 parent cdb6b4c commit 9b972e5

File tree

15 files changed

+58
-61
lines changed

15 files changed

+58
-61
lines changed

‎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: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -255,9 +255,14 @@ export default {
255255
}
256256
}
257257
} else if (name === 'useTransition') {
258-
if (id.type === 'ArrayPattern' && isArray(resolved.identifiers)) {
259-
// Is first tuple value the same reference we're checking?
260-
if (id.elements[0] === resolved.identifiers[0]) {
258+
// Only consider second value in initializing tuple stable.
259+
if (
260+
id.type === 'ArrayPattern' &&
261+
id.elements.length === 2 &&
262+
Array.isArray(resolved.identifiers)
263+
) {
264+
// Is second tuple value the same reference we're checking?
265+
if (id.elements[1] === resolved.identifiers[0]) {
261266
// Setter is stable.
262267
return true;
263268
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ function useMutableSource<Source, Snapshot>(
265265
return value;
266266
}
267267

268-
function useTransition(): [(() => void) => void, boolean] {
268+
function useTransition(): [boolean, (() => void) => void] {
269269
// useTransition() composes multiple hooks internally.
270270
// Advance the current hook index the same number of times
271271
// so that subsequent hooks have the right memoized state.
@@ -276,7 +276,7 @@ function useTransition(): [(() => void) => void, boolean] {
276276
stackError: new Error(),
277277
value: undefined,
278278
});
279-
return [callback => {}, false];
279+
return [false, callback => {}];
280280
}
281281

282282
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
@@ -467,12 +467,12 @@ function useDeferredValue<T>(value: T): T {
467467
return value;
468468
}
469469

470-
function useTransition(): [(callback: () => void) => void, boolean] {
470+
function useTransition(): [boolean, (callback: () => void) => void] {
471471
resolveCurrentlyRenderingComponent();
472472
const startTransition = callback => {
473473
callback();
474474
};
475-
return [startTransition, false];
475+
return [false, startTransition];
476476
}
477477

478478
function useOpaqueIdentifier(): OpaqueIDType {

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1723,27 +1723,27 @@ function startTransition(setPending, callback) {
17231723
}
17241724
}
17251725

1726-
function mountTransition(): [(() => void) => void, boolean] {
1726+
function mountTransition(): [boolean, (() => void) => void] {
17271727
const [isPending, setPending] = mountState(false);
17281728
// The `start` method never changes.
17291729
const start = startTransition.bind(null, setPending);
17301730
const hook = mountWorkInProgressHook();
17311731
hook.memoizedState = start;
1732-
return [start, isPending];
1732+
return [isPending, start];
17331733
}
17341734

1735-
function updateTransition(): [(() => void) => void, boolean] {
1735+
function updateTransition(): [boolean, (() => void) => void] {
17361736
const [isPending] = updateState(false);
17371737
const hook = updateWorkInProgressHook();
17381738
const start = hook.memoizedState;
1739-
return [start, isPending];
1739+
return [isPending, start];
17401740
}
17411741

1742-
function rerenderTransition(): [(() => void) => void, boolean] {
1742+
function rerenderTransition(): [boolean, (() => void) => void] {
17431743
const [isPending] = rerenderState(false);
17441744
const hook = updateWorkInProgressHook();
17451745
const start = hook.memoizedState;
1746-
return [start, isPending];
1746+
return [isPending, start];
17471747
}
17481748

17491749
let isUpdatingOpaqueValueInRenderPhase = false;
@@ -2283,7 +2283,7 @@ if (__DEV__) {
22832283
mountHookTypesDev();
22842284
return mountDeferredValue(value);
22852285
},
2286-
useTransition(): [(() => void) => void, boolean] {
2286+
useTransition(): [boolean, (() => void) => void] {
22872287
currentHookNameInDev = 'useTransition';
22882288
mountHookTypesDev();
22892289
return mountTransition();
@@ -2407,7 +2407,7 @@ if (__DEV__) {
24072407
updateHookTypesDev();
24082408
return mountDeferredValue(value);
24092409
},
2410-
useTransition(): [(() => void) => void, boolean] {
2410+
useTransition(): [boolean, (() => void) => void] {
24112411
currentHookNameInDev = 'useTransition';
24122412
updateHookTypesDev();
24132413
return mountTransition();
@@ -2531,7 +2531,7 @@ if (__DEV__) {
25312531
updateHookTypesDev();
25322532
return updateDeferredValue(value);
25332533
},
2534-
useTransition(): [(() => void) => void, boolean] {
2534+
useTransition(): [boolean, (() => void) => void] {
25352535
currentHookNameInDev = 'useTransition';
25362536
updateHookTypesDev();
25372537
return updateTransition();
@@ -2656,7 +2656,7 @@ if (__DEV__) {
26562656
updateHookTypesDev();
26572657
return rerenderDeferredValue(value);
26582658
},
2659-
useTransition(): [(() => void) => void, boolean] {
2659+
useTransition(): [boolean, (() => void) => void] {
26602660
currentHookNameInDev = 'useTransition';
26612661
updateHookTypesDev();
26622662
return rerenderTransition();
@@ -2792,7 +2792,7 @@ if (__DEV__) {
27922792
mountHookTypesDev();
27932793
return mountDeferredValue(value);
27942794
},
2795-
useTransition(): [(() => void) => void, boolean] {
2795+
useTransition(): [boolean, (() => void) => void] {
27962796
currentHookNameInDev = 'useTransition';
27972797
warnInvalidHookAccess();
27982798
mountHookTypesDev();
@@ -2931,7 +2931,7 @@ if (__DEV__) {
29312931
updateHookTypesDev();
29322932
return updateDeferredValue(value);
29332933
},
2934-
useTransition(): [(() => void) => void, boolean] {
2934+
useTransition(): [boolean, (() => void) => void] {
29352935
currentHookNameInDev = 'useTransition';
29362936
warnInvalidHookAccess();
29372937
updateHookTypesDev();
@@ -3071,7 +3071,7 @@ if (__DEV__) {
30713071
updateHookTypesDev();
30723072
return rerenderDeferredValue(value);
30733073
},
3074-
useTransition(): [(() => void) => void, boolean] {
3074+
useTransition(): [boolean, (() => void) => void] {
30753075
currentHookNameInDev = 'useTransition';
30763076
warnInvalidHookAccess();
30773077
updateHookTypesDev();

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1723,27 +1723,27 @@ function startTransition(setPending, callback) {
17231723
}
17241724
}
17251725

1726-
function mountTransition(): [(() => void) => void, boolean] {
1726+
function mountTransition(): [boolean, (() => void) => void] {
17271727
const [isPending, setPending] = mountState(false);
17281728
// The `start` method never changes.
17291729
const start = startTransition.bind(null, setPending);
17301730
const hook = mountWorkInProgressHook();
17311731
hook.memoizedState = start;
1732-
return [start, isPending];
1732+
return [isPending, start];
17331733
}
17341734

1735-
function updateTransition(): [(() => void) => void, boolean] {
1735+
function updateTransition(): [boolean, (() => void) => void] {
17361736
const [isPending] = updateState(false);
17371737
const hook = updateWorkInProgressHook();
17381738
const start = hook.memoizedState;
1739-
return [start, isPending];
1739+
return [isPending, start];
17401740
}
17411741

1742-
function rerenderTransition(): [(() => void) => void, boolean] {
1742+
function rerenderTransition(): [boolean, (() => void) => void] {
17431743
const [isPending] = rerenderState(false);
17441744
const hook = updateWorkInProgressHook();
17451745
const start = hook.memoizedState;
1746-
return [start, isPending];
1746+
return [isPending, start];
17471747
}
17481748

17491749
let isUpdatingOpaqueValueInRenderPhase = false;
@@ -2283,7 +2283,7 @@ if (__DEV__) {
22832283
mountHookTypesDev();
22842284
return mountDeferredValue(value);
22852285
},
2286-
useTransition(): [(() => void) => void, boolean] {
2286+
useTransition(): [boolean, (() => void) => void] {
22872287
currentHookNameInDev = 'useTransition';
22882288
mountHookTypesDev();
22892289
return mountTransition();
@@ -2407,7 +2407,7 @@ if (__DEV__) {
24072407
updateHookTypesDev();
24082408
return mountDeferredValue(value);
24092409
},
2410-
useTransition(): [(() => void) => void, boolean] {
2410+
useTransition(): [boolean, (() => void) => void] {
24112411
currentHookNameInDev = 'useTransition';
24122412
updateHookTypesDev();
24132413
return mountTransition();
@@ -2531,7 +2531,7 @@ if (__DEV__) {
25312531
updateHookTypesDev();
25322532
return updateDeferredValue(value);
25332533
},
2534-
useTransition(): [(() => void) => void, boolean] {
2534+
useTransition(): [boolean, (() => void) => void] {
25352535
currentHookNameInDev = 'useTransition';
25362536
updateHookTypesDev();
25372537
return updateTransition();
@@ -2656,7 +2656,7 @@ if (__DEV__) {
26562656
updateHookTypesDev();
26572657
return rerenderDeferredValue(value);
26582658
},
2659-
useTransition(): [(() => void) => void, boolean] {
2659+
useTransition(): [boolean, (() => void) => void] {
26602660
currentHookNameInDev = 'useTransition';
26612661
updateHookTypesDev();
26622662
return rerenderTransition();
@@ -2792,7 +2792,7 @@ if (__DEV__) {
27922792
mountHookTypesDev();
27932793
return mountDeferredValue(value);
27942794
},
2795-
useTransition(): [(() => void) => void, boolean] {
2795+
useTransition(): [boolean, (() => void) => void] {
27962796
currentHookNameInDev = 'useTransition';
27972797
warnInvalidHookAccess();
27982798
mountHookTypesDev();
@@ -2931,7 +2931,7 @@ if (__DEV__) {
29312931
updateHookTypesDev();
29322932
return updateDeferredValue(value);
29332933
},
2934-
useTransition(): [(() => void) => void, boolean] {
2934+
useTransition(): [boolean, (() => void) => void] {
29352935
currentHookNameInDev = 'useTransition';
29362936
warnInvalidHookAccess();
29372937
updateHookTypesDev();
@@ -3071,7 +3071,7 @@ if (__DEV__) {
30713071
updateHookTypesDev();
30723072
return rerenderDeferredValue(value);
30733073
},
3074-
useTransition(): [(() => void) => void, boolean] {
3074+
useTransition(): [boolean, (() => void) => void] {
30753075
currentHookNameInDev = 'useTransition';
30763076
warnInvalidHookAccess();
30773077
updateHookTypesDev();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ export type Dispatcher = {|
311311
): void,
312312
useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
313313
useDeferredValue<T>(value: T): T,
314-
useTransition(): [(() => void) => void, boolean],
314+
useTransition(): [boolean, (() => void) => void],
315315
useMutableSource<Source, Snapshot>(
316316
source: MutableSource<Source>,
317317
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)