useRef, useMemo, useCallback and React.memo — React (with Hooks, React 19 & Next.js basics)

8. useRef, useMemo, useCallback and React.memo

Intermediate★ Must knowLesson 8 of 17

jsx

const inputRef = useRef(null);            // DOM reference: inputRef.current.focus()
const renders = useRef(0);                 // mutable value that does NOT trigger re-render
renders.current++;

const filtered = useMemo(
  () => orders.filter(o => o.customer.includes(search)),       // cache an expensive calculation
  [orders, search]
);

const handleSelect = useCallback(id => setSelected(id), []);    // stable function identity

const OrderRow = memo(function OrderRow({ order, onSelect }) {  // skip re-render if props are shallow-equal
  return <tr onClick={() => onSelect(order.id)}><td>{order.customer}</td></tr>;
});

useMemo caches a value; useCallback caches a function (useCallback(fn, deps) = useMemo(() => fn, deps)).
React.memo caches a component's render for the same props — useful only if props are stable (hence useCallback/useMemo for objects and functions passed down).
Don't memoise everything — it has its own cost. The React Compiler (1.0, Oct 2025) adds memoisation automatically at build time, making most manual useMemo/useCallback/memo unnecessary in new code.
forwardRef is no longer needed in React 19 — ref is a regular prop for function components.