Tag: performance

You’ve built a React app that works. But as it grows, you notice it slowing down. Every keystroke lags, and the UI feels sluggish. The culprit is often unnecessary re-renders. In this article, you’ll learn exactly why React re-renders components and how to fix the most common causes. By the end, you’ll have a clear set of tools to make your React app fast and responsive.

How React Decides to Re-render

React re-renders a component when its state changes, when its parent re-renders, or when the context it consumes updates. When state changes inside a component, that component re-renders. Then, all its children re-render as well. This cascading behavior is by design: React ensures the UI is always in sync with the data.

However, this default behavior can cause performance issues. If a parent re-renders, every child re-renders, even if their props haven’t changed. That’s where optimization comes in.

Common Causes of Unnecessary Re-renders

Let’s look at the most frequent reasons for too many re-renders in production React apps.

Inline Functions and Objects in JSX

When you define a function or create an object directly inside JSX, you create a new reference on every render. For example:

<Button onClick={() => handleClick(id)} />

This inline arrow function is a new function every time. If Button is wrapped in React.memo, it will still re-render because the onClick prop reference changes. The same problem applies to inline objects like <Component style={{color: 'red'}} />. A common mistake is to think that React.memo alone solves everything — it doesn’t if you pass new references each time.

To fix this, extract the inline callback or object outside the JSX, or use useCallback and useMemo to stabilize references. For example, instead of onClick={() => handleClick(id)}, you can define const handleClickCallback = useCallback(() => handleClick(id), [id]); and pass handleClickCallback to the button.

State Updates That Don’t Change State

Calling setState with the same value doesn’t cause a re-render in class components, but in functional components using hooks, it does. Every setState call triggers a re-render, even if the value is identical. This is a common source of extra renders when you accidentally update state too frequently, like in an event handler that runs multiple times. A real-world example: a dropdown that opens and closes — if you call setIsOpen(!isOpen) when it’s already open, the state changes and triggers an extra render. Check that you only call state setters when the value actually needs to change.

Context Re-renders Everything

When a context provider value changes, every consumer of that context re-renders. If you put too many values in one context, a change to one field triggers re-renders for components that only read the other fields. This is a subtle but major performance drain. To mitigate this, split your context into smaller contexts or use useMemo for the value object so that consumers only re-render when the parts they depend on change.

For example, if you have a UserContext that holds both userName and theme, a change to theme will re-render components that only read userName. Instead, create separate UserNameContext and ThemeContext providers.

Tools to Prevent Unnecessary Re-renders

React gives you several tools to prevent unnecessary re-renders. Use them wisely — over-optimizing can make your code harder to read.

Tool	Use Case	Important Note
React.memo	Prevent re-render of a component when its props haven’t changed.	Only shallow-compares props. Use React.memo for pure presentational components that receive simple props. If props contain functions or objects, they must be stable references.
useMemo	Cache a computed value until its dependencies change.	Use for expensive calculations, not trivial operations like useMemo(() => a + b, [a, b]) — that adds unnecessary overhead. Reserve it for array transformations, filtering, or complex data manipulations.
useCallback	Return a memoized function reference that only changes when dependencies change.	Use when passing callbacks to child components wrapped in React.memo. Always list all dependencies used inside the callback to avoid stale closures.
useRef	Keep a mutable value across renders without causing re-renders.	Excellent for timers, DOM references, or any value that changes but shouldn’t trigger a UI update. Unlike state, changing a ref does not trigger a re-render.

Another important strategy is to lift state down. Instead of putting all state in a high-level component, keep state as close as possible to where it’s used. This reduces the number of components that need to re-render when that state changes. For example, if only one child needs a piece of state, store it in that child instead of the parent. If multiple children need it but not all, consider using a shared context with a granular provider.

Step-by-Step: Fixing a Common Re-render Problem

Let’s walk through a typical scenario. You have a parent component that holds a search query and a list of items. The list is filtered based on the query. Without optimization, every keystroke re-renders the entire list.

