How to Optimize React Performance

1How to Optimize React Performance

You optimize React performance by first measuring where time actually goes, then eliminating unnecessary re-renders, reducing bundle size with code splitting, and virtualizing large lists. The order matters: profile before you change anything, because most perceived slowness comes from a few hotspots, not the whole app.

React is fast by default, so optimization is about avoiding waste rather than squeezing microseconds. Unnecessary component re-execution, oversized JavaScript bundles, and rendering thousands of DOM nodes are the usual culprits, and each has a well-known fix.

2Measure Before You Optimize

Guessing at performance problems wastes effort and adds complexity. The React DevTools Profiler records renders and shows exactly which components rendered, how long they took, and what triggered them.

• Open the Profiler tab in React DevTools and record an interaction.
• Look for components that render often or take a long time in the flame graph.
• Check 'why did this render' to see whether props, state, or a parent caused it.
• Use the browser Performance panel and Lighthouse for load-time and Core Web Vitals data.

3Cut Unnecessary Re-Renders

The most common React slowdown is components re-rendering when their output has not changed. React re-renders a component when its state or props change, or when its parent re-renders, and that can cascade down a tree.

const Row = React.memo(function Row({ item }) { ... });
Only re-renders when item changes by reference.
Pointless if the component is cheap or its props change every render anyway.

const sorted = useMemo(() => heavySort(items), [items]);
const handleClick = useCallback(() => doThing(id), [id]);
Pass stable callbacks to React.memo children so the memo actually holds.

4Split Your Bundle

A large JavaScript bundle delays the first paint because the browser must download and parse it all before the app runs. Code splitting breaks the bundle into chunks loaded on demand, so users only download what a page needs.

• const Dashboard = React.lazy(() => import('./Dashboard')) # lazy-load a route
• <Suspense fallback={<Spinner />}><Dashboard /></Suspense> # show a fallback while loading
• Split by route so each page is its own chunk.
• Defer heavy, rarely used widgets like rich editors or charts until they are opened.

5Virtualize Long Lists

Rendering thousands of rows creates thousands of DOM nodes, which is slow to mount and scroll. List virtualization renders only the rows currently visible in the viewport plus a small buffer, recycling nodes as you scroll.

Libraries handle the math for you. The result is a list that feels instant whether it has a hundred rows or a hundred thousand, because the DOM only ever holds a screenful at a time.

• react-window: lightweight virtualization for lists and grids.
• react-virtuoso: virtualization with dynamic row heights and grouping.
• TanStack Virtual: a headless virtualizer that works with any markup.
• Combine virtualization with pagination or infinite scroll for very large datasets.

6Common Mistakes to Avoid

Optimization can backfire when applied blindly. These mistakes either add complexity for nothing or actively hurt performance.

• Memoizing everything before measuring, adding overhead and clutter with no real gain.
• Passing inline objects or arrow functions as props, breaking React.memo on children.
• Using array index as a key, which defeats efficient list reconciliation.
• Storing derived data in state instead of computing it during render.
• Shipping large libraries when a small utility or native feature would do.

7Place State Wisely

Where state lives has a big effect on how much re-renders. State high in the tree re-renders everything below it on every change, even components that do not use that state. Moving state down to where it is actually used shrinks the affected subtree.

Two techniques help. Colocate state in the smallest component that needs it, and lift it up only when siblings must share. When a fast-changing value is trapped high in the tree, extract the piece that uses it into its own component so only that piece re-renders.

• Colocate state in the component that uses it to limit re-render scope.
• Lift state only as high as the nearest common parent that needs to share it.
• Push frequently updating state into a small child component.
• Use composition to pass children through, so a re-rendering parent does not re-render static children.

8Key Takeaways

React performance work is mostly about avoiding waste in the right places. These principles cover the essentials.

• Measure with the Profiler before optimizing; fix proven hotspots only.
• Cut needless re-renders with React.memo, useMemo, and useCallback where a render is costly.
• Split the bundle by route with React.lazy and Suspense to speed up first load.
• Virtualize long lists so only visible rows render.
• Use stable keys and avoid inline object props to keep reconciliation efficient.

9Frequently Asked Questions

Q: When should I use React.memo? A: Use React.memo on components that are expensive to render or that re-render frequently because of an unrelated parent, and whose props stay the same by reference. For cheap components or ones whose props change every render, memo adds overhead without benefit.

Q: What is the difference between useMemo and useCallback? A: useMemo caches a computed value so an expensive calculation does not run on every render. useCallback caches a function reference so memoized children do not re-render. useCallback(fn, deps) is essentially useMemo(() => fn, deps).

Q: How do I make a huge list scroll smoothly? A: Use list virtualization with a library like react-window or TanStack Virtual so only the rows visible in the viewport render, instead of creating thousands of DOM nodes. Combine it with pagination or infinite scroll for very large datasets.

Q: Does code splitting really speed things up? A: Yes, for initial load. Splitting by route means the browser only downloads the JavaScript for the page a user visits, rather than the whole app. This shrinks the first bundle and improves metrics like Largest Contentful Paint.