Common React Performance Mistakes That Slow Down Your App

Common React Performance Mistakes That Slow Down Your App

Most React performance problems come from a small set of mistakes. Here are the common ones and how to fix each.

Premature Memoization

Wrapping everything in useMemo and useCallback without measuring. Memoization itself costs something, so doing it everywhere adds overhead without benefit. Measure first.

New References on Every Render

Creating new objects or functions inline and passing them as props causes children to re-render even when nothing changed. Stabilize references with useMemo and useCallback where it matters.

Rendering Huge Lists Without Virtualization

Rendering thousands of items at once is slow. Use a virtualization library to render only the visible items.

Expensive Computation in Render

Doing heavy work directly in the render body on every render. Move expensive computation into useMemo so it only runs when dependencies change.

Fetching on Every Render

Fetching in the render body or with a wrong dependency array causes repeated requests. Fetch in useEffect with the correct dependencies.

Large Initial Bundle

Shipping the entire app in one bundle. Split routes with React.lazy and Suspense to reduce the first load.

Inline Object Props

Passing inline objects like style={{ color: 'red' }} creates a new object on every render, causing re-renders in memoized children. Hoist constant objects outside the component.

The Takeaway

Common performance mistakes include premature memoization, new references on every render, unvirtualized huge lists, expensive render computation, fetching on every render, large initial bundles, and inline object props. Measure, then fix the real ones.