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.
Andrew Clark committed
Aug 28, 2020 at 18:44 UTC
a8500be893acbaaecb44bced3fbdcd2d0c356ef7
2 files changed
+22
packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+11
@@ -603,6 +603,10 @@ const tests = {
603
const [state4, dispatch2] = React.useReducer();
604
const [state5, maybeSetState] = useFunnyState();
605
const [state6, maybeDispatch] = useFunnyReducer();
606
+ const [startTransition1] = useTransition();
607
+ const [startTransition2, isPending2] = useTransition();
608
+ const [startTransition3] = React.useTransition();
609
+ const [startTransition4, isPending4] = React.useTransition();
610
const mySetState = useCallback(() => {}, []);
611
let myDispatch = useCallback(() => {}, []);
612
@@ -616,6 +620,10 @@ const tests = {
620
setState2();
621
dispatch1();
622
dispatch2();
623
+ startTransition1();
624
+ startTransition2();
625
+ startTransition3();
626
+ startTransition4();
627
628
// Dynamic
629
console.log(state1);
@@ -624,6 +632,8 @@ const tests = {
632
console.log(state4);
633
console.log(state5);
634
console.log(state6);
635
+ console.log(isPending2);
636
+ console.log(isPending4);
637
mySetState();
638
myDispatch();
639
@@ -634,6 +644,7 @@ const tests = {
644
// Dynamic
645
state1, state2, state3, state4, state5, state6,
646
maybeRef1, maybeRef2,
647
+ isPending2, isPending4,
648
649
// Not sure; assume dynamic
650
mySetState, myDispatch,
packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+11
@@ -400,6 +400,17 @@ export default {
400
return false;
401
}
402
}
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
+ }
414
}
415
// By default assume it's dynamic.
416
return false;