Preserving and Resetting State in React

State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree.

React makes UI trees from your JSX/TSX. Then React DOM updates the browser DOM elements to match that UI tree.

When you assign state to a component, you may assume that the state resides within the component itself. However, in reality, React manages and stores the state. Each piece of state is associated with the corresponding component based on its position in the UI tree.

Take a look at the code snippet below:

There is only one Counter tsx, but it rendered at two different positions. The state of the Counter component is tied to its place in the UI tree. So they each have their own state (6 & 9).

Delete the component

However, if you stop rendering the component (for example, by deleting it), its state will be completely removed. This occurs because when React unmounts a component, it also destroys its state.

Checkout React interactive demo. In the demo, When you tick or clear the checkbox, the counter state does not get reset. Whether isFancy is true or false, you always have a Counter as the first child of the div returned from the root App component:

Pitfall

Remember that it’s the position in the UI tree—not in the JSX markup—that matters to React!

You should also aware that...

Different components at the same position will reset state.

Here, you switch between different component types (Counter -> p) at the same position. React removed the Counter from the UI tree and destroyed its state.

To sum up

If you aim to maintain the state between re-renders, it is essential for the structure of your component tree to remain consistent from one render to another. If the structure changes, React will remove the component from the tree and, consequently, destroy its associated state.

By default, React preserves the state of a component as long as it remains in the same position within its parent. This behavior aligns with the typical use case and is generally desired. However, there are situations where you might need to reset a component's state intentionally.

Option 1: Rendering a component in different positions

Checkout this interactive demo

This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it’s not a hassle to render both separately in the JSX.

Option 2: Resetting state with a key

Checkout this interactive demo

By specifying a key, React utilizes the key itself as a means of identifying the component's position, rather than relying on their order within the parent. Consequently, even if you render them in the same location in JSX, React recognizes them as two distinct counters. As a result, they will never share state since their keys serve as unique identifiers in the virtual DOM.

In React, each piece of state is associated with the corresponding component based on its position in the UI tree. To maintain state between re-renders, it is crucial for the structure of your component tree to remain consistent across renders. If the structure changes, React will remove the component from the tree and, consequently, destroy its associated state. This is a breif summary of the article. If you want to know more, please check out the React official documentation. Hope you enjoy it!

• React Documentation