Preserving and Resetting State

This is the summarization of React docs

• React uses tree structures to manage and model the UI you make.
• React makes UI trees from your JSX.
• Then React DOM updates the browser DOM elements to match that UI tree

?? React preserves a component’s state for as long as it’s being rendered at its position in the UI tree. If it gets removed, or a different component gets rendered at the same position, React discards its state.

when you render a different component in the same position, it resets the state of its entire subtree

?? if you want to preserve the state between re-renders, the structure of your tree needs to “match up” from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree.

Specifying a key tells React to use the key itself as part of the position, instead of their order within the parent.

Recap

• React keeps state for as long as the same component is rendered at the same position.
• State is not kept in JSX tags. It’s associated with the tree position in which you put that JSX.
• You can force a subtree to reset its state by giving it a different key.
• Don’t nest component definitions, or you’ll reset state by accident.