Using props in JSX in React - Performance & Optimization

Performance: Using props in JSX

MEDIUM IMPACT

Using props in JSX affects how React components render and update, impacting interaction responsiveness and rendering speed.

Passing props to child components in React

React

function Parent() {
  const data = React.useMemo(() => ({ name: 'Alice' }), []);
  return <Child info={data} />;
}

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

Using useMemo ensures the prop object reference stays stable, preventing needless re-renders of Child.

📈 Performance GainReduces re-renders to only when data changes, improving INP and CPU efficiency.

Passing props to child components in React

React

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

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

Creating a new object inline for props causes Child to re-render every time Parent renders, even if data is unchanged.

📉 Performance CostTriggers unnecessary re-renders, increasing CPU usage and slowing interaction responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline new object props	Multiple due to re-renders	Multiple reflows triggered	Higher paint cost due to frequent updates	[X] Bad
Memoized stable props	Minimal DOM updates	Single or minimal reflows	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

When props change, React compares new and old props to decide if a component should re-render. Unstable prop references cause React to re-render components unnecessarily, increasing layout and paint work.

→Reconciliation

→Render

→Layout

→Paint

⚠️ BottleneckReconciliation stage due to frequent unnecessary re-renders

Core Web Vital Affected

INP

Using props in JSX affects how React components render and update, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Avoid creating new object or array literals inline when passing props.

2Use React.useMemo or React.useCallback to memoize props and callbacks.

3Use React DevTools Profiler to identify unnecessary re-renders.

Performance Quiz - 3 Questions

What causes unnecessary re-renders when passing props in React?

A Using React.memo on child components

B Passing primitive values like strings or numbers

C Passing new object or array literals inline as props

D Avoiding props altogether

DevTools: React DevTools Profiler

How to check: Record a profiling session while interacting with the component, then inspect which components re-render and how often.

What to look for: Look for unnecessary re-renders of child components when props have not meaningfully changed.