How do you optimize React applications for performance?
Answer
React performance optimization techniques: Memoization: React.memo(Component) — skips re-render if props haven't changed. useMemo — memoize expensive computations. useCallback — memoize callback functions to prevent child re-renders. Code splitting: React.lazy + Suspense for route/component splitting. Virtualization: for long lists (1000+ items), use react-window or TanStack Virtual — only render visible rows. Avoid anonymous functions in JSX: onClick={() => handleClick(id)} creates a new function each render. Use useCallback or move out of render. Avoid inline objects in JSX props: style={{ color: "red" }} creates a new object each render. Extract to a constant. Concurrent features: React 18's useTransition marks slow updates as non-urgent, keeping the UI responsive. useDeferredValue defers updating a slow component. Server Components (Next.js App Router): components that render on the server — zero client JS bundle cost. Profile first: use React DevTools Profiler to identify actual bottlenecks before optimizing.
Previous
What is GZIP vs Brotli compression?
Next
What is the browser performance API and how do you measure performance?
More Web Performance Questions
View all →- Intermediate What is the browser performance API and how do you measure performance?
- Intermediate What is layout thrashing and how do you avoid it?
- Intermediate What is resource prioritization in browsers?
- Intermediate How does SSR (Server-Side Rendering) improve performance?
- Intermediate What is a performance budget?