Why Call React Hooks at the Top Level?

Question

I was reading the React-hooks concepts. I came through a rule which says Don't call React hooks inside conditions. Here they provided the explanation link.

function Form() {
  // 1. Use the name state variable
  const [name, setName] = useState('Mary');

  // 2. Use an effect for persisting the form
  useEffect(function persistForm() {
    localStorage.setItem('formData', name);
  });

  // 3. Use the surname state variable
  const [surname, setSurname] = useState('Poppins');

  // 4. Use an effect for updating the title
  useEffect(function updateTitle() {
    document.title = name + ' ' + surname;
  });

  // ...
}

I understood what they want to say, but I can not get the exact reason, like why I can't use useEffect in if-else block?

There is one more statement

So how does React know which state corresponds to which useState call?

The useState is different call every time and it can return new "[state, setState]" each time, so what is difficult here to know who called which useState?

Answer 1

It is not about who called which hook useXXXX(i.e useState, useEffect, etc). It is about how hooks are internally implemented and associated with each component. There are a lot of other problems which to solve React relies on the call order of the hooks.

From the docs Hooks FAQ section

How does React associate Hook calls with components?

There is an internal list of “memory cells” associated with each component. They’re just JavaScript objects where we can put some data. When you call a Hook like useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple useState() calls each get independent local state.

Internally hooks are implemented like a queue where each hook represents a node having reference to the next one. The internal structure might look something similar to this,

{
  memoizedState: 'a',
  next: {
    memoizedState: 'b',
    next: null
  }
}

Take the example of having 4 state variables by calling useState 4 times. With each hook call if the value has not been initialized(i.e on first render) it will initialize the value else read from the memory cell then moving to the next hook internally.

// 4 independent local state variables with their own "memory cell"
// nothing is called conditionally so the call order remains the same
// across renders
useState(1)   // 1st call 
useState(2)   // 2nd call
useState(3)   // 3rd call
useState(4)   // 4th call

useState(1)

if (condition) {   // if condition false hook call will be skipped
  useState(2)   
}

useState(3)   
useState(4)   

Now when you call a hook conditionally if the condition is false the hook call will be skipped. This means every subsequent hook call will shift by 1 in the call order resulting in failure to read state value or replacing an effect or many more hard to detect bugs.

So in general it is a bad idea to call any hook conditionally. Only call the hook in top-level(not inside condition, nested functions, or loops) which will help React to preserve the state of hooks for multiple hook calls.