← Back to Chapters

Rendering Performance Concepts

⚡ Rendering Performance Concepts

? Quick Overview

Rendering performance in React determines how fast and smoothly your UI updates when data changes. Understanding the rendering cycle helps prevent slow interfaces and unnecessary re-renders.

⚛️ Introduction

React apps thrive on efficient rendering. But as your component tree grows, redundant re-renders or complex UI updates can start to slow down performance.

To optimize effectively, you must first understand how rendering works in React and what factors influence it.

? Key Concepts

  • Virtual DOM
  • Reconciliation
  • Render & Commit phases
  • Re-render triggers
  • Measuring render cost

? The React Rendering Cycle

  1. Trigger: State or prop change
  2. Render Phase: Virtual DOM recalculation
  3. Reconciliation: Diffing old vs new tree
  4. Commit Phase: Minimal DOM updates

Performance issues often come from unnecessary renders or expensive operations.

⚙️ Virtual DOM & Reconciliation

  • Creates a new virtual DOM tree
  • Diffs with the previous version
  • Applies minimal real DOM updates

? Measuring Render Performance

? View Code Example 
// Profiling a component render using React Profiler
<React.Profiler
id="Dashboard"
onRender={(id, phase, actualDuration) => {
console.log(`${id} rendered in ${actualDuration}ms during ${phase}`);
}}
>
<Dashboard />
</React.Profiler>

? Common Optimization Concepts

  • Memoization: Cache expensive results
  • Pure Components: Render only on real change
  • Virtualization: Render visible items only
  • Code Splitting: Reduce initial bundle
  • Concurrent Rendering: Smooth UI updates

? Use Cases

  • Large dashboards
  • Infinite scrolling lists
  • Real-time data apps
  • Mobile-first applications

? Interactive Rendering Flow

State Change ➜ Render ➜ Diff ➜ Commit ➜ UI Update

This flow repeats on every update, so reducing triggers improves performance.

? Interactive Simulator: Render Cost

Simulate a "Heavy Re-render" to see how item count impacts the main thread. React aims to keep updates under 16ms (60fps).

Waiting for update...
 

? Tips & Best Practices

  • Measure before optimizing using React Profiler
  • Break large components into smaller ones
  • Use proper and stable key values in lists
  • Test performance on low-end or slower devices

? Try It Yourself

  1. Profile your homepage rendering time
  2. Log re-renders in a frequently updating component
  3. Wrap a component with React.memo
  4. Use useMemo for a computed value