react render_warning ai_generated true

Warning: Encountered two children with the same key, `keyValue`. Keys should be unique so that components maintain their identity across updates.

ID: react/react-duplicate-key-warning

Also available as: JSON · Markdown
93%Fix Rate
95%Confidence
140Evidence
2021-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

Two or more sibling elements in a list have the same key prop. React uses keys for reconciliation; duplicates cause incorrect DOM updates, lost state, and stale UI.

generic

Workarounds

  1. 95% success Use a unique, stable identifier from the data as the key (e.g., database ID) 
    items.map(item => <Item key={item.id} data={item} />)

    Sources: https://react.dev/learn/rendering-lists#where-to-get-your-key

  2. 90% success Generate stable IDs with crypto.randomUUID() at data creation time, not at render time 
    When adding items: setItems([...items, { id: crypto.randomUUID(), ...newItem }])

    Sources: https://react.dev/learn/rendering-lists

Dead Ends

Common approaches that don't work:

  1. Use array index as the key 55% fail

    Index keys cause state bugs when items are reordered, inserted, or deleted. React cannot distinguish moved items from new ones.

  2. Use Math.random() or Date.now() as key 90% fail

    Generates a new key every render, destroying and recreating all components each time. Kills performance and loses all component state.

Error Chain

Leads to:
Preceded by:
Frequently confused with: