Skip to content

Replace Context.Provider with Context #7838

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.

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

Merged
merged 3 commits into from
Jun 3, 2025
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
4 changes: 1 addition & 3 deletions src/content/learn/managing-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -837,9 +837,7 @@ export function TasksProvider({ children }) {

return (
<TasksContext value={tasks}>
<TasksDispatchContext
value={dispatch}
>
<TasksDispatchContext value={dispatch}>
{children}
</TasksDispatchContext>
</TasksContext>
Expand Down
1 change: 0 additions & 1 deletion src/content/learn/scaling-up-with-reducer-and-context.md
Original file line number Diff line number Diff line change
Expand Up @@ -1363,4 +1363,3 @@ As your app grows, you may have many context-reducer pairs like this. This is a
- You can have many context-reducer pairs like this in your app.

</Recap>

5 changes: 3 additions & 2 deletions src/content/reference/react/createContext.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const ThemeContext = createContext('light');

---

### `SomeContext` {/*provider*/}
### `SomeContext` and `SomeContext.Provider` {/*provider*/}

Wrap your components into a context provider to specify the value of this context for all components inside:

Expand All @@ -62,6 +62,8 @@ function App() {
}
```

`SomeContext.Provider` is an alias for `SomeContext` and was used in older versions of React before 19.0.

#### 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 Expand Up @@ -215,4 +217,3 @@ const ThemeContext = createContext('light');
This value never changes. React only uses this value as a fallback if it can't find a matching provider above.

To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context)

2 changes: 1 addition & 1 deletion src/content/reference/react/legacy.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,6 @@ These APIs were removed in React 19:
* [`createFactory`](https://18.react.dev/reference/react/createFactory): use JSX instead.
* Class Components: [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): use [`static contextType`](#static-contexttype) instead.
* Class Components: [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): use [`static contextType`](#static-contexttype) instead.
* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context.Provider`](/reference/react/createContext#provider) instead.
* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context`](/reference/react/createContext#provider) instead.
* Class Components: [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): use a type system like [TypeScript](https://www.typescriptlang.org/) instead.
* Class Components: [`this.refs`](https://18.react.dev//reference/react/Component#refs): use [`createRef`](/reference/react/createRef) instead.