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.
facebook · Aug 28, 2020 · a8500be · a8500be
1 parent 4f5fb56
commit a8500be
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -603,6 +603,10 @@ const tests = {
           const [state4, dispatch2] = React.useReducer();
           const [state5, maybeSetState] = useFunnyState();
           const [state6, maybeDispatch] = useFunnyReducer();
+          const [startTransition1] = useTransition();
+          const [startTransition2, isPending2] = useTransition();
+          const [startTransition3] = React.useTransition();
+          const [startTransition4, isPending4] = React.useTransition();
           const mySetState = useCallback(() => {}, []);
           let myDispatch = useCallback(() => {}, []);
 
@@ -616,6 +620,10 @@ const tests = {
             setState2();
             dispatch1();
             dispatch2();
+            startTransition1();
+            startTransition2();
+            startTransition3();
+            startTransition4();
 
             // Dynamic
             console.log(state1);
@@ -624,6 +632,8 @@ const tests = {
             console.log(state4);
             console.log(state5);
             console.log(state6);
+            console.log(isPending2);
+            console.log(isPending4);
             mySetState();
             myDispatch();
 
@@ -634,6 +644,7 @@ const tests = {
             // Dynamic
             state1, state2, state3, state4, state5, state6,
             maybeRef1, maybeRef2,
+            isPending2, isPending4,
 
             // Not sure; assume dynamic
             mySetState, myDispatch,

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -400,6 +400,17 @@ export default {
               return false;
             }
           }
+        } else if (name === 'useTransition') {
+          if (
+            id.type === 'ArrayPattern' &&
+            Array.isArray(resolved.identifiers)
+          ) {
+            // Is first tuple value the same reference we're checking?
+            if (id.elements[0] === resolved.identifiers[0]) {
+              // Setter is stable.
+              return true;
+            }
+          }
         }
         // By default assume it's dynamic.
         return false;