RFC: warn when returning different hooks on subsequent renders

packages/react-reconciler/src/ReactFiberHooks.js

@@ -54,6 +54,39 @@ type UpdateQueue<S, A> = {
   eagerState: S | null,
 };
 
+type HookType = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+
+const StateHook = 0;
+const ReducerHook = 1;
+const ContextHook = 2;
+const RefHook = 3;
+const EffectHook = 4;
+const LayoutEffectHook = 5;
+const CallbackHook = 6;
+const MemoHook = 7;
+const ImperativeHandleHook = 8;
+const DebugValueHook = 9;
+
+const HookDevNames = [
+  'useState',
+  'useReducer',
+  'useContext',
+  'useRef',
+  'useEffect',
+  'useLayoutEffect',
+  'useCallback',
+  'useMemo',
+  'useImperativeHandle',
+  'useDebugValue',
+];
+
+let currentHookType: HookType | null = null;
+// the first instance of a hook mismatch in a component,
+// represented by a portion of it's stacktrace
+let currentHookMismatch = null;
+const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
+const hookMismatchedFibers = new PossiblyWeakSet();
+
 export type Hook = {
   memoizedState: any,
 
@@ -64,6 +97,10 @@ export type Hook = {
   next: Hook | null,
 };
 
+type HookDev = Hook & {
+  _debugType: HookType,
+};
+
 type Effect = {
   tag: HookEffectTag,
   create: () => mixed,
@@ -170,6 +207,92 @@ function areHookInputsEqual(
   return true;
 }
 
+// till we have String::padEnd, a small function to
+// right-pad strings with spaces till a minimum length
+function padEndSpaces(string: string, length: number) {
+  if (string.length >= length) {
+    return string;
+  } else {
+    return string + ' ' + new Array(length - string.length).join(' ');
+  }
+}
+
+function flushHookMismatchWarnings() {
+  // we'll show the diff of the low level hooks,
+  // and a stack trace so the dev can locate where
+  // the first mismatch is coming from
+  if (__DEV__) {
+    if (
+      currentHookMismatch &&
+      !hookMismatchedFibers.has(((currentlyRenderingFiber: any): Fiber))
+    ) {
+      let componentName = getComponentName(
+        ((currentlyRenderingFiber: any): Fiber).type,
+      );
+      hookMismatchedFibers.add(((currentlyRenderingFiber: any): Fiber));
+      const hookStackDiff = [];
+      let current = firstCurrentHook;
+      let previousOrder = [];
+      while (current !== null) {
+        previousOrder.push(HookDevNames[((current: any): HookDev)._debugType]);
+        current = current.next;
+      }
+      let workInProgress = firstWorkInProgressHook;
+      let nextOrder = [];
+      while (workInProgress !== null) {
+        nextOrder.push(
+          HookDevNames[((workInProgress: any): HookDev)._debugType],
+        );
+        workInProgress = workInProgress.next;
+      }
+      // some bookkeeping for formatting the output table
+      const columnLength = Math.max.apply(
+        null,
+        previousOrder
+          .map(hook => hook.length)
+          .concat('   Previous render'.length),
+      );
+
+      let hookStackHeader =
+        padEndSpaces('   Previous render', columnLength) + '    Next render\n';
+      const hookStackWidth = hookStackHeader.length;
+      hookStackHeader += '   ' + new Array(hookStackWidth - 2).join('-');
+      let hookStackFooter = '   ' + new Array(hookStackWidth - 2).join('^');
+
+      const hookStackLength = Math.max(previousOrder.length, nextOrder.length);
+      for (let i = 0; i < hookStackLength; i++) {
+        hookStackDiff.push(
+          padEndSpaces(i + 1 + '. ', 3) +
+            padEndSpaces(previousOrder[i], columnLength) +
+            ' ' +
+            nextOrder[i],
+        );
+        if (previousOrder[i] !== nextOrder[i]) {
+          break;
+        }
+      }
+      warning(
+        false,
+        'React has detected a change in the order of Hooks called by %s. ' +
+          'This will lead to bugs and errors if not fixed. ' +
+          'For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
+          '%s\n' +
+          '%s\n' +
+          '%s\n' +
+          'The first Hook type mismatch occured at:\n' +
+          '%s\n\n' +
+          'This error occurred in the following component:',
+        componentName,
+        hookStackHeader,
+        hookStackDiff.join('\n'),
+        hookStackFooter,
+        currentHookMismatch,
+      );
+    }
+    currentHookMismatch = null;
+  }
+}
+
 export function renderWithHooks(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -221,6 +344,7 @@ export function renderWithHooks(
           getComponentName(Component),
         );
       }
+      flushHookMismatchWarnings();
     }
   } while (didScheduleRenderPhaseUpdate);
 
