Merge branch 'master' of https://github.com/facebook/react into issue/f…

…acebook#19661
pfongkye · Aug 29, 2020 · 7174219 · 7174219
2 parents 8309b2d + a8500be
commit 7174219
Show file tree

Hide file tree

Showing 48 changed files with 1,608 additions and 2,062 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;

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -20,7 +20,6 @@ import type {
 } from 'react-reconciler/src/ReactInternalTypes';
 import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 
-import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberSuspenseConfig';
 import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 
 import ErrorStackParser from 'error-stack-parser';
@@ -62,10 +61,6 @@ type Hook = {
   next: Hook | null,
 };
 
-type TimeoutConfig = {|
-  timeoutMs: number,
-|};
-
 function getPrimitiveStackCache(): Map<string, Array<any>> {
   // This initializes a cache of all primitive hooks so that the top
   // most stack frames added by calling the primitive hook can be removed.
@@ -258,9 +253,7 @@ function useMutableSource<Source, Snapshot>(
   return value;
 }
 
-function useTransition(
-  config: SuspenseConfig | null | void,
-): [(() => void) => void, boolean] {
+function useTransition(): [(() => void) => void, boolean] {
   // useTransition() composes multiple hooks internally.
   // Advance the current hook index the same number of times
   // so that subsequent hooks have the right memoized state.
@@ -269,12 +262,12 @@ function useTransition(
   hookLog.push({
     primitive: 'Transition',
     stackError: new Error(),
-    value: config,
+    value: undefined,
   });
   return [callback => {}, false];
 }
 
-function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
+function useDeferredValue<T>(value: T): T {
   // useDeferredValue() composes multiple hooks internally.
   // Advance the current hook index the same number of times
   // so that subsequent hooks have the right memoized state.

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -1097,6 +1097,8 @@ describe('ReactDOMFiber', () => {
   });
 
   it('should not update event handlers until commit', () => {
+    spyOnDev(console, 'error');
+
     let ops = [];
     const handlerA = () => ops.push('A');
     const handlerB = () => ops.push('B');
@@ -1129,11 +1131,7 @@ describe('ReactDOMFiber', () => {
     class Click extends React.Component {
       constructor() {
         super();
-        expect(() => {
-          node.click();
-        }).toErrorDev(
-          'Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.',
-        );
+        node.click();
       }
       render() {
         return null;
@@ -1183,6 +1181,16 @@ describe('ReactDOMFiber', () => {
     // Any click that happens after commit, should invoke A.
     click();
     expect(ops).toEqual(['A']);
+
+    if (__DEV__) {
+      // TODO: this warning shouldn't be firing in the first place if user didn't call it.
+      const errorCalls = console.error.calls.count();
+      for (let i = 0; i < errorCalls; i++) {
+        expect(console.error.calls.argsFor(i)[0]).toMatch(
+          'unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.',
+        );
+      }
+    }
   });
 
   it('should not crash encountering low-priority tree', () => {