Description
Summary
The example in the “Passing Data Deeply with Context” page uses <LevelContext value={level}> instead of the standard <LevelContext.Provider value={level}>. Since LevelContext is created with createContext(), this usage is misleading — unless a custom wrapper component is being used (which is not shown or explained). This inconsistency may confuse readers, especially since the next page demonstrates the correct usage with .Provider.
Page
https://react.dev/learn/passing-data-deeply-with-context
Details
In the code example under the section “Passing Data Deeply with Context,” context is provided like this:
<LevelContext value={level}>
{children}
</LevelContext>
This is misleading because LevelContext is created using createContext(), and in normal usage, context values must be provided using the .Provider property:
<LevelContext.Provider value={level}>
{children}
</LevelContext.Provider>
Without a wrapper component that encapsulates this behavior (which is not shown or explained), the current example appears to be incorrect or at least confusing. It may mislead new users into thinking context can be used directly like a component.
Please either:
-
Update the example to use the standard syntax with
.Provider, or -
If this is meant to be a custom wrapper component, explicitly show how LevelContext was defined (i.e. as a wrapper that uses LevelContext.Provider under the hood).
Additional context:
This inconsistency becomes more apparent in the next page in the docs, Scaling Up with Reducer and Context, where context is used in the standard and correct form:
<TasksContext.Provider value={tasks}>
<TasksDispatchContext.Provider value={dispatch}>
...
</TasksDispatchContext.Provider>
</TasksContext.Provider>
Thank you for the awesome work on the new docs — just trying to help make it even more clear!