From 402765530612f132449ed7c3182895cd8d7c9260 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Mon, 2 Jun 2025 17:37:31 -0400 Subject: [PATCH 1/3] Replace Context.Provider with Context 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 --- src/content/learn/managing-state.md | 4 +--- src/content/learn/scaling-up-with-reducer-and-context.md | 1 - src/content/reference/react/createContext.md | 5 +++-- src/content/reference/react/legacy.md | 2 +- 4 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index f2f02c64b9d..ef7b76e04c2 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -837,9 +837,7 @@ export function TasksProvider({ children }) { return ( - + {children} diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index e193333b9b2..91fb6803fb1 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -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. - diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 5b2cc0eb227..949010b7611 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -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: @@ -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. @@ -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) - diff --git a/src/content/reference/react/legacy.md b/src/content/reference/react/legacy.md index b22a9c97eeb..f4e3ebe289f 100644 --- a/src/content/reference/react/legacy.md +++ b/src/content/reference/react/legacy.md @@ -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. From 0997d57af2bae4206388727e634a757a579f2c4e Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 3 Jun 2025 15:07:49 -0400 Subject: [PATCH 2/3] Update src/content/reference/react/createContext.md Co-authored-by: Ricky --- src/content/reference/react/createContext.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 949010b7611..06e3c65365d 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -46,7 +46,7 @@ const ThemeContext = createContext('light'); --- -### `SomeContext` and `SomeContext.Provider` {/*provider*/} +### `SomeContext` Provider {/*provider*/} Wrap your components into a context provider to specify the value of this context for all components inside: From 3661f11edbcde2c561b50e1b1de4008dc30eb498 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 3 Jun 2025 15:07:54 -0400 Subject: [PATCH 3/3] Update src/content/reference/react/createContext.md Co-authored-by: Ricky --- src/content/reference/react/createContext.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 06e3c65365d..2161fa63c69 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -62,7 +62,13 @@ function App() { } ``` -`SomeContext.Provider` is an alias for `SomeContext` and was used in older versions of React before 19.0. + + +Starting in React 19, you can render `` as a provider. + +In older versions of React, use ``. + + #### Props {/*provider-props*/}