Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A pure React component calculates its UI from its current props, state, and context without changing values that existed before the render. That is a correctness rule—not an optimization setting. APIs such as memo, useMemo, and PureComponent can skip some work, but they cannot make impure rendering correct.
What makes a React component pure?
Purity has two practical parts: the same inputs produce the same output, and rendering does not cause side effects. A component should treat props, state, context, and other shared values as read-only while calculating JSX. React describes this as “Same inputs, same output” in its Keeping Components Pure guide.
Consider a component that increments a module-level counter while rendering:
let nextId = 0;
function Label() {
const id = nextId++;
return <span>Item {id}</span>;
}Calling Label changes shared state, so the output depends on how many times React has called it and on the order in which components render. A pure component instead derives its display from its inputs, or uses React state when an interaction should change the screen:
#1 Best Overall
function Label({ id }) {
return <span>Item {id}</span>;
}Here, the caller supplies the identifier, and the component only computes markup from it. For user-driven changes, update state from an event handler rather than mutating a value that rendering reads.
Where should side effects and calculations go?
Handle user actions in event handlers
Code that responds to a click, form submission, or other interaction belongs in the relevant event handler. This makes the change happen because of the action, rather than as an accidental consequence of React evaluating the component.
Use Effects for external synchronization
An Effect is appropriate when the rendered component needs to synchronize with something outside React after a render—for example, a browser API or external subscription. Do not use an Effect by default for an ordinary value that can be derived directly during rendering. Unnecessary Effect-driven state updates can add extra render work. React’s Rules of React explain the broader constraints on components and Hooks.
Keep render-time calculations local and read-only
A calculation performed during rendering is safe when it uses the current inputs and does not mutate shared or preexisting values. If it is expensive, first establish that it is causing a real performance problem; purity does not require caching every calculation.
Why does React expect rendering to be pure?
React may repeat, pause, or stop rendering work, and it may render in different environments. If rendering changes shared state or relies on a particular call order, those operations can produce inconsistent results. Pure render logic gives React freedom to manage work without changing the intended UI.
In development, Strict Mode may call component functions more than once to help reveal accidental mutation or side effects. Correct pure rendering should tolerate repeated calls. This development check is not a promise that production calls a component exactly twice—or any fixed number of times.
When should you use React memoization APIs?
Start by profiling a lagging interaction with React Developer Tools and fixing correctness issues first. React describes memoization as an optional performance technique: it may avoid work in some cases, but it does not guarantee a faster application. The right choice depends on what is doing unnecessary work and whether the extra cache or comparison is worth the added complexity.
Free tools Windows power users keep installed
One-click scans. No signup required.
| API | What it can skip or cache | What still causes work |
|---|---|---|
memo(Component) |
Can skip some renders of a function component when its props compare equal. | The component’s own state or consumed context can still trigger a render; newly created object or function props can also defeat the default prop comparison. |
useMemo(calculateValue, dependencies) |
Caches a calculation result while its dependencies remain unchanged. | A changed dependency causes recalculation. React may also discard the cache in specific situations, so correctness cannot depend on it. |
PureComponent |
For class components, shallowly compares props and state to skip some rerenders. | Context-driven updates can still render the component; shallow comparison does not detect every change made inside an object or array. |
memo for function components
Use memo(Component) when a function component often receives the same props and its rendering work is meaningfully expensive. By default, React compares its props. A memoized component can still render when its own state changes or when context it consumes changes. Fresh object and function props are new references, so they may prevent the default comparison from treating props as unchanged.
Memoization is not a guarantee that React will skip a render. React’s memo reference explicitly calls it a performance optimization, not a guarantee. Keep the component correct whether or not React skips the work.
useMemo for a calculation result
Use useMemo(calculateValue, dependencies) when a pure calculation is noticeably slow, when you need to preserve a value passed to a memoized child, or when a calculated value is itself a Hook dependency. Include every reactive value used by the calculation in its dependency list. React compares each dependency with Object.is.
Call useMemo at the top level of a component or custom Hook, not conditionally or inside a loop. Strict Mode may run the calculation twice in development, so it must remain pure. The useMemo reference also notes that React may discard a cached value in specific situations. Treat the cache as an optimization, not part of the program’s semantics.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
PureComponent for existing class components
PureComponent is a base class that shallowly compares props and state to skip some rerenders. It is useful when maintaining a class component with a render path that benefits from that comparison. It does not block updates from context. React recommends function components for new code and documents memo as the corresponding function-component optimization in its PureComponent reference.
Best Value
How can you reduce wasted rendering without adding caches?
- Keep transient state close to the component that uses it, so unrelated parts of the tree do not need to respond to it.
- For visual wrappers, accept JSX as
childrenwhere appropriate, rather than making the wrapper own and recreate its contents. - Keep render logic pure and derive values during rendering when they are straightforward calculations.
- Avoid chains of Effects that update state in response to other state when the value can be derived directly.
- Remove unnecessary Effect dependencies only when it preserves correct synchronization; do not omit values merely to suppress reruns.
These approaches can remove avoidable work while keeping the component model simpler. Add a memoization boundary only when profiling and the component’s behavior give you a reason to maintain it.
What changes when React Compiler is available?
React Compiler can automatically memoize components, values, and functions when it is enabled and applicable in a project. That can reduce the need to add memo or useMemo manually, but compiler availability depends on the project’s configuration. Do not assume it is active. Regardless of compiler use, render logic still needs to be pure, and memoization remains a performance concern rather than a correctness fix.
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.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →
