Move Hook mismatch warning to first mismatch site (#14720)

* Move Hook mismatch warning to first mismatch site
Allows us to localize the warning logic in one place.
* Nit

Author: acdlite

packages/react-reconciler/src/ReactFiberHooks.js

@@ -98,10 +98,6 @@ type HookType =
 |'useImperativeHandle'
 |'useDebugValue';
 
-// the first instance of a hook mismatch in a component,
-// represented by a portion of its stacktrace
-letcurrentHookMismatchInDev=null;
-
 letdidWarnAboutMismatchedHooksForComponent;
 if(__DEV__){
  didWarnAboutMismatchedHooksForComponent =newSet();
@@ -180,6 +176,56 @@ const RE_RENDER_LIMIT = 25;
 // In DEV, this is the name of the currently executing primitive hook
 letcurrentHookNameInDev: ?HookType=null;
 
+functionwarnOnHookMismatchInDev(){
+if(__DEV__){
+constcomponentName=getComponentName(
+((currentlyRenderingFiber: any): Fiber).type,
+);
+if(!didWarnAboutMismatchedHooksForComponent.has(componentName)){
+didWarnAboutMismatchedHooksForComponent.add(componentName);
+
+constsecondColumnStart=22;
+
+lettable='';
+letprevHook: HookDev|null=(firstCurrentHook: any);
+letnextHook: HookDev|null=(firstWorkInProgressHook: any);
+letn=1;
+while(prevHook!==null&&nextHook!==null){
+constoldHookName=prevHook._debugType;
+constnewHookName=nextHook._debugType;
+
+letrow=`${n}. ${oldHookName}`;
+
+// Extra space so second column lines up
+// lol @ IE not supporting String#repeat
+while(row.length<secondColumnStart){
+row+=' ';
+}
+
+row+=newHookName+'\n';
+
+table+=row;
+prevHook=(prevHook.next: any);
+nextHook=(nextHook.next: any);
+n++;
+}
+
+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'+
+' Previous render Next render\n'+
+' -------------------------------\n'+
+'%s'+
+' ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n',
+componentName,
+table,
+);
+}
+}
+}
+
 functionthrowInvalidHookError(){
 invariant(
 false,
@@ -229,90 +275,6 @@ function areHookInputsEqual(
 returntrue;
 }
 
-functionflushHookMismatchWarnings(){
-// 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(currentHookMismatchInDev!==null){
-letcomponentName=getComponentName(
-((currentlyRenderingFiber: any): Fiber).type,
-);
-if(!didWarnAboutMismatchedHooksForComponent.has(componentName)){
-didWarnAboutMismatchedHooksForComponent.add(componentName);
-consthookStackDiff=[];
-letcurrent=firstCurrentHook;
-constpreviousOrder=[];
-while(current!==null){
-previousOrder.push(((current: any): HookDev)._debugType);
-current=current.next;
-}
-letworkInProgress=firstWorkInProgressHook;
-constnextOrder=[];
-while(workInProgress!==null){
-nextOrder.push(((workInProgress: any): HookDev)._debugType);
-workInProgress=workInProgress.next;
-}
-// some bookkeeping for formatting the output table
-constcolumnLength=Math.max.apply(
-null,
-previousOrder
-.map(hook=>hook.length)
-.concat(' Previous render'.length),
-);
-
-constpadEndSpaces=(string,length)=>{
-if(string.length>=length){
-returnstring;
-}
-returnstring+' '+newArray(length-string.length).join(' ');
-};
-
-lethookStackHeader=
-((padEndSpaces(' Previous render',columnLength): any): string)+
-' Next render\n';
-consthookStackWidth=hookStackHeader.length;
-hookStackHeader+=' '+newArray(hookStackWidth-2).join('-');
-consthookStackFooter=' '+newArray(hookStackWidth-2).join('^');
-
-consthookStackLength=Math.max(
-previousOrder.length,
-nextOrder.length,
-);
-for(leti=0;i<hookStackLength;i++){
-hookStackDiff.push(
-((padEndSpaces(i+1+'. ',3): any): string)+
-((padEndSpaces(previousOrder[i],columnLength): any): string)+
-' '+
-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,
-currentHookMismatchInDev,
-);
-}
-currentHookMismatchInDev=null;
-}
-}
-}
-
 export functionrenderWithHooks(
 current: Fiber|null,
 workInProgress: Fiber,
@@ -378,7 +340,6 @@ export function renderWithHooks(
 }
 
 if(__DEV__){
-flushHookMismatchWarnings();
 currentHookNameInDev=null;
 }
 
@@ -437,10 +398,6 @@ export function bailoutHooks(
 }
 
 exportfunctionresetHooks(): void{
-if(__DEV__){
-flushHookMismatchWarnings();
-}
-
 // We can assume the previous dispatcher is always this one, since we set it
 // at the beginning of the render phase and there's no re-entrancy.
 ReactCurrentDispatcher.current=ContextOnlyDispatcher;
@@ -537,18 +494,6 @@ function updateWorkInProgressHook(): Hook {
 next: null,
 };
 
-if(__DEV__){
-(newHook: any)._debugType=(currentHookNameInDev: any);
-if(currentHookMismatchInDev===null){
-if(currentHookNameInDev!==((currentHook: any): HookDev)._debugType){
-currentHookMismatchInDev=newError('tracer').stack
-.split('\n')
-.slice(4)
-.join('\n');
-}
-}
-}
-
 if(workInProgressHook===null){
 // This is the first hook in the list.
 workInProgressHook=firstWorkInProgressHook=newHook;
@@ -557,6 +502,13 @@ function updateWorkInProgressHook(): Hook {
 workInProgressHook=workInProgressHook.next=newHook;
 }
 nextCurrentHook=currentHook.next;
+
+if(__DEV__){
+(newHook: any)._debugType=(currentHookNameInDev: any);
+if(currentHookNameInDev!==((currentHook: any): HookDev)._debugType){
+warnOnHookMismatchInDev();
+}
+}
 }
 returnworkInProgressHook;
 }

packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js

@@ -1159,7 +1159,7 @@ describe('ReactHooks', () => {
 });
 
 it('warns on using differently ordered hooks on subsequent renders',()=>{
-const{useState, useReducer}=React;
+const{useState, useReducer, useRef}=React;
 functionuseCustomHook(){
 returnuseState(0);
 }
@@ -1172,6 +1172,9 @@ describe('ReactHooks', () => {
 useReducer((s,a)=>a,0);
 useCustomHook(0);
 }
+// This should not appear in the warning message because it occurs after
+// the first mismatch
+constref=useRef(null);
 returnnull;
 /* eslint-enable no-unused-vars */
 }
@@ -1185,7 +1188,8 @@ describe('ReactHooks', () => {
 ' Previous render Next render\n'+
 ' -------------------------------\n'+
 '1. useReducer useState\n'+
-' ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^',
+' ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\n'+
+' in App (at **)',
 ]);
 
 // further warnings for this component are silenced