What are props in React - Performance Impact

Performance: What are props

MEDIUM IMPACT

Props affect how components receive data and can impact rendering performance when changed frequently or deeply nested.

Passing data to child components in React

React

function Parent() {
  const data = { name: 'Alice', age: 30 };
  return <Child info={data} />;
}

function Child({ info }) {
  return <div>{info.name}</div>;
}

Passing objects directly avoids unnecessary serialization and parsing.

📈 Performance GainReduces render blocking and improves interaction responsiveness.

Passing data to child components in React

React

function Parent() {
  const data = { name: 'Alice', age: 30 };
  return <Child info={JSON.stringify(data)} />;
}

function Child({ info }) {
  const parsed = JSON.parse(info);
  return <div>{parsed.name}</div>;
}

Serializing and parsing props causes extra work and blocks rendering.

📉 Performance CostBlocks rendering for extra milliseconds due to JSON operations on each render.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing serialized props	Extra JS parsing	Triggers re-render	Higher paint cost	[X] Bad
Passing direct props	Minimal JS work	Only necessary re-render	Lower paint cost	[OK] Good

Rendering Pipeline

Props flow from parent to child components triggering React's render process. Changes in props cause React to re-render affected components and update the DOM.

→JavaScript Execution

→Virtual DOM Diffing

→DOM Update

→Paint

⚠️ BottleneckVirtual DOM Diffing and DOM Update when props change frequently or deeply.

Core Web Vital Affected

INP

Props affect how components receive data and can impact rendering performance when changed frequently or deeply nested.

Optimization Tips

1Avoid creating new object or array props on every render.

2Pass only the data child components need to minimize re-renders.

3Use React.memo or useMemo to prevent unnecessary updates.

Performance Quiz - 3 Questions

What happens if you pass new object literals as props on every render?

A It improves performance by caching props automatically.

B It causes React to re-render child components even if data is unchanged.

C It prevents any re-rendering of child components.

D It reduces JavaScript execution time.

DevTools: React DevTools and Performance panel

How to check: Use React DevTools to inspect component props and check if components re-render unnecessarily. Use Performance panel to record and analyze render times.

What to look for: Look for frequent re-renders caused by prop changes and long scripting times blocking interaction.