“Rendered fewer hooks than expected” fired in an error boundary component without hooks

[calebmer]

I’ve seen the “rendered fewer hooks than expected” invariant a couple times now pointing at a component rendered as a part of an error boundary that just caught an error when that component does not use hooks at all.

I’ve been able to fix this issue by un-commenting:

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

Lines 372 to 382 in 8af1f87

	// The following should have already been reset
	// currentHook = null;
	// workInProgressHook = null;
	// remainingExpirationTime = NoWork;
	// componentUpdateQueue = null;
	// didScheduleRenderPhaseUpdate = false;
	// renderPhaseUpdates = null;
	// numberOfReRenders = 0;
	// sideEffectTag = 0;

I haven’t been able to produce a minimal test-case yet 😣. I’m reporting anyway with the temporary fix that worked for me in case you have any insight on what a minimal test-case could be. I’ll update this issue if I keep running into the problem and I can create a minimal test-case.

[calebmer]

I ran into the issue again and was able to produce a small repro: https://codesandbox.io/s/intelligent-cannon-f6bqx

import React, { useState, useEffect } from "react";
import { render } from "react-dom";

function App() {
  return (
    <ErrorBoundary>
      <Thrower />
    </ErrorBoundary>
  );
}

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    return (
      <Wrapper>{this.state.hasError ? null : this.props.children}</Wrapper>
    );
  }
}

function Thrower() {
  const [shouldThrow, setShouldThrow] = useState(false);

  if (shouldThrow) {
    throw new Error("Throw!");
  }

  useEffect(() => {}, []);

  return <button onClick={() => setShouldThrow(true)}>Throw!</button>;
}

function Wrapper({ children }) {
  return children;
}

render(<App />, document.getElementById("root"));

Pressing the “throw” button results in the invariant:

Uncaught Invariant Violation: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    at invariant (https://f6bqx.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:55:15)
    at renderWithHooks (https://f6bqx.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:13010:28)

With a component stack of:

The above error occurred in the <Wrapper> component:
    in Wrapper (created by ErrorBoundary)
    in ErrorBoundary (created by App)
    in App

Which is weird since <Wrapper> has no hooks!

[gaearon]

Wanna look into fixing? Should be easy — there must be a missing resetHooks call somewhere.

Or maybe resetHooks doesn't reset everything we need.

[calebmer]

I looked into it, wrote a test, and discovered it’s fixed on master 🙂

The test is broken on 16.8.6, I didn’t bother bisecting to find the commit that fixed it. PR for the test: #15747.

[TedDriggs]

I thought I was seeing this in 16.9, but it turns out we were on react@16.9.0 and react-dom@16.8.6, and both need to be updated for this to work.