What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A pure React component calculates its UI from its current props, state, and context without changing values that existed before the render. Keeping rendering pure is a correctness rule; APIs such as memo, useMemo, and PureComponent are optional performance optimizations, not substitutes for correct render logic.
What makes a React component pure?
Purity has two parts: the same inputs produce the same output, and rendering does not cause side effects. For a component, that means its JSX should be determined by its current props, state, and context. Props, state, context, and shared values are inputs to rendering—not things to mutate while rendering. React describes the principle as “Same inputs, same output” in its Keeping Components Pure guide.
As an Amazon Associate I earn from qualifying purchases.
A component may create and change local values during a render to build its result. The boundary is whether it changes something that existed before that render, such as a prop, a state object, or a module-level variable. Mutating such shared or pre-existing data can make output depend on call order rather than on the component’s inputs.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →An impure render
let nextId = 0;
function Label() {
nextId += 1;
return <p>Item {nextId}</p>;
}Each call changes shared state and returns different JSX, even if the component received no different inputs. Repeated or reordered rendering can therefore change what appears on screen.
#1 Best Overall
A render derived from inputs
function Greeting({ name }) {
return <p>Hello, {name}!</p>;
}When name is the same, this component calculates the same output. If an interaction should change the UI, represent that change with React state rather than by mutating a value used during rendering.
Where should side effects go?
Rendering should calculate the UI, not perform actions such as changing shared data or synchronizing with an external system. Put work that responds directly to a user action in the relevant event handler. Use an Effect when the rendered component genuinely needs to synchronize with something outside React after rendering. Ordinary values that can be calculated from current inputs should usually be derived during render, not copied into state through an Effect.
React’s Rules of React and purity lint rule describe the constraints on render logic and Hooks. Following them gives React freedom to repeat, pause, or stop render calculations without relying on a particular call order.
Why does React expect pure rendering?
Pure rendering makes behavior easier to predict and debug: the same inputs yield the same UI, rather than output that depends on when or how often a function ran. It also allows React to repeat calculations, render in different environments, or skip work when inputs have not changed.
In development, Strict Mode may call component functions more than once to expose accidental mutations and render-time side effects. That is a diagnostic check, not a promise that production will call a component exactly twice. Correct pure rendering should remain correct when repeated.
When should you use React.memo, useMemo, or PureComponent?
Purity is a correctness expectation. The APIs below are performance tools for specific cases; none repairs a component that mutates data or produces incorrect output. React recommends fixing correctness first and measuring real lag with React Developer Tools before adding memoization.
| API | What it optimizes | Important limits |
|---|---|---|
memo(Component) |
Can skip some renders of a function component when its props have not changed. | It is not a guarantee. The component can still render when its own state or consumed context changes; newly created object or function props can also prevent a skip. |
useMemo(calculateValue, dependencies) |
Caches the result of a pure calculation while its dependencies remain unchanged. | Dependencies are compared with Object.is. React may discard the cache, so correctness must not depend on it. |
PureComponent |
For class components, shallowly compares props and state to skip some renders. | It does not prevent context-driven updates. React recommends function components for new code and describes memo as the function-component analogue. |
Use memo when unchanged props make an expensive component worth skipping
memo is most useful when a function component often receives the same props and its render work is meaningfully expensive. Its default comparison is based on props, so passing a fresh object or function on each parent render may defeat the optimization. It does not block renders caused by the component’s own state or context. See React’s memo reference.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsUse useMemo for a slow calculation or a deliberately stable value
Consider useMemo when a pure calculation is noticeably slow and its inputs rarely change, when you need a stable value to pass to a memoized child, or when a value is itself used as a Hook dependency. List every reactive value the calculation uses. Call the Hook at the top level—not conditionally or inside a loop. Strict Mode may call the calculation twice in development, so it must be pure. React states that the cache is a performance optimization rather than a semantic guarantee and may be discarded in specific situations; do not use it to preserve state or make behavior correct. See the useMemo reference.
Best Value
Keep PureComponent for existing class components
PureComponent offers a shallow props-and-state comparison for class components. A shallow comparison only helps when the relevant values are represented in a way that makes those comparisons useful; it does not prevent updates driven by context. For new components, React recommends function components, with memo available as the corresponding optimization. See the PureComponent reference.
How to decide whether memoization is worthwhile
- Make rendering correct first. Remove render-time side effects and mutations, and derive the UI from current inputs.
- Find the actual bottleneck. Profile a lagging interaction with React Developer Tools instead of assuming every render needs to be prevented.
- Try simpler structural fixes. Keep transient state close to the component that uses it, pass JSX as children to visual wrappers where appropriate, avoid Effect-driven chains of state updates, and remove unnecessary Effect dependencies.
- Add the smallest useful optimization. Use
memofor an expensive function component whose props often stay the same, oruseMemofor a slow pure calculation or intentionally stable value. Keep a class component’s existingPureComponentbehavior where it serves the same purpose. - Recheck the interaction. Confirm that the change addresses the measured work and that the component still updates correctly when its props, state, or context change.
React Compiler can automatically memoize components, values, and functions when it is available and applicable in a project. Do not assume a project has it enabled: compiler use depends on the project’s configuration. In a compiler-enabled project, manual memo or useMemo may be less necessary, but render purity still matters. React discusses this context in its memo and useMemo references.
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.
