Bug: react got runtime error when user breaks the rules of hooks, instead of telling user what to do about react

[li-jia-nan]

Mark

[c0dedance]

Mark

[gsathya]

React does track the type of hook called (along with their order):

react/packages/react-reconciler/src/ReactFiberHooks.js

Lines 316 to 327 in d29f7d9

	function updateHookTypesDev(): void {
	if (__DEV__) {
	const hookName = ((currentHookNameInDev: any): HookType);
	if (hookTypesDev !== null) {
	hookTypesUpdateIndexDev++;
	if (hookTypesDev[hookTypesUpdateIndexDev] !== hookName) {
	warnOnHookMismatchInDev(hookName);
	}
	}
	}
	}

This check should (and does) catch the error when user breaks the rules of react. This is what I see in the console:

Warning: React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. useRef                     useRef
3. useRef                     useRef
4. useEffect                  useRef
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Arguably there could be a case made for throwing and not just warning on hook type mismatch. I don't know the context here on why we chose to warn, @acdlite do you remember?

EDIT: Found the original PR (#14585), but not a lot of context there either. I'm going to close as this is working mostly ok -- we do warn with the correct error.

[RexSkz]

Thanks for your reply. I look through the console and do see this warning message.

There are lots of console messages in my project. When this error occurs, the last few messages in console and the Webpack error overlay are Cannot read properties of undefined, leading me to wonder if it's a React bug... 😂

If this should remain "warning", maybe I'll find another way to let devs notice it.