Congratulations on mastering React Performance! You now have the tools to make your applications fast, responsive, and scalable.

Key Takeaways

• Memoization stops unnecessary re-renders: Use React.memo for components, useMemo for values, and useCallback for functions.
• Code Splitting reduces initial load: Break your monolith into smaller chunks using React.lazy and Suspense to improve Core Web Vitals (LCP).
• Virtualization handles massive lists: Only render what the user can see. A list of 10,000 items should only have ~20 DOM nodes.
• Referential Equality is key: [] !== []. Be careful when unmounting or re-mounting components.

Interactive Flashcards

Test your knowledge with these flashcards. Click to flip!

What does React.memo do?

Click to flip

It memoizes a component, skipping re-renders if the props haven't changed (shallow comparison).

When should you use useCallback?

Click to flip

When passing a function as a prop to a child component wrapped in React.memo, to prevent the function reference from changing on every render.

What is Virtualization?

Click to flip

A technique where only the visible items in a large list are rendered to the DOM, improving performance and memory usage.

What does Suspense do?

Click to flip

It lets you display a fallback UI (loading spinner) while waiting for children to finish loading (e.g., code splitting chunks).

What is Referential Equality?

Click to flip

The concept that two variables are equal only if they point to the exact same location in memory. {} === {} is false.

Cheat Sheet

Optimization	Method	Trade-off
Skip Renders	React.memo	Computation cost to compare props.
Stable Function	useCallback	Memory allocation for the wrapper.
Stable Value	useMemo	Memory to store cached value + dependency checks.
Lazy Load	React.lazy	Initial delay when user requests that part (add spinner).
Large Lists	react-window	Complexity in implementation; variable height items are harder.

Quick Revision

1. Don’t Optimize Prematurely: React is fast. Only optimize when you see lag.
2. Profile First: Use the React DevTools Profiler to find the bottleneck.
3. Fix Structure First: Sometimes moving state down or lifting content up (composition) fixes re-renders better than memoization.
4. Virtualize Long Lists: Always virtualize if you have > 100 complex items or > 1000 simple items.

React Glossary