SESSION 047 — React Performance

CONCEPTS.UNLOCKED

🌳

Tree Data Structures

Nodes, children, leaves, depth, traversal. React's component hierarchy is a tree. The DOM is a tree. Understanding trees is understanding how React works internally.

🔄

Reconciliation Algorithm

React diffs old and new virtual DOM trees. Compares them node-by-node, finds minimum changes, and applies only those to the real DOM. O(n) tree diffing.

🛡

React.memo()

Skip re-rendering when props haven't changed. Wraps a component to compare incoming props with previous props. Same props → reuse last render. Different → re-render.

💾

useMemo()

Cache expensive computations. const result = useMemo(() => expensiveCalc(data), [data]). Only recomputes when data changes. Don't reprocess 8M pixels if the input didn't change.

📌

useCallback()

Cache function references. Without it, every render creates a new function → child thinks props changed → re-renders. useCallback keeps the same reference between renders.

📊

React DevTools Profiler

Measure what re-renders and why. Record a session, see flame charts of component renders, identify which components are re-rendering unnecessarily.

HANDS-ON.TASKS

Profile the Problem

▶

Open React DevTools → Profiler → record while moving a slider. See: EVERY component re-renders on every slider move (the entire tree!).

Understand why: parent state changes → all children re-render (React's default behavior).

Fix with React.memo

▶

const LayerPanel = React.memo(
  function LayerPanel({ layers, onReorder }) {
    // Only re-renders if `layers` or `onReorder`
    // actually changed
    return (/* ... */);
  }
);

React.memo wraps the component with a shallow prop comparison. If all props are the same as last time → skip re-render entirely. The component "remembers" its last output.

Fix Callback Identity with useCallback

▶

const handleReorder = useCallback(
  (layerId, direction) => {
    // ... reorder logic
  },
  [layers] // Only recreated when layers change
);

Without useCallback, every render creates a new handleReorder function → React.memo sees a "new" prop → re-renders anyway. useCallback preserves the reference between renders.

Cache Expensive Calculations with useMemo

▶

const processedImage = useMemo(() => {
  return applyAllFilters(originalImage, filterState);
}, [originalImage, filterState]);
// Only recompute when inputs change

Processing 8M pixels is expensive. If neither the image nor the filters changed, return the cached result instantly. useMemo is memoization from Session 36's deep-dive, now as a React hook.

Profile Again & Know When to Stop

▶

Profile again: 70% reduction in unnecessary re-renders.

Understand when NOT to optimize — premature optimization is the root of all evil. Only optimize components that are measurably slow.

Close the Ticket

▶

git switch -c perf/PIXELCRAFT-035-render-optimization
git add src/
git commit -m "Optimize renders with memo, useMemo, useCallback (PIXELCRAFT-035)"
git push origin perf/PIXELCRAFT-035-render-optimization
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Trees are the most common data structure in computing.

React's reconciliation is tree diffing: compare old tree with new tree, find minimum changes. O(n) — a remarkable achievement.

// Trees everywhere:

The DOM           → a tree
React components  → a tree
File systems      → a tree
JSON              → a tree
Database indexes  → B-trees
Compilers         → Abstract Syntax Trees

// React's reconciliation runs in O(n)
// — linear in the number of nodes.
// This is what makes React fast.

"Performance Lab"

[A] Create a "Render Counter" component that displays how many times each component has rendered. Use useRef to track render count without causing re-renders.

[B] Add React.memo to every component, then remove it from ones that don't benefit. Document which components benefited and why. Learn to optimize selectively.

[C] Research React's new compiler (React Compiler / React Forget). How does it automate what you just did manually? Will memo, useMemo, and useCallback become unnecessary?

REF.MATERIAL

ARTICLE

React.memo — React.dev

React Team

Official reference: when memo helps, shallow comparison, custom comparison functions, and common pitfalls.

MEMOOFFICIALESSENTIAL

VIDEO

useMemo and useCallback — Web Dev Simplified

Web Dev Simplified

When to use useMemo and useCallback, when NOT to, and how they prevent unnecessary re-renders in practice.

MEMOIZATIONPRACTICAL

ARTICLE

Render and Commit — React.dev

React Team

How React renders: triggering, rendering, committing. Understanding the render lifecycle is essential for optimization.

RENDERINGOFFICIAL

ARTICLE

Reconciliation — React Docs

React Team

How React's diffing algorithm works: tree comparison, element type checking, keys, and the heuristics that make it O(n).

RECONCILIATIONALGORITHMDEEP

VIDEO

React Profiler — Chrome DevTools

Jack Herrington

Using the React DevTools Profiler: recording renders, reading flame charts, identifying wasted renders, and measuring optimization impact.

PROFILERDEVTOOLS

REACT PERFORMANCE