Prevents unnecessary re-renders of function components when props haven’t changed (shallow comparison).

import { memo } from 'react';

const Child = memo(({ obj, onClick }: { obj: { a: number }, onClick: () => void }) => {
  console.log('Child rendered');
  return (
    <>
      <p>{obj.a}</p>
      <button onClick={onClick}>Click</button>
    </>
  );
});

Usage:

• Use for pure presentational components whose props change infrequently.
• Ideal when the parent re-renders frequently, but the child doesn't depend on those changes.
• Props are compared using shallow comparison.

Note on props:

• Works well with primitive props (string, number, boolean).
• For objects, arrays, or functions, re-render still happens unless the reference stays stable — memoize them with useMemo() / useCallback():

import { useMemo, useCallback } from 'react';

function Parent() {
  const memoizedObj = useMemo(() => ({ a: 1 }), []);
  const memoizedFn = useCallback(() => {
    console.log('clicked');
  }, []);

  return <Child obj={memoizedObj} onClick={memoizedFn} />;
}

Avoid using memo() if:

• The component is already cheap to render.
• Props change on every render regardless.