Categories
React Answers

How to fix Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks?

Spread the love

Sometimes, we want to fix Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks.

In this article, we’ll look at how to fix Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks.

How to fix Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks?

To fix Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks, we should put hook calls at the top level of a component.

For instance, we write

const { useState } = React;

function App() {
  const [name, setName] = useState("Mary");
  const [age, setAge] = useState(16);
  const [license, setLicense] = useState("A123456");

  return (
    <div>
      Name:{" "}
      <input
        value={name}
        onChange={(e) => {
          setName(e.target.value);
        }}
      />
      <br />
      Age:{" "}
      <input
        value={age}
        type="number"
        onChange={(e) => {
          setAge(+e.target.value);
        }}
      />
      {age >= 16 && (
        <span>
          <br />
          Driver License:{" "}
          <input
            value={license}
            onChange={(e) => {
              setLicense(e.target.value);
            }}
          />
        </span>
      )}
    </div>
  );
}

to call useState at the top of the App component only.

Then React can call all the hooks in order.

Conclusion

To fix Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks, we should put hook calls at the top level of a component.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.