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

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)

[2012mjm]

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

[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.