Context as a Provider
Learn how React 19 allows context providers to accept components as their value, enabling cleaner, more dynamic, and composable context trees.
As applications grow, it’s common to rely on the Context API to avoid prop drilling and keep shared data (like themes, users, or language) accessible across many components. Traditionally, context providers in React accepted only static or primitive values—like objects, strings, or functions. But this often led to extra wrappers, conditional logic, or lifted state just to pass context correctly.
React 19 brings a powerful enhancement: we can now pass a React component itself as the value of a context provider. This makes our context logic more composable, declarative, and reusable.
Traditional limitation: Only static or primitive values
Before React 19, a context provider’s value prop expected a static value—usually an object, string, or function. If we needed dynamic behavior (like checking a user’s role or feature access), we had to move logic outside the provider or create extra wrappers. ...