React.memo vs useMemo vs useCallback

Memoization in React is used to prevent unnecessary re-renders and repeated calculations. It allows "remembering" the results of functions, computations, and components between renders if their dependencies have not changed.

React.memo

• HOC (Higher-Order Component) that memoizes the render result of a functional component.
• If props have not changed (shallow comparison shallowEqual), the component will not be re-rendered.

const UserCard = React.memo(function UserCard({ name }) {
  console.log("Render");
  return <div>{name}</div>;
});

<UserCard name="Alex" /> // first render
<UserCard name="Alex" /> // repeated call will not lead to a re-render

Optional: you can pass a comparison function for more precise control:

React.memo(Component, (prevProps, nextProps) => prevProps.id === nextProps.id);

useMemo

• A hook that caches the result of computations between renders.
• Computations are performed only if dependencies have changed.
• Useful for heavy operations or data filtering.

const visibleItems = useMemo(
  () => items.filter((item) => item.visible),
  [items]
);

Note: Do not use useMemo for every calculation — only if it is really expensive.

useCallback

• Memoizes the reference to a function so it's not re-created on every render.
• Especially important when passing callbacks to child components wrapped in React.memo.

const handleClick = useCallback(() => {
  setCount((c) => c + 1);
}, []);

Without useCallback, every new render creates a new function → the child component considers the prop changed and re-renders.

Connection Between Them

Key ideas

• Memoization = remembering the result between renders.
• React.memo prevents unnecessary renders.
• useMemo saves calculations, useCallback — prevents re-creation of functions.
• Use with wisdom: excessive memoization can complicate code and reduce readability.