JIYIK CN >

When we use the useState hook conditionally or after a condition that may return a value, we get the error “React hook 'useState' is called conditionally”. To fix the error, you need to move all React hooks above any condition that may return a value.

The following is an example of how the error occurs.

import React, {useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  if (count > 0) {
    return <h1>Count is greater than 0</h1>;
  }

  // React Hook "useState" is called conditionally.
  //React Hooks must be called in the exact same order
  // in every component render. Did you accidentally call
  // a React Hook after an early return?
  const [message, setMessage] = useState('');

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</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 React, {useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

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

  // 任何可能返回的条件都必须低于所有钩子
  if (count > 0) {
    return <h1>Count is greater than 0</h1>;
  }

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</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 should never call hooks conditionally.

import React, {useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  if (count === 0) {
    // React Hook "useState" is called conditionally.
    // React Hooks must be called in the exact same order in every component render.
    const [message, setMessage] = useState('');
  }


  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

The above code snippet will result in an error because we are conditionally calling the second useState hook.

This is not allowed because the number of hooks and the order of hook calls must be the same when re-rendering our function component.

To fix this error, we have to move the useState call to the top level instead of calling the hook conditionally.

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 hook state between multiple useState calls.