Resetting state docs improvement

[KennethKinLum]

Over here: https://react.dev/learn/preserving-and-resetting-state#option-1-rendering-a-component-in-different-positions about resetting a state, just because a line is drawn to the right, now the Counter becomes a "right" child?

And then, just because the line is drawn to the left, now the Counter becomes a "left" child?

The diagram is:

In reality, it is just "children" nodes. So if you have one child with a line drawn to the left, it doesn't make it a "left" child.

Likewise, if you have one child with a line drawn to the right, it doesn't make it a "right" child.

To some degree, it dumbs down the programmers.

The truth is:

For those three situations in the diagram:

1. First child is Counter, and second child is false. (isPlayerA && whatever becomes false if isPlayer is false). There should be a solid line going to a false as a second child.
2. First child is false, and second child is Counter. There should be a solid line going down to the first child which is false.
3. The third case is just like (1).

And then, the rule of React is, the false will not be rendered. But the tree in fact has a false, for the "tree structure" to be "different".

If I am not mistaken, this "tree" is composed, and compared to the previous "tree", for React to decide whether to change something in the actual DOM. This "current" tree and "previous tree", is the idea of Virtual DOM.

So the concepts should be set straight here.

[rickhanlonii]

I think the diagram is fine, adding false would clutter it and confuse it with too many details. But maybe we could clarify how false is taking up one of the positions. I think if you read deeply and compare the code from the previous example, you can deduce it though.

@gaearon is it worth adding a note that explains that false takes up one of the positions/slots, and false isn't rendered? Or did you intentionally omit that?

[rickhanlonii]

Related: https://github.com/reactjs/react.dev/issues/6288

[KennethKinLum]

I think the diagram is fine, adding false would clutter it and confuse it with too many details. But maybe we could clarify how false is taking up one of the positions. I think if you read deeply and compare the code from the previous example, you can deduce it though.

@gaearon is it worth adding a note that explains that false takes up one of the positions/slots, and false isn't rendered? Or did you intentionally omit that?

because without the false, it is conceptually incorrect. My past coworkers tend to have flaky understanding of React. Ask them why and they say, "do this and this will happen", and you ask them the reasoning behind it, they can't say it, or reply with "it is what it is".

If there is an easy way to present things as close as the truth, I think we should do it. Presenting approximation or inaccurate information only deepen tech debt. Person A cannot understand it so well, and then discusses with Person B, and things get more and more vague and inaccurate.

Even the line down below in Option 2: "You might have seen keys when rendering lists. Keys aren’t just for lists!

Explaining thing with exclamation point was never the method in the past or in formal text. It is more proper as "React has a special rule that, the position of the component in the tree, together with the key, determines whether it is a component that should have its states reset". It was explained as such further down, but explaining things with exclamation point does not seem like a good start.

[Scramjet911]

I think the diagram is fine, adding false would clutter it and confuse it with too many details. But maybe we could clarify how false is taking up one of the positions. I think if you read deeply and compare the code from the previous example, you can deduce it though.

@gaearon is it worth adding a note that explains that false takes up one of the positions/slots, and false isn't rendered? Or did you intentionally omit that?

imo having a note that says false takes up one of the positions would help since new devs would not expect a falsy value to take up one of the positions on the tree.