Keys concept in React - Performance & Optimization

Performance: Keys concept

HIGH IMPACT

This concept affects how React updates the UI efficiently by identifying which items changed, added, or removed in lists.

Rendering a list of items with React

React

const listItems = items.map(item => <li key={item.id}>{item.name}</li>);

Using a unique stable key like item.id lets React track items precisely, updating only changed elements.

📈 Performance GainMinimizes reflows and repaints; improves INP by reducing unnecessary DOM operations.

Rendering a list of items with React

React

const listItems = items.map((item, index) => <li key={index}>{item.name}</li>);

Using index as key causes React to reuse DOM nodes incorrectly when list order changes, triggering unnecessary re-renders and DOM updates.

📉 Performance CostTriggers multiple reflows and repaints on list reorder; increases INP by causing slower UI updates.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Index as key	Many unnecessary node replacements	Multiple reflows on reorder	High paint cost due to full updates	[X] Bad
Unique stable key	Minimal DOM changes	Single reflow per actual change	Low paint cost with targeted updates	[OK] Good

Rendering Pipeline

React uses keys during the reconciliation phase to match old and new elements. Proper keys reduce the number of DOM operations needed to update the UI.

→Reconciliation

→DOM Update

→Layout

→Paint

⚠️ BottleneckReconciliation and DOM Update stages are most expensive when keys are unstable or missing.

Core Web Vital Affected

INP

This concept affects how React updates the UI efficiently by identifying which items changed, added, or removed in lists.

Optimization Tips

1Always use unique and stable keys for list items in React.

2Never use array index as key if list order can change.

3Proper keys reduce unnecessary DOM updates and improve interaction speed.

Performance Quiz - 3 Questions

Why should you avoid using array index as a key in React lists?

A Because it can cause unnecessary DOM updates when list items reorder

B Because it increases bundle size

C Because it breaks CSS styling

D Because it disables event handlers

DevTools: React DevTools and Chrome Performance panel

How to check: Use React DevTools to inspect list components and verify keys; record a performance profile in Chrome while interacting with list reorder.

What to look for: Look for fewer component re-renders and minimal DOM mutations in React DevTools; check for lower scripting and rendering times in Performance panel.