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.
Developers often use the Context API to avoid prop drilling and make shared data, such as themes, user info, or language, available across components as applications grow. Traditionally, context providers in React accepted only static values, such as strings, objects, or functions. But this often led to extra wrappers, conditional logic, or lifted state to pass context correctly.
React 19 introduces a key improvement: we can now pass a React component 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, the value prop of a context provider had to be a static value—typically an object, string, or function. For dynamic behavior, like checking a user’s role, we often had to lift logic outside the provider or create extra wrapper components. Let’s see ...