Combination of componentDidCatch and hooks throws "Should have a queue. This is likely a bug in React."

[timkendrick]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

If a component with hooks throws an error in its render function after the hooks have been defined, and that render error is caught via a componentDidCatch in a parent component, any subsequent components will have their hook order jumbled up on the next render.

This results in the app crashing with an "Uncaught Invariant Violation: Should have a queue. This is likely a bug in React. Please file an issue." error (or different messages depending on the specific hooks used)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/34mvmoln65

(once loaded, open the dev tools console and click the 'Trigger re-render' button)

Relevant source:

function App(props) {
  const [, setCounter] = React.useState(0);
  return (
    <div>
      <ErrorHandler>
        <ErrorThrower />
      </ErrorHandler>
      <StatefulComponent />
      <button onClick={() => setCounter(value => value + 1)}>
        Trigger re-render
      </button>
    </div>
  );
}

function ErrorThrower() {
  React.useMemo(() => undefined, []);
  if (true) {
    throw new Error("!!!");
  }
  return <p>[Error component]</p>;
}

function StatefulComponent() {
  React.useState(null);
  return <p>[Stateful component]</p>;
}

class ErrorHandler extends React.Component {
  ...
  componentDidCatch(error) {
    ...
  }
}

What is the expected behavior?

The app should not crash, seeing as the componentDidCatch() ought to catch the render error and allow the rest of the app to render as normal

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This will presumably affect all versions of React that include the current Hooks implementation (v16.8 onwards)

[timkendrick]

Fans of irony might enjoy that I came across this error when I was building a demo page for an alternative hooks API that isn't susceptible to 'rules of hooks' ordering errors

[Drakota]

Correct me if I'm wrong, since you initialized your hooks in this order:

useState (from App)
useMemo
useState (from StatefulComponent)

And since Hooks expect to be in the same order between refresh, by catching the Error thrown by ErrorThrower, you return this instead:

if (this.state.error) {
   return <p>[Handled error: {this.state.error.message}]</p>;
}

The rendered hooks are now different:

useState (from App)
useState (from StatefulComponent)

This is basically a problem of Hooks being conditionally rendered.
https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
So is this really a bug due to React of just an inherent problem with hooks?
Don't use hooks in Components that may throw errors?

[Jokcy]

@Drakota I guess the doc mean you should keep hooks order in one component not between components. If we need to consider about hooks order between then once we unmount one component we will get error.

[Jokcy]

I guess I find the reason of this bug. While ErrorThrower throw the error, the renderWithHooks function break down, so we can't reach the line of code workInProgressHook = null reset after we finish render FunctionComponent. So the workInProgressHook stay useMemo when render StatefulComponent.

Maybe I can do a PR to fix this.

[2012mjm]

I need the error handling with componentDidCatch feature in the hook.
Is there a alternate for error handling?

[imjuanleonard]

Up! These hooks need componentDidCatch before adopted pretty please

[njacob1001]

What about this?

const MyComponent = () =>{
  const things = undefined

  try {
    return <div>
    <h1>Hello</h1>
    {cosas.map(things => <span>{element}</span>)}
  </div>
  }catch(err) {
    return <strong>Something</strong>
  }
}

[eps1lon]

The reported issue is fixed starting with react@^16.9.0: https://codesandbox.io/s/staging-rain-kuqwn.