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.