Importance of keys in React - Performance Evidence

Performance: Importance of keys

HIGH IMPACT

This concept affects how React efficiently updates the UI by minimizing unnecessary DOM changes during re-renders.

Rendering a list of items that can change dynamically

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, minimizing DOM changes and reflows.

📈 Performance GainReduces reflows to only changed items, improving interaction speed and reducing layout thrashing.

Rendering a list of items that can change dynamically

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 extra re-renders and layout thrashing.

📉 Performance CostTriggers multiple reflows and repaints on list updates, increasing INP and causing slower UI response.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Index as key	More DOM node replacements	Multiple reflows on reorder	Higher paint cost due to layout thrashing	[X] Bad
Unique stable key	Minimal DOM updates	Single reflow for changed items	Lower paint cost with stable layout	[OK] Good

Rendering Pipeline

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

→Reconciliation

→Layout

→Paint

⚠️ BottleneckReconciliation stage when keys are unstable or duplicated

Core Web Vital Affected

INP

This concept affects how React efficiently updates the UI by minimizing unnecessary DOM changes during re-renders.

Optimization Tips

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

2Avoid using array indexes as keys when list order can change.

3Proper keys reduce DOM operations and improve interaction responsiveness.

Performance Quiz - 3 Questions

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

A Because it increases the bundle size

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

C Because it prevents React from rendering the list

D Because it disables event handlers

DevTools: React Developer Tools and Chrome Performance panel

How to check: Use React DevTools to inspect list keys and Chrome Performance to record UI updates during list changes.

What to look for: Look for fewer DOM mutations and shorter scripting times indicating efficient reconciliation.