| > and why, for example, you can't use a hook inside an if branch Within the component functions's body, you may have many calls to the same hook, lets take useState() as an example. Each useState() returns a different state variable, that is kept track of in a cache outside the component function. On the first render, the state variables are created. On subsequent re-renders, the state variables are read from the cache. The cache is a simple array. It keeps track of, and identifies each individual state variable from it's index in the cache array. The first call to useState() gets slot 0 in the array, the second call gets slot 1 and so on and so forth.. For the tracking to work consistently, all calls to useState() within the function's body must also happen consistently. In the same order, every time. Having a useState call within a conditional "if" branch breaks that consistency. |