memo, useMemo, and useCallback

Three tools, three different jobs

memo skips re-rendering a component when its props are unchanged. useMemo caches a computed value between renders. useCallback caches a function identity so a memoised child is not defeated by a new prop every time.

They only pay off in specific conditions: the component must be expensive to render or the value expensive to compute, and the memoised props must genuinely stay stable. Wrapping a cheap component whose props change every render adds a comparison and saves nothing.

The dependency array is a contract. Omitting a dependency to stop something recomputing does not fix the render — it produces a stale value that will be wrong in a way that is very hard to trace.