React Hooks does not allow reordering of two sub-components? - reactjs

Question

This is somewhat of an in-depth question about React Hooks:
There is some writing about, the setState() returned from React Hook useState(), when we call it, it "sets an internal index to 0", so that next time, when that component is re-rendered, useState() know which is the first useState(), and which is the second useState(), etc.
Is that how it works? Because, what if Main Component has 2 sub-components, and sub-component 1 calls setState(), vs sub-component 2 calls setState(), then I don't think Main Component is called to re-rendered, and each setState() in sub-component 1 or 2 just set the internal index to 0? Then how can useState() know which is which?
To see that it is the case, we can see https://codesandbox.io/s/wizardly-wind-3f210?file=/src/App.js
So if we click on "Count 1", we can see in the console log that only Count 1 is re-rendered, and likewise, "Count 2" as well.
So then, it looks like the two sub-components can work independently (But how?)
However, if that is true, if we reverse the order of sub-component 1 and 2 if count 0 is odd or even, every thing should work fine, and the React Hooks doc does not say we can't do that.
This is how they are swapped:
{count0 % 2 === 0 ? (
<div>
<Count1 />
<Count2 />
</div>
) : (
<div>
<Count2 />
<Count1 />
</div>
)}
However, we can see in this demo: https://codesandbox.io/s/amazing-wescoff-ih3n3?file=/src/App.js
If we click on "Count 1" to increment the count to 6, and then now we click on "Count 0" to make it even and odd and even and odd, the two counters switch positions, and they are reset to 0.
So how does it work? It does not seem like it is as simple as setting the internal index to 0 when setState() is called. Or is it true that sub-component 1 knows its setState() should set the internal index to 1, and sub-component 2's setState() knows it should set the internal index to 2? Is that how it works? But then in that case, if we switch the two sub components, they should simply show swapped values instead of showing 0. How does it really work?

Answer 1

In a nutshell: React has a handful of 'native' hooks that are internally wired to React's bookkeeping. But React keeps a separate book for each and every component instance you happen to create. So you can't confuse React be switching the order of elements. You could mess up the bookkeeping though by changing the order of hooks used inside one single component, hence the "rules of hooks".
So by doing something like this you could probably produce a mess:
const HorribleExperiment = () => {
var firstState, secondState;
if (Math.random() > 0.5) {
const firstState = useState('first');
const secondState = useState('second');
} else {
const secondState = useState('second');
const firstState = useState('first');
}
const firstValue = firstState[0];
const setFirst = firstState[1];
const secondValue = secondState[0];
const setsecond = secondState[1];
return (
<div>
<div>the first value is {firstValue}</div>
<div>the second value is {secondValue}</div>
<input onChange={e => setFirst(e.target.value)} />
<input onChange={e => setSecond(e.target.value)} />
</div>
);
}

Answer 2

The rules of hooks regarding the order of hooks are applicable within a single component. A renderer is responsible for keeping track of hook calls, and since it also responsible for rendering components, it can track which hook calls correspond to which component instance.
The example isn't specific to hooks and their order in any way. It would be the same with class components as well. When a parent component is re-rendered, child components are remounted because they appear to be different component hierarchy, so their states are initial states on each remount.
If the order changes, they need to be tracked with a key:
{count0 % 2 === 0 ? (
<div>
<Count1 key={1} />
<Count2 key={2} />
</div>
) : (
<div>
<Count2 key={2} />
<Count1 key={1} />
</div>
)}