Context as a Provider

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 how we traditionally passed static data through a context provider.