1. Identify the problem: Profile your app using React DevTools to see which components re-render. You’ll likely see the list re-rendering on every input change. Open the Profiler tab, start recording, type in the search box, and stop. Look at the flamegraph to spot the list component highlighted as re-rendered.
2. Memoize the list component: Wrap the list component in React.memo. Now it will only re-render if its props change.
3. Stabilize the filter function: Use useMemo to compute the filtered list only when the search query or the original list changes. The filtered list reference stays stable if the query didn’t change. Example: const filteredList = useMemo(() => list.filter(item => item.name.includes(query)), [list, query]);
4. Memoize the filter callback: If you pass a callback to a child, use useCallback to keep the reference stable. This is especially important if the child is wrapped in React.memo. For instance, a delete button inside each list item should receive a stable onDelete function.
5. Test and profile again: Verify that the list no longer re-renders on unrelated state changes. Use the React DevTools Profiler again to confirm the list component is not re-rendering when only the query changes.

Common pitfalls: forgetting to include all dependencies in useMemo or useCallback arrays, or wrapping everything in memo without measuring. Always check if the optimization actually reduces re-renders by using the profiler.

When Not to Optimize

Optimization has a cost. React.memo adds a prop comparison on every render. useMemo and useCallback add overhead for dependency tracking. Only optimize when you measure a performance problem. Premature optimization can make your code harder to maintain without real benefit.

A good rule of thumb: focus on components that render often (like list items) or that have expensive render logic (like complex charts). For components that render infrequently or are cheap, let React do its job. Also, avoid wrapping a component in React.memo if it receives children or other JSX — those are objects and always change, defeating the purpose.

How to Profile Re-renders Effectively

Before you optimize, you need to know what to fix. Open React DevTools and go to the Profiler tab. Click the record button, interact with your app (like typing in an input), then stop. The profiler shows you all components that re-rendered during that interaction, with timing bars. Look for components that re-render frequently and take a long time. Also, enable the “Record why each component rendered” option to see the reason (state change, parent re-render, context change). This tells you exactly which hook call or prop change caused the re-render.

Another technique: add console.log statements inside your component to track renders. For example, console.log('MyComponent rendered'). Just remember to remove them in production. This is a low-tech but effective way to spot unnecessary renders.

For deeper analysis, you can use the why-did-you-render package, but it can be noisy. Only use it on specific components when you need to see why they re-render despite seemingly unchanged props.

Related Performance Improvements

If you’re tackling performance, you might also want to explore lazy loading to reduce initial bundle size. Check out our guide on How to Improve Web Performance with Lazy Loading for techniques that complement re-render optimization.

Another common issue is accessibility mistakes that accidentally cause re-renders, like using improper ARIA attributes. Read 10 Common Accessibility Mistakes Frontend Developers Make to avoid those pitfalls.

And if you’re wondering whether React or a framework like Next.js is right for your next project, we compare them in React vs Next.js: Choosing the Right Framework for Your Project.

Wrapping Up

Understanding why React re-renders and how to prevent unnecessary ones is key to building performant apps. Start by identifying the worst offenders with React DevTools, then apply React.memo, useMemo, and useCallback where they provide measurable improvement. Always measure before and after. That way, you keep your code clean and your app fast.

Frequently asked questions

Does React re-render when props change?

Yes, when a parent component re-renders, all its children re-render by default, regardless of whether their props have changed. React’s reconciliation algorithm then diffs the virtual DOM, but the re-render function still runs. To prevent this, use React.memo on child components so they only re-render when their props actually change.

What is the difference between useMemo and useCallback?

useMemo returns a memoized value from a function, while useCallback returns a memoized function itself. Both accept a dependencies array and only recompute when dependencies change. Use useMemo for expensive computed values, and useCallback when you want to pass a stable function reference to a child component that is wrapped in React.memo.

Why does my React app re-render on every keystroke?

This usually happens because your input’s onChange handler updates state in a parent component, causing that parent and all its children to re-render. To fix it, move the state and input logic into a separate component that handles only the input, or use React.memo on the list component to prevent it from re-rendering when the input changes.

Can context cause unnecessary re-renders?

Yes. When the value of a context provider changes, every component that consumes that context re-renders, even if they only use a part of the context that didn’t change. To mitigate this, split large contexts into smaller, focused ones, or use useMemo to create the context value so it only changes when necessary.

Is it always good to use React.memo on every component?

No. React.memo adds a shallow prop comparison on every render, which has its own cost. It’s best used on components that render often and receive stable props, or on components that have expensive render logic. For lightweight components or those that rarely re-render, the comparison overhead may outweigh the benefit.