Keys in Lists
📚 Why do Lists Need Keys? When React renders a list, it needs a way to identify each item so it knows what changed between renders. Keys are unique identifiers you provide (usually the item's id). Without keys, React compares items by position, causing bugs when items are reordered, added, or remo…
Appy Says…
React warns about missing keys constantly. But what actually IS a key and why does React care so much? Keys are how React tracks which item is which in a dynamic list — and without them, things can go seriously wrong.
What is the key prop?
The key prop is a special React prop that uniquely identifies each element in a list. React uses keys to efficiently update the DOM when list items are added, removed, or reordered.
- •
{items.map(item => <Card key={item.id} {...item} />)} - •Keys must be unique among siblings (not globally unique)
- •Keys must be stable — the same item should always get the same key
- •Keys are not passed as a prop —
props.keyis always undefined - •Use item's unique ID from your database, not the array index
- •Index as key: ok for static lists; bad for dynamic/reorderable lists
Think of it like player name tags in a Minecraft server
In a multiplayer server, each player has a unique name tag. When players join or leave, you track them by name — not by their position in the list. React keys work the same way: they're stable identity tags React uses to track each element.
How It Works
- •1. On re-render, React builds the new virtual DOM list
- •2. For each new element, it looks for a matching key in the old list
- •3. Match found: update in-place (no unnecessary DOM destroy+recreate)
- •4. Match not found: create new DOM element
- •5. Old key gone: destroy that DOM element
- •6. Without keys: React falls back to comparing by position — causes bugs with state/animation
Real-World Examples
- •Chat message list: key={message.id} — messages can arrive in any order
- •Todo list: key={todo.id} — items can be deleted/reordered without state mixup
- •Product grid: key={product.sku}
- •Applaa lesson list: key={lesson.id} — clicking a lesson preserves its internal state correctly
Key Facts
- •Using array index as key is fine ONLY if the list never reorders, filters, or prepends items
- •React 18 in strict mode intentionally double-renders — missing keys cause visible bugs here
- •Keys can be strings or numbers
- •The key warning is the most common React console warning for beginners — fix it with a real ID
Watch Out!
Never use Math.random() as a key — a new random key on every render tells React every item is new, destroying and recreating all DOM elements. Use stable IDs from your data instead.
Remember
key={item.id} — use a stable, unique ID from your data. Never use Math.random(). Array index is ok only for static, non-reorderable lists.
What You Learned
- •Keys identify list items across renders so React can update efficiently instead of recreating everything
- •Use stable unique IDs (from data); avoid array index in dynamic lists
- •Unlocks: bug-free dynamic lists, correct animation on add/remove, efficient rendering
Key Facts
- →Using array index as key is fine ONLY if the list never reorders, filters, or prepends items
- →React 18 in strict mode intentionally double-renders — missing keys cause visible bugs here
- →Keys can be strings or numbers
- →The key warning is the most common React console warning for beginners — fix it with a real ID
Real-World Examples
Remember
key={item.id} — use a stable, unique ID from your data. Never use Math.random(). Array index is ok only for static, non-reorderable lists.
Quick Quiz
Keys should be?