React Element Identity

React preserves or replaces component instances based largely on element type and position or key identity. Understanding identity explains when state is retained, reset, or moved during reconciliation.

During reconciliation, React compares the element tree produced by the current render with the previous tree. If React considers an element to have the same identity, it can reuse the existing component instance and preserve its state rather than creating a fresh instance.

Element type is a major part of identity. For example, rendering `<Counter />` in the same position from one render to the next allows React to preserve that component's state. Replacing it with a different component type at that position causes the previous component to be removed and the new one to mount.

Keys provide identity for elements in collections. A stable key lets React associate an item with the corresponding previous item even when the collection changes order. Using an item's array index as a key can cause state to become associated with the wrong item when items are inserted, removed, or reordered.

Position also matters. Two elements of the same type rendered at different positions are separate instances. Conversely, changing the surrounding structure can change which position React associates with a component, potentially causing its state to reset.

A useful practical rule is to treat `type + position` as the basic identity for ordinary elements and `key` as an explicit identity override within a sibling set. When identity changes, React generally unmounts the old instance and mounts a new one.

Key points

• Same type and identity usually means state is preserved.
• Changing the component type at an identity position causes the old instance to unmount.
• Keys identify siblings in collections and should be stable when item identity matters.
• Array indexes are risky keys when a list can be reordered, inserted into, or filtered.
• Changing identity intentionally is a common way to reset component state.

Interview questions

Why are array indexes often a poor choice for React keys?

An index identifies an item's current position rather than the item itself. If an item is inserted, removed, or moved, later items can receive different indexes. React may then associate existing component state with a different logical item. A stable identifier from the data is usually more appropriate when item identity matters.

When does React preserve a component's state?

React generally preserves state when the same component identity remains at the same position in the rendered tree. The element type is a major part of that identity. For list children, keys also determine which previous item corresponds to which current item. If identity changes, React can remove the old instance and create a new one.

Why does changing a component's key reset its state?

A key participates in the identity React uses for sibling elements. When the key changes, React treats the element as a different instance rather than the continuation of the previous keyed instance. The old instance is removed and the new one is mounted. Its state therefore starts from its initial value.

What is the difference between a re-render and a remount?

A re-render runs rendering logic again for an existing component instance and normally preserves its state. A remount means the previous instance is removed and a new instance is created. The new instance receives its initial state rather than inheriting the old instance's state. Changing type or key can cause a remount.