Lesson 18 — Derived + memo

Remember a calculation

useMemo(fn, deps) runs fn and remembers the result. It only runs fn again when something in the dependency array deps changes. Use it for calculations that are slow or run on big lists; for tiny ones plain code is fine.

const total = useMemo(() => cart.reduce((s, x) => s + x.price, 0), [cart]);

If you forget a dependency, React keeps showing an old, wrong result.

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: dashboards derive many numbers from big lists; memo keeps typing in the page fast.