chore: infer React context providers and prefer use (#11669)

As of [React 19](https://react.dev/blog/2024/12/05/react-19), context
providers no longer require the `<MyContext.Provider>` syntax and can be
rendered as `<MyContext>` directly. This will be deprecated in future
versions of React, which is now being caught by the
[`@eslint-react/no-context-provider`](https://eslint-react.xyz/docs/rules/no-context-provider)
ESLint rule.

Similarly, the [`use`](https://react.dev/reference/react/use) API is now
preferred over `useContext` because it is more flexible, for example
they can be called within loops and conditional statements. See the
[`@eslint-react/no-use-context`](https://eslint-react.xyz/docs/rules/no-use-context)
ESLint rule for more details.

Author: jacobsfletch

docs/custom-components/custom-providers.mdx

@@ -27,19 +27,19 @@ Then build your Custom Provider as follows:
 
 ```tsx
 'use client'
-import React, { createContext, useContext } from 'react'
+import React, { createContext, use } from 'react'
 
 const MyCustomContext = React.createContext(myCustomValue)
 
 export function MyProvider({ children }: { children: React.ReactNode }) {
   return (
-    <MyCustomContext.Provider value={myCustomValue}>
+    <MyCustomContext value={myCustomValue}>
       {children}
-    </MyCustomContext.Provider>
+    </MyCustomContext>
   )
 }
 
-export const useMyCustomContext = () => useContext(MyCustomContext)
+export const useMyCustomContext = () => use(MyCustomContext)
 ```
 
 _For details on how to build Custom Components, see [Building Custom Components](./overview#building-custom-components)._

examples/auth/src/app/(app)/_providers/Auth/index.tsx

@@ -2,7 +2,7 @@
 
 import type { Permissions } from 'payload/auth'
 
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import React, { createContext, useCallback, use, useEffect, useState } from 'react'
 
 import type { User } from '../../../../payload-types'
 import type { AuthContext, Create, ForgotPassword, Login, Logout, ResetPassword } from './types'
@@ -163,7 +163,7 @@ export const AuthProvider: React.FC<{ api?: 'gql' | 'rest'; children: React.Reac
   )
 
   return (
-    <Context.Provider
+    <Context
       value={{
         create,
         forgotPassword,
@@ -177,10 +177,10 @@ export const AuthProvider: React.FC<{ api?: 'gql' | 'rest'; children: React.Reac
       }}
     >
       {children}
-    </Context.Provider>
+    </Context>
   )
 }
 
-type UseAuth<T = User> = () => AuthContext  
+type UseAuth<T = User> = () => AuthContext
 
-export const useAuth: UseAuth = () => useContext(Context)
+export const useAuth: UseAuth = () => use(Context)

examples/localization/src/providers/HeaderTheme/index.tsx

@@ -2,7 +2,7 @@
 
 import type { Theme } from '@/providers/Theme/types'
 
-import React, { createContext, useCallback, useContext, useState } from 'react'
+import React, { createContext, useCallback, use, useState } from 'react'
 
 import canUseDOM from '@/utilities/canUseDOM'
 
@@ -27,11 +27,7 @@ export const HeaderThemeProvider = ({ children }: { children: React.ReactNode })
     setThemeState(themeToSet)
   }, [])
 
-  return (
-    <HeaderThemeContext.Provider value={{ headerTheme, setHeaderTheme }}>
-      {children}
-    </HeaderThemeContext.Provider>
-  )
+  return <HeaderThemeContext value={{ headerTheme, setHeaderTheme }}>{children}</HeaderThemeContext>
 }
 
-export const useHeaderTheme = (): ContextType => useContext(HeaderThemeContext)
+export const useHeaderTheme = (): ContextType => use(HeaderThemeContext)

examples/localization/src/providers/Theme/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import React, { createContext, useCallback, use, useEffect, useState } from 'react'
 
 import type { Theme, ThemeContextType } from './types'
 
@@ -51,7 +51,7 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
     setThemeState(themeToSet)
   }, [])
 
-  return <ThemeContext.Provider value={{ setTheme, theme }}>{children}</ThemeContext.Provider>
+  return <ThemeContext value={{ setTheme, theme }}>{children}</ThemeContext>
 }
 
