React key
A React key is a stable identifier assigned to an element in a rendered collection so React can distinguish sibling elements across updates.
Build a Frontend Web Framework (From Scratch)
A key prop is a virtual-node property that uniquely identifies an item or component so its corresponding interface node can be tracked across updates.
- How it is used
- Identifies list items across virtual-DOM updates so reconciliation can distinguish surviving components and detect moved elements.
- How deep it goes
- Implements component and element equality checks using tags and keys, then removes keys before passing props or setting DOM attributes.
- Examples
- Uses counter removal, swapped list elements, index keys, and duplicate keys to expose correct and ambiguous identity matches.
- What you can do after
- Build it from scratch by comparing keyed virtual nodes and withholding keys from rendered props and attributes.
Read how Build a Frontend Web Framework (From Scratch) explains React key →
React Quickly, Second Edition
A key property is a special React property that identifies an element among its siblings so React can track and reuse elements during list rendering.
- How it is used
- Supports reliable list rendering by letting React track sibling elements across renders.
- How deep it goes
- Explains reuse, uniqueness, index pitfalls, warnings, and keyed Fragments, but stops short of deeper reconciliation internals.
- Examples
- Uses keyed select options, keyed dog-breed definition entries, and a website menu mapped from objects.
- What you can do after
- Apply React keys to mapped JSX and choose stable unique identifiers for list elements.
D3.js in Action, Third Edition
A React key prop identifies an item in a component collection so React can track changes between renders.
- How it is used
- Identifies repeated chart components so React can track DOM updates when visualization data changes.
- How deep it goes
- Demonstrates unique keys in mapped circles and axis ticks, without detailing React’s reconciliation internals.
- Examples
- Uses framework circles keyed with circle-${framework.id} and axis tick groups keyed with tick values.
- What you can do after
- Build repeated React visualization elements with unique keys and map data into trackable components.
Read how D3.js in Action, Third Edition explains React key →
Related concepts
- keyed listused by · A list-rendering pattern in which items are identified by keys so that their corresponding interface nodes can be tracked across updates.
- indexingcontrasts with · Indexing is the organization or use of positions, keys, or lookup structures to identify and retrieve selected data or elements.
- reconciliationused by · Reconciliation is the process of comparing related states, records, or outputs to identify differences and, when needed, resolve them or bring them into agreement.
- unique identifierconfigures · A unique identifier is a value or name that distinguishes an entity or record from others within a defined scope or namespace.
- Reactuses · React is an open-source JavaScript library for building user interfaces from declarative, reusable components.
- nodeconfigures · A node is a discrete element in a structured system, such as a graph, tree, network, or distributed system, representing an entity, state, component, or computational unit and potentially connected to other elements.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.