? React Keys & Re-renders

? Quick Overview

In React, the key prop uniquely identifies elements in a list. It helps React efficiently update, insert, or remove items during re-renders. Correct key usage improves performance and prevents unexpected UI behavior.

? Key Concepts

• Keys help React track list items across renders
• Stable keys preserve component state
• Changing a key forces React to recreate a component
• Incorrect keys can cause UI bugs and flickering

? Syntax & Theory

When rendering lists, React compares old and new virtual DOM trees. Keys allow React to match elements correctly and reuse DOM nodes when possible. Without keys, React may unnecessarily re-render items.

// Rendering a list without keys (inefficient)
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li>{todo.text}</li>
))}
</ul>
);
}

// Rendering a list with stable keys (recommended)
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
}

⚙️ How Keys Affect Re-renders

• If the key changes, React unmounts and remounts the element
• If the key stays the same, React updates only changed props
• Keys help preserve local state like input values

// Changing the key forces input reset
function InputBox({ id }) {
return <input key={id} placeholder="Type here..." />;
}

? Choosing Good Keys

• Always use unique and stable identifiers
• Avoid using array indexes as keys
• Indexes break when items are reordered or deleted
• Keys must remain consistent for the same item

// Bad vs good key usage
{todos.map((todo, index) => (
<li key={index}>{todo.text}</li>
))}

{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}