Conditional component rendering in React - Performance & Optimization

Performance: Conditional component rendering

MEDIUM IMPACT

This affects how quickly the page shows relevant content and how much work the browser does updating the UI.

Showing or hiding UI parts based on user actions

React

function MyComponent({ show }) {
  return (
    <div>
      {show ? <ComponentC /> : <ComponentA />}
    </div>
  );
}

Only renders the component needed based on condition, reducing DOM nodes and updates.

📈 Performance GainSingle reflow and paint, improving LCP and INP.

Showing or hiding UI parts based on user actions

React

function MyComponent({ show }) {
  return (
    <div>
      <ComponentA />
      <ComponentB />
      {show ? <ComponentC /> : null}
    </div>
  );
}

Always rendering ComponentA and ComponentB even if not needed wastes resources and triggers unnecessary DOM updates.

📉 Performance CostTriggers multiple reflows and paints for unused components, increasing INP and LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Render all components regardless of condition	High (many nodes)	Multiple reflows	High paint cost	[X] Bad
Render components conditionally based on need	Low (minimal nodes)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Conditional rendering controls which components enter the DOM. When conditions change, React updates the virtual DOM and applies minimal changes to the real DOM, affecting layout and paint stages.

→Virtual DOM Diffing

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages due to DOM node additions or removals.

Core Web Vital Affected

LCP, INP

This affects how quickly the page shows relevant content and how much work the browser does updating the UI.

Optimization Tips

1Render only components that are visible or needed to reduce DOM size.

2Avoid rendering hidden components that still consume layout and paint resources.

3Use conditional rendering to improve Largest Contentful Paint and Interaction to Next Paint.

Performance Quiz - 3 Questions

What is the main performance benefit of conditional component rendering in React?

A Reduces the number of DOM nodes and layout recalculations

B Increases the bundle size by loading more components

C Triggers more paint events to update the UI

D Blocks rendering until all components are loaded

DevTools: Performance

How to check: Record a performance profile while toggling the condition. Look for layout and paint events triggered by component changes.

What to look for: Fewer layout and paint events indicate better conditional rendering performance.