mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-22 03:42:14 +00:00
Replace Context.Provider with Context (#7838)
Update to be in line with the recommended way from React 19. Docs https://react.dev/blog/2024/12/05/react-19#context-as-a-provider --------- Co-authored-by: Ricky <rickhanlonii@gmail.com>
This commit is contained in:
@@ -837,9 +837,7 @@ export function TasksProvider({ children }) {
|
||||
|
||||
return (
|
||||
<TasksContext value={tasks}>
|
||||
<TasksDispatchContext
|
||||
value={dispatch}
|
||||
>
|
||||
<TasksDispatchContext value={dispatch}>
|
||||
{children}
|
||||
</TasksDispatchContext>
|
||||
</TasksContext>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -46,7 +46,7 @@ const ThemeContext = createContext('light');
|
||||
|
||||
---
|
||||
|
||||
### `SomeContext` {/*provider*/}
|
||||
### `SomeContext` Provider {/*provider*/}
|
||||
|
||||
Wrap your components into a context provider to specify the value of this context for all components inside:
|
||||
|
||||
@@ -62,6 +62,14 @@ function App() {
|
||||
}
|
||||
```
|
||||
|
||||
<Note>
|
||||
|
||||
Starting in React 19, you can render `<SomeContext>` as a provider.
|
||||
|
||||
In older versions of React, use `<SomeContext.Provider>`.
|
||||
|
||||
</Note>
|
||||
|
||||
#### 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.
|
||||
@@ -215,4 +223,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)
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user