Skip to content

Commit a8500be

Browse files
authored
Add startTransition as a known stable method (#19720)
The `startTransition` method returned from `useTransition` is a stable method, like `dispatch` or `setState`. You should not have to specify it as a hook dependency.
1 parent 4f5fb56 commit a8500be

File tree

2 files changed

+22
-0
lines changed

2 files changed

+22
-0
lines changed

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

+11
Original file line numberDiff line numberDiff line change
@@ -603,6 +603,10 @@ const tests = {
603603
const [state4, dispatch2] = React.useReducer();
604604
const [state5, maybeSetState] = useFunnyState();
605605
const [state6, maybeDispatch] = useFunnyReducer();
606+
const [startTransition1] = useTransition();
607+
const [startTransition2, isPending2] = useTransition();
608+
const [startTransition3] = React.useTransition();
609+
const [startTransition4, isPending4] = React.useTransition();
606610
const mySetState = useCallback(() => {}, []);
607611
let myDispatch = useCallback(() => {}, []);
608612
@@ -616,6 +620,10 @@ const tests = {
616620
setState2();
617621
dispatch1();
618622
dispatch2();
623+
startTransition1();
624+
startTransition2();
625+
startTransition3();
626+
startTransition4();
619627
620628
// Dynamic
621629
console.log(state1);
@@ -624,6 +632,8 @@ const tests = {
624632
console.log(state4);
625633
console.log(state5);
626634
console.log(state6);
635+
console.log(isPending2);
636+
console.log(isPending4);
627637
mySetState();
628638
myDispatch();
629639
@@ -634,6 +644,7 @@ const tests = {
634644
// Dynamic
635645
state1, state2, state3, state4, state5, state6,
636646
maybeRef1, maybeRef2,
647+
isPending2, isPending4,
637648
638649
// Not sure; assume dynamic
639650
mySetState, myDispatch,

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

+11
Original file line numberDiff line numberDiff line change
@@ -400,6 +400,17 @@ export default {
400400
return false;
401401
}
402402
}
403+
} else if (name === 'useTransition') {
404+
if (
405+
id.type === 'ArrayPattern' &&
406+
Array.isArray(resolved.identifiers)
407+
) {
408+
// Is first tuple value the same reference we're checking?
409+
if (id.elements[0] === resolved.identifiers[0]) {
410+
// Setter is stable.
411+
return true;
412+
}
413+
}
403414
}
404415
// By default assume it's dynamic.
405416
return false;

0 commit comments

Comments
 (0)