Drills Repository
24 Drills · All Belts · reconciliation-keys
What Scope Do React Keys Need?
React only uses keys to distinguish siblings within the same parent during reconciliation, not to provide global uniqueness across the application. Their purpose is to help React correctly preserve or reset state when sibling ordering changes.
Choosing Keys For List Items
Keys should be stable identifiers tied to the logical identity of the data item so React can correctly preserve and match components across renders. Using array index as a key is discouraged when the list can reorder, since the index does not track the item's actual identity across renders.
Rendering the Same Counter JSX Variable Twice
React associates a component's state with its position in the render tree, not with the JSX object or variable used to describe it. Here, reusing the same <Counter /> JSX variable twice still creates two separate tree positions, so each Counter instance gets its own isolated state.
Swapping Counters for Different Players
Keys participate in React's identity matching during reconciliation, so giving two elements different keys tells React they are different component instances even at the same tree position. Here, giving the Taylor and Sarah counters different key values makes React tear down one player's state and mount a fresh instance for the other whenever the scoreboard switches.
Chat Component Reused Across Recipients
React keeps a component's state intact as long as the same component type stays at the same tree position, and changing its props alone never recreates the instance or resets that state. Here, <Chat> stays mounted at the same position while only the contact prop changes, so the typed draft message remains attached to that same component instance.
Accessing key Via props.key
React reserves the key attribute for its own internal reconciliation bookkeeping, so unlike other JSX attributes, key is never forwarded into a component's props object. Because <Profile key={id} /> only sets the key that React tracks internally, the Profile component never receives it as props.key, and any identifier it needs, such as id, must be passed as a separate prop.
Fragment key requirement
JSX shorthand fragments (<>...</>) accept children but not attributes, so they cannot receive props such as key that React needs for list reconciliation. For keyed list items, the explicit <Fragment key={...}> form must be used instead of the shorthand syntax so each item still receives a stable key.
Frequent Re-Renders With An Uncontrolled Text Input
During reconciliation, React compares the new render output with the previous one and preserves DOM nodes when they represent the same element in the same position. Since the input itself did not change, React leaves the existing DOM node intact, including its current value.
React Keys In Rendered Lists
Keys help React identify which list item corresponds to which rendered component across rerenders, especially when items are inserted, removed, or reordered. Without stable keys, React falls back to comparing elements by position, which can misattribute state and DOM nodes when the list order changes.
Index Keys in a Reversed List
React matches existing child components during reconciliation using their keys, and index-based keys tie state to a position rather than to a specific item. When a contact list is reversed, this makes each contact's expanded state appear to belong to the wrong contact, a problem stable item IDs would prevent.
The Script That Refused to Reload
Next.js's Script component tracks which scripts are already injected and avoids re-injecting them on re-render for performance, so a changed src prop does not trigger a reload of the tag. Forcing React to treat the AdSlot's Script as a new element via a key prop tied to adUrl causes a genuine unmount and remount, reloading it with the new URL.
Changing the Key Prop on a Component
React treats a component's key as part of its identity, so changing that key anywhere in the tree tells React to treat it as a different component. Here, incrementing version changes Form's key, so clicking Reset makes React unmount the old Form instance and mount a brand new one with fresh state.