@@ -281,6 +405,7 @@ export function resetHooks(): void {
   if (!enableHooks) {
     return;
   }
+  flushHookMismatchWarnings();
 
   // This is used to reset the state of this module when a component throws.
   // It's also called inside mountIndeterminateComponent if we determine the
@@ -299,34 +424,69 @@ export function resetHooks(): void {
   if (__DEV__) {
     currentHookNameInDev = undefined;
   }
-
   didScheduleRenderPhaseUpdate = false;
   renderPhaseUpdates = null;
   numberOfReRenders = -1;
 }
 
 function createHook(): Hook {
-  return {
-    memoizedState: null,
+  let hook: Hook = __DEV__
+    ? {
+        _debugType: ((currentHookType: any): HookType),
+        memoizedState: null,
 
-    baseState: null,
-    queue: null,
-    baseUpdate: null,
+        baseState: null,
+        queue: null,
+        baseUpdate: null,
 
-    next: null,
-  };
+        next: null,
+      }
+    : {
+        memoizedState: null,
+
+        baseState: null,
+        queue: null,
+        baseUpdate: null,
+
+        next: null,
+      };
+
+  return hook;
 }
 
 function cloneHook(hook: Hook): Hook {
-  return {
-    memoizedState: hook.memoizedState,
+  let nextHook: Hook = __DEV__
+    ? {
+        _debugType: ((currentHookType: any): HookType),
+        memoizedState: hook.memoizedState,
 
-    baseState: hook.baseState,
-    queue: hook.queue,
-    baseUpdate: hook.baseUpdate,
+        baseState: hook.baseState,
+        queue: hook.queue,
+        baseUpdate: hook.baseUpdate,
 
-    next: null,
-  };
+        next: null,
+      }
+    : {
+        memoizedState: hook.memoizedState,
+
+        baseState: hook.baseState,
+        queue: hook.queue,
+        baseUpdate: hook.baseUpdate,
+
+        next: null,
+      };
+
+  if (__DEV__) {
+    if (!currentHookMismatch) {
+      if (currentHookType !== ((hook: any): HookDev)._debugType) {
+        currentHookMismatch = new Error('tracer').stack
+          .split('\n')
+          .slice(4)
+          .join('\n');
+      }
+    }
+  }
+  return nextHook;
 }
 
 function createWorkInProgressHook(): Hook {
@@ -389,7 +549,10 @@ export function useContext<T>(
   observedBits: void | number | boolean,
 ): T {
   if (__DEV__) {
-    currentHookNameInDev = 'useContext';
+    currentHookNameInDev = HookDevNames[ContextHook];
+    currentHookType = ContextHook;
+    createWorkInProgressHook();
+    currentHookType = null;
   }
   // Ensure we're in a function component (class components support only the
   // .unstable_read() form)
@@ -401,7 +564,7 @@ export function useState<S>(
   initialState: (() => S) | S,
 ): [S, Dispatch<BasicStateAction<S>>] {
   if (__DEV__) {
-    currentHookNameInDev = 'useState';
+    currentHookNameInDev = HookDevNames[StateHook];
   }
   return useReducer(
     basicStateReducer,
@@ -417,11 +580,13 @@ export function useReducer<S, A>(
 ): [S, Dispatch<A>] {
   if (__DEV__) {
     if (reducer !== basicStateReducer) {
-      currentHookNameInDev = 'useReducer';
+      currentHookNameInDev = HookDevNames[ReducerHook];
     }
   }
+  currentHookType = reducer === basicStateReducer ? StateHook : ReducerHook;
   let fiber = (currentlyRenderingFiber = resolveCurrentlyRenderingFiber());
   workInProgressHook = createWorkInProgressHook();
+  currentHookType = null;
   let queue: UpdateQueue<S, A> | null = (workInProgressHook.queue: any);
   if (queue !== null) {
     // Already have a queue, so this is an update.
@@ -600,7 +765,9 @@ function pushEffect(tag, create, destroy, deps) {
 
 export function useRef<T>(initialValue: T): {current: T} {
   currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
+  currentHookType = RefHook;
   workInProgressHook = createWorkInProgressHook();
+  currentHookType = null;
   let ref;
 
   if (workInProgressHook.memoizedState === null) {
@@ -620,7 +787,7 @@ export function useLayoutEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    currentHookNameInDev = 'useLayoutEffect';
+    currentHookNameInDev = HookDevNames[LayoutEffectHook];
   }
   useEffectImpl(UpdateEffect, UnmountMutation | MountLayout, create, deps);
 }
@@ -630,7 +797,7 @@ export function useEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    currentHookNameInDev = 'useEffect';
+    currentHookNameInDev = HookDevNames[EffectHook];
   }
   useEffectImpl(
     UpdateEffect | PassiveEffect,
@@ -642,7 +809,13 @@ export function useEffect(
 
 function useEffectImpl(fiberEffectTag, hookEffectTag, create, deps): void {
   currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
+  if (currentHookType !== ImperativeHandleHook) {
+    // it could be an ImperativeHandleHook
+    currentHookType =
+      fiberEffectTag === UpdateEffect ? EffectHook : LayoutEffectHook;
+  }
   workInProgressHook = createWorkInProgressHook();
+  currentHookType = null;
 
   const nextDeps = deps === undefined ? null : deps;
   let destroy = null;
@@ -673,14 +846,15 @@ export function useImperativeHandle<T>(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    currentHookNameInDev = 'useImperativeHandle';
+    currentHookNameInDev = HookDevNames[ImperativeHandleHook];
     warning(
       typeof create === 'function',
       'Expected useImperativeHandle() second argument to be a function ' +
         'that creates a handle. Instead received: %s.',
       create !== null ? typeof create : 'null',
     );
   }
+  currentHookType = ImperativeHandleHook;
   // TODO: If deps are provided, should we skip comparing the ref itself?
   const nextDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : [ref];
@@ -718,7 +892,7 @@ export function useDebugValue(
   formatterFn: ?(value: any) => any,
 ): void {
   if (__DEV__) {
-    currentHookNameInDev = 'useDebugValue';
+    currentHookNameInDev = HookDevNames[DebugValueHook];
   }
 
   // This will trigger a warning if the hook is used in a non-Function component.
@@ -734,10 +908,12 @@ export function useCallback<T>(
   deps: Array<mixed> | void | null,
 ): T {
   if (__DEV__) {
-    currentHookNameInDev = 'useCallback';
+    currentHookNameInDev = HookDevNames[CallbackHook];
   }
+  currentHookType = CallbackHook;
   currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
   workInProgressHook = createWorkInProgressHook();
+  currentHookType = null;
 
   const nextDeps = deps === undefined ? null : deps;
 
@@ -759,10 +935,12 @@ export function useMemo<T>(
   deps: Array<mixed> | void | null,
 ): T {
   if (__DEV__) {
-    currentHookNameInDev = 'useMemo';
+    currentHookNameInDev = HookDevNames[MemoHook];
   }
+  currentHookType = MemoHook;
   let fiber = (currentlyRenderingFiber = resolveCurrentlyRenderingFiber());
   workInProgressHook = createWorkInProgressHook();
+  currentHookType = null;
 
   const nextDeps = deps === undefined ? null : deps;