Lesson 18 — useMemo

Skip work that has not changed

Every re-render runs your whole component again, including slow calculations. useMemo(() => calc(), [deps]) remembers (memoizes) the result and only recalculates when something in the dependency array changes. Other state changes reuse the saved value.

const sorted = useMemo(() => [...rows].sort(byName), [rows]);

Why it matters: it keeps typing and clicking smooth when a page filters or sorts big lists.