Minified React error #310; use the non-minified dev environment for full errors and additional helpful warnings using Chrome through Selenium in React

This error message...

"Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings"

...implies that you are using the minified production build of React which avoids sending down full error messages in order to reduce the number of bytes sent over the wire.

Analysis

As per the documentation in Error Decoder it is highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original text of the error.

However, the full text of the error you just encountered is:

Rendered more hooks than during the previous render.

Solution

Hooks are JavaScript functions. React requires hooks to be called in the same order with every render. You need to follow two rules when using them as follows:

• Only Call Hooks at the Top Level: Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

• Only Call Hooks from React Functions: Don’t call Hooks from regular JavaScript functions. Instead, you can:

  • Call Hooks from React function components.
  • Call Hooks from custom Hooks (we’ll learn about them on the next page).

By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.

References

You can find a couple of relevant discussions in:

• Uncaught Invariant Violation: Rendered more hooks than during the previous render
• Rendered more hooks than during the previous render. when posting form data with React Hooks
• Rendered more hooks than during the previous render
• "Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database

tl; dr

How to fix React Error: Rendered fewer hooks than expected