-export const useTheme = (): ThemeContextType => useContext(ThemeContext)
+export const useTheme = (): ThemeContextType => use(ThemeContext)

packages/next/src/views/LivePreview/Context/context.ts

@@ -4,7 +4,7 @@ import type { fieldSchemaToJSON } from 'payload/shared'
 import type { Dispatch } from 'react'
 import type React from 'react'
 
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 
 import type { usePopupWindow } from '../usePopupWindow.js'
 import type { SizeReducerAction } from './sizeReducer.js'
@@ -83,4 +83,4 @@ export const LivePreviewContext = createContext<LivePreviewContextType>({
   zoom: 1,
 })
 
-export const useLivePreviewContext = () => useContext(LivePreviewContext)
+export const useLivePreviewContext = () => use(LivePreviewContext)

packages/next/src/views/LivePreview/Context/index.tsx

@@ -166,7 +166,7 @@ export const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({
   }, [previewWindowType, isPopupOpen, handleWindowChange])
 
   return (
-    <LivePreviewContext.Provider
+    <LivePreviewContext
       value={{
         appIsReady,
         breakpoint,
@@ -198,6 +198,6 @@ export const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({
       <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>
         {listeningForMessages && children}
       </DndContext>
-    </LivePreviewContext.Provider>
+    </LivePreviewContext>
   )
 }

packages/next/src/views/Version/Default/SelectedLocalesContext.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { createContext } from 'react'
+import { createContext, use } from 'react'
 
 type SelectedLocalesContextType = {
   selectedLocales: string[]
@@ -10,4 +10,4 @@ export const SelectedLocalesContext = createContext<SelectedLocalesContextType>(
   selectedLocales: [],
 })
 
-export const useSelectedLocales = () => React.useContext(SelectedLocalesContext)
+export const useSelectedLocales = () => use(SelectedLocalesContext)

packages/next/src/views/Version/Default/index.tsx

@@ -182,11 +182,11 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
             />
           )}
         </div>
-        <SelectedLocalesContext.Provider
+        <SelectedLocalesContext
           value={{ selectedLocales: selectedLocales.map((locale) => locale.value) }}
         >
           {doc?.version && RenderedDiff}
-        </SelectedLocalesContext.Provider>
+        </SelectedLocalesContext>
       </Gutter>
     </main>
   )

packages/plugin-import-export/src/components/ImportExportProvider/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { createContext, useCallback, useContext, useState } from 'react'
+import React, { createContext, use, useCallback, useState } from 'react'
 
 type ImportExportContext = {
   collection: string
@@ -16,15 +16,15 @@ export const ImportExportProvider: React.FC<{ children: React.ReactNode }> = ({
   }, [])
 
   return (
-    <ImportExportContext.Provider
+    <ImportExportContext
       value={{
         collection,
         setCollection,
       }}
     >
       {children}
-    </ImportExportContext.Provider>
+    </ImportExportContext>
   )
 }
 
-export const useImportExport = (): ImportExportContext => useContext(ImportExportContext)
+export const useImportExport = (): ImportExportContext => use(ImportExportContext)

packages/richtext-lexical/src/features/blocks/client/component/BlockContent.tsx

@@ -49,7 +49,7 @@ const BlockComponentContext = createContext<BlockComponentContextType>({
   initialState: false,
 })
 
-export const useBlockComponentContext = () => React.useContext(BlockComponentContext)
+export const useBlockComponentContext = () => React.use(BlockComponentContext)
 
 /**
  * The actual content of the Block. This should be INSIDE a Form component,
@@ -99,7 +99,7 @@ export const BlockContent: React.FC<Props> = (props) => {
   )
 
   return CustomBlock ? (
-    <BlockComponentContext.Provider
+    <BlockComponentContext
       value={{
         BlockCollapsible: CollapsibleWithErrorProps,
         EditButton,
@@ -110,7 +110,7 @@ export const BlockContent: React.FC<Props> = (props) => {
     >
       {CustomBlock}
       <BlockDrawer />
-    </BlockComponentContext.Provider>
+    </BlockComponentContext>
   ) : (
     <CollapsibleWithErrorProps>
       <RenderFields