<vetted />
React
Senior
Question 8 of 10

What are some ways to make your React app faster?

Quick Answer

Key techniques include memoization (memo, useMemo, useCallback), code splitting, virtualization for long lists, and avoiding unnecessary re-renders.

Detailed Answer6 paragraphs

React performance optimization is about reducing unnecessary work. Here are the most impactful techniques.

Memoization prevents unnecessary recalculations and re-renders. React.memo wraps components to skip re-rendering when props haven't changed. useMemo caches expensive calculations. useCallback memoizes functions to maintain referential equality for child components.

Code splitting with React.lazy and Suspense loads components only when needed. This reduces initial bundle size and speeds up first load. Split by routes or by features that aren't immediately visible.

Virtualization (react-window, react-virtualized) renders only visible items in long lists. Instead of rendering 10,000 items, render only the ~20 visible ones. Essential for any list over a few hundred items.

Avoid common pitfalls: don't create objects or functions inline in JSX (creates new references each render), use stable keys in lists (not array indexes for dynamic lists), and avoid unnecessary state updates that trigger re-renders.

Use React DevTools Profiler to identify actual bottlenecks. Measure before optimizing—premature optimization often adds complexity without meaningful benefit. Focus on user-perceptible performance, not just numbers.

Key Takeaway

Key techniques include memoization (memo, useMemo, useCallback), code splitting, virtualization for long lists, and avoiding unnecessary re-renders.

Ace your interview

Ready to Land Your Dream Job?

Join our network of elite AI-native engineers.