Lesson 23 — Tabs with context

Share state without passing props

Context lets a parent share a value with every component inside it, however deep, without passing props through each level. createContext() makes a context, <T.Provider value={...}> provides the value, and useContext(T) reads it. Here the Tabs parent shares [active, setActive], so every Tab and Panel stays in sync.

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: themes, logged-in user and tab groups are all shared through context.