Skip to content

Lesson 11 — Rendering performance and profiling

Objective

Measure an interaction, identify actual render cost, and apply the narrowest effective optimization.

Prerequisites

Lesson 10 — Vitest and React Testing Library. You should have a test suite you trust before optimizing.

Mental Model

A render is not necessarily a DOM mutation. Performance depends on frequency and cost. Memoization adds comparison, memory, and cognitive cost and does not repair incorrect state ownership.

Concept

Profile first, optimize second. React DevTools Profiler shows which components render and why. State ownership matters more than memo: moving state down and splitting contexts reduces render frequency more reliably than wrapping everything in memo. Expensive calculations can be memoized once proven expensive.

Example

const visible = useMemo(() => {
  return topics
    .filter((t) => t.status === 'incomplete')
    .sort((a, b) => a.priority - b.priority);
}, [topics]);

Only add useMemo after measuring that the calculation is a real bottleneck.

Real-World Usage

Large tables, drag-and-drop boards, real-time dashboards, and any UI that renders hundreds of items or updates many times per second.

Common Mistakes

  • Wrapping every component in memo before profiling.
  • Using useMemo to hide a state-ownership problem.
  • Optimizing for a render that has no visible or measured cost.

Mini Lab

Task

Profile topic filtering and status updates with React DevTools. Record a baseline. Stabilize architecture first, then evaluate transition scheduling, list virtualization, memoization, or code splitting based on evidence.

Constraints

  • Capture before/after measurements with the same data and interaction.
  • Ensure tests still pass and stale values are not introduced.

Expected Result

A profiler capture shows the slow interaction, and the optimized version has measurable improvement for the measured path without regressions.

Hints

Move state down and split broad Context values before wrapping every component in memo. Optimize expensive calculations only after proving expense.

Knowledge Check

  • Why can memoization make performance worse?
  • useMemo versus useCallback?
  • What does startTransition change?

Challenge

A list of 5,000 items is slow. List three distinct strategies, and state what evidence you would need to choose one over the others.

Summary

Profile before optimizing. State ownership usually wins over memo. Use memoization and virtualization only on measured bottlenecks.

What Comes Next

Lesson 12 — Architecture and production boundaries