JIYIK CN >

When we use a hook after a condition that might return a value, we get the error “Rendered fewer hooks than expected. This may be caused by an accidental early return statement.” To fix the error, you need to move all React hooks above any condition that might return a value.

First, let's look at an example that produces this error

import {useEffect, useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

  // 可能在下面的钩子运行之前返回一个值
  if (counter > 0) {
    return <h1>Hello world</h1>;
  }

  // Rendered fewer hooks than expected.
  // This may be caused by an accidental early return statement
  const [message, setMessage] = useState('');

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Increment count</button>
    </div>
  );
}

The problem in your code snippet is - we use a second useState hook after the conditional that might return a value.

To fix this error, we can only call React hooks at the top level.

import {useEffect, useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

  // 将钩子移到可能返回的条件之上
  const [message, setMessage] = useState('');

  // 任何可能返回的条件都必须低于所有钩子
  if (counter > 0) {
    return <h1>Hello world</h1>;
  }

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Increment count</button>
    </div>
  );
}

We move the second useState hook above the conditional that might return a value.

This fixes the error since we have to make sure that the React hooks are called in the same order every time we render the component.

This means that we are not allowed to use hooks in loops, conditionals or nested functions.

We have to make sure that all React hooks in our component are called in the same order on every render.

We should never call hooks conditionally.

import {useEffect, useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

  if (counter > 0) {
    // Error - useEffect is called conditionally
    useEffect(() => {
      console.log('hello world');
    }, []);
  }

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Increment count</button>
    </div>
  );
}

The code snippet in the example will result in an error because the useEffect hook is called conditionally.

To fix this, we can move the if statement into the useEffect hook.

import {useEffect, useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    if (counter > 0) {
      console.log('hello world');
    }
  }, [counter]);

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Increment count</button>
    </div>
  );
}

Moving the if statement inside the hook helps because the hook is now top-level and has predictable behavior, allowing React to correctly preserve state between useState and useEffect calls.

As the documentation states:

• Only call hooks at the top level
• Do not call hooks in loops, conditionals, or nested functions
• Always use hooks at the top level of a React function, before any early returns
• Hooks are only called from React function components or custom hooks.

This helps React preserve the state of the hook between multiple useState and useEffect calls.

The error "Rendered fewer hooks than expected. This may be caused by an accidental early return statement" means that we rendered more hooks on the first render of the component than on re-renders. This is caused by conditionally returning before using the hook.

To fix the error, you need to make sure you move your hook to the top level of your component and put any conditionals that might return prematurely at the bottom.