Add <Context> as a provider

2026-02-23 20:23:08 +00:00 · 2024-04-22 11:08:55 -04:00
parent 72af3f3622
commit efcd91eda3
1 changed files with 21 additions and 3 deletions
--- a/src/content/blog/2024/04/01/react-19.md
+++ b/src/content/blog/2024/04/01/react-19.md
@@ -781,6 +781,27 @@ Todo: This requires the new transform, correct?

 For more information, see [Manipulating the DOM with refs](/learn/manipulating-the-dom-with-refs)

+### `<Context>` as a provider {/*context-as-a-provider*/}
+
+In React 19, you can render `<Context>` as a provider instead of `<Context.Provider>`:
+
+
+```js {5,7}
+const ThemeContext = createContext('');
+
+function App({children}) {
+  return (
+    <ThemeContext value="dark">
+      {children}
+    </ThemeContext>
+  );  
+}
+```
+
+In future versions we will deprecate `<Context.Provider>`.
+
+For more, see [`createContext`](/reference/react/createContext).
+
 ### `useDeferredValue` inital value {/*use-deferred-value-initial-value*/}

 We've added an `initalValue` option to `useDeferredValue`:
@@ -801,7 +822,6 @@ When <CodeStep step={3}>initialValue</CodeStep> is provided, React will return i

 For more, see [`useDeferredValue`](/reference/react/useDeferredValue).

-
 ### Support for Document Metadata {/*support-for-metadata-tags*/}

 In HTML, document metadata tags like `<title>` and `<meta>` are reserved for placement in the `<head>` section of the document. In React, it's often convenient these elements deeper in the tree where the data for those tags is available. In the past, these elements would need to be inserted manually in an effect, or by libraries like [`react-helmet`](github.com/nfl/react-helmet). 
@@ -1002,8 +1022,6 @@ TODO

 More improvements?
 - Strict Mode improvements
- useDeferredValue initialValue
- Context.Provider is replaced with Context
 - Refs can now return a cleanup function. (TODO: docs)