useMemo vs useCallback - Simply Explained

If you've worked with React, you've likely seen these two hooks show up in code reviews and wonder whether you actually need them. The short answer: sometimes yes, often no. The one-line distinction useMemo remembers a value useCallback remembers a function That's the entire mental model. Everything else follows from this. Why do they exist? Every time a React component re-renders, variables and functions inside it are recreated from scratch — even if nothing logically changed. Most of the time, this is fine. But it becomes a problem when those recreated values are passed as props. function Parent() { const handleClick = () => console.log("clicked"); return <Child onClick={handleClick} />; } On every render, handleClick is a brand new function. To React, a new function means a changed prop — so Child re-renders, even though the behavior is identical. useCallback fixes this by holding onto the same function reference across renders: const handleClick = useCallback(() => { co