Lesson 19 — Provide / inject

Hand data to any descendant

provide(key, value) in a parent makes a value available to every component inside it, at any depth. A child reads it with inject(key). This skips prop drilling (passing a prop through components that do not need it). Note that a component cannot inject what it provides itself — it must be a child. If you provide a ref, children see its changes.

// parent:  provide("user", currentUser)
// any child: const user = inject("user")

Why it matters: themes, the logged-in user and app settings are shared this way.