Pure Components
Same input, always the same output
A pure component is one that given the same props produces exactly the same JSX — with no side effects in the render. React can skip its re-render if the props haven't changed, making the UI predictable and optimizable.
React.memo
memo(Component) wraps the component and memoizes the last output. On the next render, if props are equal by reference (shallow equality), React reuses the previous result without calling the function. Useful for expensive children that receive stable props.
The reference trap
memo compares props with Object.is. If the parent passes an object literal or inline function, it creates a new reference on every render — memo always sees "different" props and never skips the render. That's why it's combined with useMemo and useCallback.
Common pitfalls
- 01Reading external state (Date.now(), Math.random(), global variables) inside the render makes a component impure.
- 02A component can be 'pure' in the React sense but have intentional side effects in effects or event handlers — those are not render side effects.
- 03memo makes a component 'skip renders' but doesn't make it pure — purity is about the output depending only on the input.