Lesson 14 — Derived values in Next.js

Compute it, don't store it

If a value can be calculated from data you already have, calculate it during render instead of keeping it in separate state. "How many users are online?" is just users.filter((u) => u.online).length. Then it can never get out of sync with the list.

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: duplicated state is a top source of "the counter shows the wrong number" bugs.