React Pure Components and React.memo

What is Pure Components and React.memo in React?

A pure component re-renders only when its props actually change. In function components you get this by wrapping the component in React.memo, which shallow-compares the previous and next props before deciding whether to re-render.

Why Pure Components and React.memo matters

By default a parent re-render cascades to every child. When a child renders an expensive tree — a long list, a chart — skipping that work when its props are unchanged is a real performance win.

Pure Components and React.memo example

import { memo } from 'react';

const JobCard = memo(function JobCard({ job, onSave }) {
  console.log('rendering', job.id);
  return <li>{job.title}<button onClick={() => onSave(job.id)}>Save</button></li>;
});

How this works

memo compares each prop with Object.is. Primitive props compare fine, but object, array and function props are recreated on every parent render, so they always look different — which is why memo is usually paired with useCallback and useMemo in the parent.

Key points to remember

• memo does a shallow comparison — nested object changes are not detected.
• It is useless if the parent passes a fresh inline arrow function each render.
• Measure with the Profiler before adding it; memo itself costs a comparison.
• PureComponent is the class equivalent.

Common mistakes with Pure Components and React.memo

• Wrapping everything in memo as a reflex — most components are cheap and the comparison adds overhead.
• Passing style={{ margin: 8 }} inline, which defeats memo because the object is new each render.