Props as read-only data in React - Performance & Optimization

Performance: Props as read-only data

MEDIUM IMPACT

This concept affects how React components update and render, impacting interaction responsiveness and rendering speed.

Passing data to child components without causing unnecessary re-renders

React

function Child({ data }) {
  const newValue = 10; // Use local state or variables instead
  return <div>{newValue}</div>;
}

function Parent() {
  const info = { value: 5 };
  return <Child data={info} />;
}

Props remain immutable, so React can optimize rendering and avoid unnecessary updates.

📈 Performance GainReduces unnecessary re-renders, improving interaction responsiveness (INP).

Passing data to child components without causing unnecessary re-renders

React

function Child({ data }) {
  data.value = 10; // Mutating props directly
  return <div>{data.value}</div>;
}

function Parent() {
  const info = { value: 5 };
  return <Child data={info} />;
}

Mutating props directly causes React to lose track of changes, leading to unpredictable rendering and potential bugs.

📉 Performance CostTriggers extra renders and can cause inconsistent UI updates, increasing INP latency.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Mutating props inside child	Causes extra DOM updates	Multiple reflows if state changes triggered	Higher paint cost due to unnecessary updates	[X] Bad
Treating props as read-only	Minimal DOM updates	Single reflow when needed	Lower paint cost with optimized rendering	[OK] Good

Rendering Pipeline

When props are treated as read-only, React can efficiently compare previous and new props to decide if a component should re-render, minimizing layout recalculations and paints.

→Reconciliation

→Render

→Commit

⚠️ BottleneckReconciliation stage when props are mutated causing React to re-render unnecessarily

Core Web Vital Affected

INP

This concept affects how React components update and render, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Never mutate props inside a React component; treat them as read-only.

2Use local state or callbacks to handle changes instead of modifying props.

3Immutable props help React optimize rendering and improve interaction responsiveness.

Performance Quiz - 3 Questions

Why should props be treated as read-only in React components?

A To enable direct mutation of parent state from child

B To allow React to optimize rendering and avoid unnecessary re-renders

C To increase the number of DOM updates for better UI feedback

D To reduce the size of the JavaScript bundle

DevTools: React DevTools and Performance panel

How to check: Use React DevTools to inspect component props and state; use Performance panel to record and analyze re-renders and interaction delays.

What to look for: Look for unnecessary re-renders in React DevTools and long interaction delays or multiple layout recalculations in Performance panel.