Skip to content

docs: clarify recommendation for using <Context> without .Provider (React 19+) #7910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

docs: clarify recommendation for using <Context> without .Provider (React 19+) #7910

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/content/reference/react/createContext.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,11 @@ In older versions of React, use `<SomeContext.Provider>`.

</Note>

> **Recommendation**
> In React 19+, rendering a Context directly (without `.Provider`) is valid.
> However, for most apps we **recommend** using `MyContext.Provider` explicitly because it keeps intent clear, helps avoid accidental default values, and makes future refactors safer.
> Consider the shorthand only when you intentionally rely on the default value in a very small or localized scope.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, this is not our recommendation. <Context.Provider> is legacy, use <Context>. In the React 19 blog post we said in the future we'll deprecate Context.Provider - as we eventually do with all legacy APIs.


#### Props {/*provider-props*/}

* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it.
Expand Down