Lesson 21 — Context

Share data without passing props

Prop drilling means passing a prop through many components that do not use it, just to reach a deep child. Context avoids it: createContext(defaultValue) makes a context, <Ctx.Provider value={…}> supplies a value to everything inside it, and useContext(Ctx) reads it in any child. Components outside every Provider get the default value.

const Lang = createContext("en");
function Hello() { return <p>{useContext(Lang) === "en" ? "Hi" : "Hola"}</p>; }

Why it matters: themes, the logged-in user and language settings usually live in context.