Default props in React - Performance & Optimization

Performance: Default props

LOW IMPACT

This affects initial component rendering speed and bundle size by how default values are handled.

Setting default values for component props

React

function Button({ color = 'blue', label }) {
  return <button style={{ color }}>{label}</button>;
}

Default values are set once during destructuring, reducing repeated checks and improving render speed.

📈 Performance Gainreduces repeated style recalculations, improving LCP slightly

Setting default values for component props

React

function Button(props) {
  const color = props.color || 'blue';
  return <button style={{ color }}>{props.label}</button>;
}

Using inline defaulting inside the component causes the default logic to run on every render and can cause unnecessary recalculations.

📉 Performance Costtriggers repeated style recalculations on each render

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline fallback inside render	No extra DOM nodes	Multiple reflows if styles change	Higher paint cost due to recalculations	[X] Bad
ES6 default parameters	No extra DOM nodes	Single reflow	Lower paint cost	[OK] Good

Rendering Pipeline

Default props affect the JavaScript execution and style calculation stages by determining prop values before rendering.

→JavaScript Execution

→Style Calculation

→Layout

⚠️ BottleneckStyle Calculation due to repeated inline style recalculations if defaults are handled inefficiently

Core Web Vital Affected

LCP

This affects initial component rendering speed and bundle size by how default values are handled.

Optimization Tips

1Use ES6 default parameters to set default props in functional components.

2Avoid inline fallback logic inside render to prevent repeated recalculations.

3Do not use React.defaultProps for functional components as it is deprecated.

Performance Quiz - 3 Questions

Which method of setting default props in React functional components is best for performance?

A Using ES6 default parameters in the function signature

B Using inline fallback logic inside the render function

C Using React.defaultProps static property

D Setting defaults inside useEffect hook

DevTools: Performance

How to check: Record a performance profile while rendering the component. Look for repeated style recalculations or layout thrashing.

What to look for: Lower JavaScript execution time and fewer style recalculations indicate better default prop handling.