What is useMemo and how is it different from useCallback?

// useMemo — memoizes the RETURN VALUE of a function
const sortedList = useMemo(() => {
  return [...items].sort((a, b) => a.name.localeCompare(b.name));
}, [items]); // only re-sorts when items changes

// useCallback — memoizes the FUNCTION ITSELF
const handleSort = useCallback(() => {
  setSortedList([...items].sort(...));
}, [items]);

Use useMemo for:

• Expensive computations (filtering 10k items, building complex data structures)
• Stable object/array references passed as props to React.memo children
• Values used as useEffect dependencies that would otherwise change every render

// ❌ New object every render → useEffect re-runs every render
const options = { timeout: 5000, retries: 3 };
useEffect(() => fetchData(options), [options]);

// ✅ Stable reference
const options = useMemo(() => ({ timeout: 5000, retries: 3 }), []);
useEffect(() => fetchData(options), [options]);