React Performance: An Interview Checklist

30‑second interview answer

React performance is mostly about avoiding unnecessary work: reduce re-renders, keep renders cheap, and avoid rendering huge lists at once. Start by measuring (React DevTools Profiler), then apply targeted fixes: component splitting, memoization (React.memo, useMemo, useCallback), list virtualization, and sensible state placement.

---

Step 1: Measure first

Interviewers love this mindset:

“I don’t guess. I profile first.”

Tools:

• React DevTools Profiler
• browser performance tab
• simple console.time for expensive functions

---

Step 2: Common causes of slow React apps

1. Too many re-renders

• state stored too high in the tree
• context updates triggering many consumers

2. Expensive renders

• heavy computations in render
• big component trees

3. Huge lists

• thousands of DOM nodes

4. Large JS bundles

• slow initial load

---

Fixes (in order of impact)

1) Put state in the right place

• Keep local UI state local.
• Don’t lift state unless needed.

2) Split components

Smaller components reduce rerender scope.

3) Memoize only when it matters

• React.memo for expensive children
• useMemo for expensive computations
• useCallback for stable handlers passed to memoized children

Remember: memoization has overhead.

4) Virtualize large lists

If you render 10,000 items, memoization won’t save you.

Use virtualization (only render visible rows).

5) Avoid unnecessary object/array creation

Passing new {} / [] props breaks memoization.

6) Code-splitting

Use route-level splitting and lazy loading.

---

Micro-optimizations to avoid early

• Memoizing every component
• Using useMemo everywhere
• Premature caching

Better to keep code simple until profiling says otherwise.

---

Interview mini checklist

If asked “How do you optimize React?” answer like this:

1. Profile to find hot components
2. Reduce re-render causes (state placement, context splitting)
3. Memoize where needed
4. Virtualize lists
5. Split bundles/routes

---

Mini Q&A

Q1: When do you use React.memo?

• When a child is expensive and props are stable enough to benefit.

Q2: Biggest performance win for long lists?

• Virtualization.

Q3: What’s the first step in performance work?

• Measure/profile.

---

Summary checklist

• I profile before optimizing.
• I know top causes (state, context, lists).
• I can name the highest-impact fixes.
• I avoid premature memoization.