React components render again when their state changes, when a context they read changes, or when their parent renders. A memoized component can still render if its props change—or if its own state or consumed context updates. To find what is happening in your app, record the interaction that feels slow in the React Developer Tools Profiler, trace the update, then make the smallest change that addresses its cause.
What makes a React component render again?
Its own state changes
A state update can render the component that owns that state, regardless of whether the component is wrapped in memo. If a parent passes the same props as before, that does not prevent the component’s own state update from rendering it.
As an Amazon Associate I earn from qualifying purchases.
A context it reads changes
Components that consume a context update when that context value changes. memo does not block updates from a context the component uses.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Its parent renders
By default, a parent render leads React to render its children again. React’s memo documentation explains that memoization may let React skip a child’s parent-driven render when its props have not changed. It is an optimization, not a guarantee or a general switch for turning renders off.
#1 Best Overall
How to find which update is responsible
-
Reproduce a specific interaction that feels slow, such as opening a panel or typing into a field.
-
Record that interaction in the Profiler panel of React Developer Tools. Inspect which components rendered and how much time their rendering took.
-
For a component that rendered, check whether its own state changed, a context it consumes changed, or its parent passed changed props. These are different causes and need different fixes.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Inspect object, array, and function props, then trace any Effects that update state. Those are common places to find avoidable updates.
-
Apply one targeted change and record the same interaction again. Compare the work and responsiveness, not just the number of renders.
Use the Profiler API when you need measurements in code
React’s <Profiler> API reports actualDuration, the time spent rendering the profiled tree for an update, and baseDuration, an estimate of the time to render the entire subtree without optimizations. Profiling adds overhead, and profiling is disabled in production builds by default; production measurement requires a profiling-enabled build.
Why objects, arrays, and functions can defeat memoization
By default, memo compares each prop with Object.is. A new object, array, or function is a different reference, even if its contents or behavior look identical. So a parent that creates one of these values during every render can cause a memoized child to render again.
Recommended Free Tools
For example, a parent that passes { name: 'Ari' } inline creates a new object on each render. If the child only needs the name, passing a simple string instead may make its input easier to compare. Stabilizing a value with a Hook can help when a memoized child’s prop or a Hook dependency benefits from it; doing so everywhere adds code without necessarily improving the interaction.
Choose a fix that matches the cause
Keep state close to the components that use it
State that lives high in the tree can make a large part of the tree respond to updates. When practical, keep state in the component or smaller subtree that needs it. This can reduce how much of the tree is affected without adding manual caches.
Narrow context-driven updates
A component that reads a context still updates when that context changes. If it needs only a small part of a larger value, separate the context-reading component from a child that receives just the needed slice. The child can then use memo where stable props make skipping a parent-driven render useful.
Use memo for measured parent-driven work
memo can help when a component renders often because its parent renders, the component’s rendering is costly, and its props are usually unchanged. It will not suppress updates from the component’s own state or context. A custom comparison function must account for everything that affects both the component’s output and behavior; the default comparison is usually safer.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use useMemo and useCallback selectively
useMemo caches a calculation result while its dependencies remain unchanged. useCallback caches a function definition, which can help when passing it to a memoized child or using it as a Hook dependency. Neither prevents renders by itself. A dependency that changes every render can defeat memoization, and excessive caching makes code harder to read and maintain.
Best Value
Remove unnecessary Effect-driven state updates
An Effect that updates state based on other state or props can create an update chain: a render triggers an Effect, the Effect updates state, and that update triggers another render. If the value can be calculated during rendering, derive it there instead of storing and synchronizing a duplicate value with an Effect. Keep rendering pure and remove unnecessary Effects rather than masking the chain with memoization.
Check whether React Compiler is in use
React Compiler can reduce the need for hand-written memoization in supported project configurations. Whether it applies depends on the React version and build setup your project actually uses; check those before adding memo, useMemo, or useCallback reflexively.
When frequent renders are not a problem
A render count alone does not show whether an interaction is slow. Rendering can be inexpensive, and React’s guidance is to profile and optimize where doing so benefits the app. If a specific interaction feels responsive and profiling shows no meaningful cost, reducing render counts for their own sake may add complexity without helping users. As React puts it in the useMemo documentation, “If re-rendering a component causes a problem or produces some noticeable visual artifact, it’s a bug in your component!”
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
