React › Performance (memo/useMemo)

What does React.memo do and how does it help performance?

Beginner

Answer

React.memo wraps a component and tells React to skip re rendering it if its props have not actually changed since the last render. This is useful for components that render often but whose output usually stays the same, saving unnecessary rendering work.

const ProductCard = React.memo(function ProductCard({ name, price }) {
  console.log('Rendering', name);
  return <div>{name}: ${price}</div>;
});

Real-world example A product grid with hundreds of cards avoids re rendering every single card whenever an unrelated part of the page updates, since each card is wrapped in React.memo and only re renders when its own specific data changes.

Common follow-ups: Does React.memo compare props deeply or just by reference?;When could using React.memo actually make performance worse instead of better?

Hooks;useReducer & Complex State Logic