From React documentation:

Always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

React is relying on the order of the Hook calls to know which local state matches which Hook call. That is why it’s important that the Hooks are not called inside loops, conditions, or nested functions.

Also this rule ensures that the Hooks are called only from React function components or custom Hooks so that the stateful logic of a component is clearly visible from its source code.

Noncompliant Code Example

function Profile() {
  const [ordersCount, setOrdersCount] = useState(0);
  if (ordersCount !== 0) {
    useEffect(function() { // Noncompliant, this Hook is called conditionally
      localStorage.setItem('ordersData', ordersCount);
    });
  }

  return <div>{ getName() }</div>
}

function getName() {
  const [name] = useState('John'); // Noncompliant, this Hook is called from simple JavaScript function
  return name;
}

Compliant Solution

function Profile() {
  const [ordersCount, setOrdersCount] = useState(0);
  useEffect(function() {
    if (ordersCount !== 0) {
      localStorage.setItem('ordersData', ordersCount);
    }
  });

  const [name] = useState('John');
  return <div>{ name }</div>
}

See

• Rules of Hooks - React documentation