Error: Rendered more hooks than during the previous render.

[crzyjcky]

I am using Next.js.

In my code, if I place session check BEFORE any react hook, I will get an error:

  if (!session) {
    // Still loading
    return null
  }

   useEffect(() => { ... load some data ... })

Error: Rendered more hooks than during the previous render.

The way I get around it is by moving the useEffect before the session check, like this:

  useEffect(() => { ... load some data  ... })

  if (!session) {
    // Still loading
    return null
  }

The issue with this is that, the unauthenticated user can view the data by inspecting the rest calls, and we make unnecessary rest calls to the server.

How do we do early termination?

[joeyfigaro]

@crzyjcky

useEffect(() => {
  // still loading, early return
  if (!session) {
    return null
  }

  // load some data
  loadAllTheThingsPostHaste()
}, [session])

[alberto-torres]

That error, "Rendered more hooks than during the previous render", it's an error message that originates from React. It means that the number of useState, useEffect, or other React hooks you're using in your custom block's code is changing between renders.

How to fix it

The Problem

This usually happens when you use a React hook inside of a conditional statement (like an if statement), a loop, or a nested function. React requires that hooks be called in the exact same order on every render. When a conditional statement prevents a hook from running on a subsequent render, the order gets thrown off, causing this error.

The Solution

To fix this, you must ensure that all React hooks are called at the top level of your functional component, before any return statements or conditional logic.

Here's an example of bad code that will trigger the error:

// This is an incorrect way to use a hook
const MyCustomBlock = () => {
  const [data, setData] = useState(null);

  if (someCondition) {
    // DON'T DO THIS: This hook is conditional
    const [extraState, setExtraState] = useState(null);
  }

  return (
    <div>
      {/* Block content */}
    </div>
  );
};

And here is the correct way to structure the code:

// This is the correct way to use a hook
const MyCustomBlock = () => {
  // DO THIS: Call all hooks at the top level
  const [data, setData] = useState(null);
  const [extraState, setExtraState] = useState(null);

  if (someCondition) {
    // You can use the state here, but the hook is already declared
    // For example, update the state based on the condition
    // setExtraState('some value');
  }

  return (
    <div>
      {/* Block content */}
    </div>
  );
};