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.

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

packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx

@@ -61,7 +61,7 @@ const InlineBlockComponentContext = createContext<InlineBlockComponentContextTyp
   initialState: false,
 })
 
-export const useInlineBlockComponentContext = () => React.useContext(InlineBlockComponentContext)
+export const useInlineBlockComponentContext = () => React.use(InlineBlockComponentContext)
 
 export const InlineBlockComponent: React.FC<Props> = (props) => {
   const { cacheBuster, formData, nodeKey } = props
@@ -426,7 +426,7 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
         </Drawer>
       </EditDepthProvider>
       {CustomBlock ? (
-        <InlineBlockComponentContext.Provider
+        <InlineBlockComponentContext
           value={{
             EditButton,
             initialState,
@@ -437,7 +437,7 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
           }}
         >
           {CustomBlock}
-        </InlineBlockComponentContext.Provider>
+        </InlineBlockComponentContext>
       ) : (
         <InlineBlockContainer>
           {initialState ? <Label /> : <ShimmerEffect height="15px" width="40px" />}

packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.tsx

@@ -16,7 +16,7 @@ import { INSERT_TABLE_COMMAND, TableCellNode, TableNode, TableRowNode } from '@l
 import { mergeRegister } from '@lexical/utils'
 import { formatDrawerSlug, useEditDepth } from '@payloadcms/ui'
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical'
-import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+import { createContext, use, useEffect, useMemo, useState } from 'react'
 import * as React from 'react'
 
 import type { PluginComponent } from '../../../../typesClient.js'
@@ -64,7 +64,7 @@ export function TableContext({ children }: { children: JSX.Element }) {
     cellEditorPlugins: null,
   })
   return (
-    <CellContext.Provider
+    <CellContext
       value={useMemo(
         () => ({
           cellEditorConfig: contextValue.cellEditorConfig,
@@ -77,13 +77,13 @@ export function TableContext({ children }: { children: JSX.Element }) {
       )}
     >
       {children}
-    </CellContext.Provider>
+    </CellContext>
   )
 }
 
 export const TablePlugin: PluginComponent = () => {
   const [editor] = useLexicalComposerContext()
-  const cellContext = useContext(CellContext)
+  const cellContext = use(CellContext)
   const editDepth = useEditDepth()
   const {
     fieldProps: { schemaPath },

packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx

@@ -48,7 +48,7 @@ export function DropDownItem({
 
   const ref = useRef<HTMLButtonElement>(null)
 
-  const dropDownContext = React.useContext(DropDownContext)
+  const dropDownContext = React.use(DropDownContext)
 
   if (dropDownContext === null) {
     throw new Error('DropDownItem must be used within a DropDown')
@@ -170,7 +170,7 @@ function DropDownItems({
   }, [items, highlightedItem])
 
   return (
-    <DropDownContext.Provider value={contextValue}>
+    <DropDownContext value={contextValue}>
       <div
         className={(itemsContainerClassNames ?? ['toolbar-popup__dropdown-items']).join(' ')}
         onKeyDown={handleKeyDown}
@@ -178,7 +178,7 @@ function DropDownItems({
       >
         {children}
       </div>
-    </DropDownContext.Provider>
+    </DropDownContext>
   )
 }
 

packages/richtext-lexical/src/lexical/config/client/EditorConfigProvider.tsx

@@ -6,7 +6,7 @@ import type { MarkRequired } from 'ts-essentials'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { useEditDepth } from '@payloadcms/ui'
 import * as React from 'react'
-import { createContext, useContext, useMemo, useRef, useState } from 'react'
+import { createContext, use, useMemo, useRef, useState } from 'react'
 
 import type { InlineBlockNode } from '../../../features/blocks/client/nodes/InlineBlocksNode.js'
 import type { LexicalRichTextFieldProps } from '../../../types.js'
@@ -140,11 +140,11 @@ export const EditorConfigProvider = ({
     ],
   )
 
-  return <Context.Provider value={editorContext}>{children}</Context.Provider>
+  return <Context value={editorContext}>{children}</Context>
 }
 
 export const useEditorConfigContext = (): EditorConfigContextType => {
-  const context = useContext(Context)
+  const context = use(Context)
   if (context === undefined) {
     throw new Error('useEditorConfigContext must be used within an EditorConfigProvider')
   }

packages/richtext-slate/src/field/providers/ElementButtonProvider.tsx

@@ -25,17 +25,17 @@ export const ElementButtonProvider: React.FC<
   const { children, ...rest } = props
 
   return (
-    <ElementButtonContext.Provider
+    <ElementButtonContext
       value={{
         ...rest,
       }}
     >
       {children}
-    </ElementButtonContext.Provider>
+    </ElementButtonContext>
   )
 }
 
 export const useElementButton = () => {
-  const path = React.useContext(ElementButtonContext)
+  const path = React.use(ElementButtonContext)
   return path
 }

packages/richtext-slate/src/field/providers/ElementProvider.tsx

@@ -33,17 +33,17 @@ export const ElementProvider: React.FC<
   const { childNodes, children, ...rest } = props
 
   return (
-    <ElementContext.Provider
+    <ElementContext
       value={{
         ...rest,
         children: childNodes,
       }}
     >
       {children}
-    </ElementContext.Provider>
+    </ElementContext>
   )
 }
 
 export const useElement = <T,>(): ElementContextType<T> => {
-  return React.useContext(ElementContext) as ElementContextType<T>
+  return React.use(ElementContext) as ElementContextType<T>
 }

packages/richtext-slate/src/field/providers/LeafButtonProvider.tsx

@@ -24,17 +24,17 @@ export const LeafButtonProvider: React.FC<
   const { children, ...rest } = props
 
   return (
-    <LeafButtonContext.Provider
+    <LeafButtonContext
       value={{
         ...rest,
       }}
     >
       {children}
-    </LeafButtonContext.Provider>
+    </LeafButtonContext>
   )
 }
 
 export const useLeafButton = () => {
-  const path = React.useContext(LeafButtonContext)
+  const path = React.use(LeafButtonContext)
   return path
 }

packages/richtext-slate/src/field/providers/LeafProvider.tsx

@@ -32,18 +32,18 @@ export const LeafProvider: React.FC<
   const { children, result, ...rest } = props
 
   return (
-    <LeafContext.Provider
+    <LeafContext
       value={{
         ...rest,
         children: result,
       }}
     >
       {children}
-    </LeafContext.Provider>
+    </LeafContext>
   )
 }
 
 export const useLeaf = () => {
-  const path = React.useContext(LeafContext)
+  const path = React.use(LeafContext)
   return path
 }

packages/richtext-slate/src/utilities/SlatePropsProvider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { createContext, type ReactNode, useContext } from 'react'
+import React, { createContext, type ReactNode, use } from 'react'
 
 interface SlateProps {
   schemaPath: string
@@ -15,11 +15,11 @@ export function SlatePropsProvider({
   children: ReactNode
   schemaPath: string
 }) {
-  return <SlatePropsContext.Provider value={{ schemaPath }}>{children}</SlatePropsContext.Provider>
+  return <SlatePropsContext value={{ schemaPath }}>{children}</SlatePropsContext>
 }
 
 export function useSlateProps() {
-  const context = useContext(SlatePropsContext)
+  const context = use(SlatePropsContext)
   if (!context) {
     throw new Error('useSlateProps must be used within SlatePropsProvider')
   }

packages/ui/src/elements/BulkUpload/FormsManager/index.tsx

@@ -514,7 +514,7 @@ export function FormsManagerProvider({ children }: FormsManagerProps) {
   ])
 
   return (
-    <Context.Provider
+    <Context
       value={{
         activeIndex: state.activeIndex,
         addFiles,
@@ -545,10 +545,10 @@ export function FormsManagerProvider({ children }: FormsManagerProps) {
         />
       )}
       {children}
-    </Context.Provider>
+    </Context>
   )
 }
 
 export function useFormsManager() {
-  return React.useContext(Context)
+  return React.use(Context)
 }

packages/ui/src/elements/BulkUpload/index.tsx

@@ -134,7 +134,7 @@ export function BulkUploadProvider({ children }: { readonly children: React.Reac
   }, [])
 
   return (
-    <Context.Provider
+    <Context
       value={{
         collectionSlug: collection,
         currentActivePath,
@@ -164,11 +164,11 @@ export function BulkUploadProvider({ children }: { readonly children: React.Reac
         {children}
         <BulkUploadDrawer />
       </React.Fragment>
-    </Context.Provider>
+    </Context>
   )
 }
 
-export const useBulkUpload = () => React.useContext(Context)
+export const useBulkUpload = () => React.use(Context)
 
 export function useBulkUploadDrawerSlug() {
   const depth = useDrawerDepth()

packages/ui/src/elements/Collapsible/provider.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { createContext, useContext } from 'react'
+import React, { createContext, use } from 'react'
 
 type ContextType = {
   isCollapsed: boolean
@@ -32,7 +32,7 @@ export const CollapsibleProvider: React.FC<{
     }
   }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])
 
-  return <Context.Provider value={contextValue}>{children}</Context.Provider>
+  return <Context value={contextValue}>{children}</Context>
 }
 
-export const useCollapsible = (): ContextType => useContext(Context)
+export const useCollapsible = (): ContextType => use(Context)

packages/ui/src/elements/DocumentDrawer/Provider.tsx

@@ -1,6 +1,6 @@
 import type { ClientCollectionConfig, Data, FormState, TypeWithID } from 'payload'
 
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 
 export type DocumentDrawerContextProps = {
   readonly clearDoc?: () => void
@@ -31,15 +31,11 @@ export const DocumentDrawerContextProvider: React.FC<
     children: React.ReactNode
   } & DocumentDrawerContextProps
 > = ({ children, ...rest }) => {
-  return (
-    <DocumentDrawerCallbacksContext.Provider value={rest}>
-      {children}
-    </DocumentDrawerCallbacksContext.Provider>
-  )
+  return <DocumentDrawerCallbacksContext value={rest}>{children}</DocumentDrawerCallbacksContext>
 }
 
 export const useDocumentDrawerContext = (): DocumentDrawerContextType => {
-  const context = useContext(DocumentDrawerCallbacksContext)
+  const context = use(DocumentDrawerCallbacksContext)
 
   if (!context) {
     throw new Error('useDocumentDrawerContext must be used within a DocumentDrawerProvider')

packages/ui/src/elements/Drawer/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { Modal, useModal } from '@faceless-ui/modal'
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import React, { createContext, use, useCallback, useEffect, useState } from 'react'
 
 import type { Props, TogglerProps } from './types.js'
 
@@ -140,7 +140,7 @@ export const DrawerDepthProvider: React.FC<{ children: React.ReactNode }> = ({ c
   const parentDepth = useDrawerDepth()
   const depth = parentDepth + 1
 
-  return <DrawerDepthContext.Provider value={depth}>{children}</DrawerDepthContext.Provider>
+  return <DrawerDepthContext value={depth}>{children}</DrawerDepthContext>
 }
 
-export const useDrawerDepth = (): number => useContext(DrawerDepthContext)
+export const useDrawerDepth = (): number => use(DrawerDepthContext)

packages/ui/src/elements/EditMany/DrawerContent.tsx

@@ -266,7 +266,7 @@ export const EditManyDrawerContent: React.FC<
       unpublishedVersionCount={0}
       versionCount={0}
     >
-      <OperationContext.Provider value="update">
+      <OperationContext value="update">
         <div className={`${baseClass}__main`}>
           <div className={`${baseClass}__header`}>
             <h2 className={`${baseClass}__header__title`}>
@@ -332,7 +332,7 @@ export const EditManyDrawerContent: React.FC<
             </div>
           </Form>
         </div>
-      </OperationContext.Provider>
+      </OperationContext>
     </DocumentInfoProvider>
   )
 }

packages/ui/src/elements/ListDrawer/Provider.tsx

@@ -1,6 +1,6 @@
 import type { CollectionSlug, Data, ListQuery } from 'payload'
 
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 
 import type { useSelection } from '../../providers/Selection/index.js'
 import type { UseDocumentDrawer } from '../DocumentDrawer/types.js'
@@ -40,14 +40,14 @@ export const ListDrawerContextProvider: React.FC<
   } & ListDrawerContextProps
 > = ({ children, ...rest }) => {
   return (
-    <ListDrawerContext.Provider value={{ isInDrawer: Boolean(rest.drawerSlug), ...rest }}>
+    <ListDrawerContext value={{ isInDrawer: Boolean(rest.drawerSlug), ...rest }}>
       {children}
-    </ListDrawerContext.Provider>
+    </ListDrawerContext>
   )
 }
 
 export const useListDrawerContext = (): ListDrawerContextType => {
-  const context = useContext(ListDrawerContext)
+  const context = use(ListDrawerContext)
 
   if (!context) {
     throw new Error('useListDrawerContext must be used within a ListDrawerContextProvider')

packages/ui/src/elements/LoadingOverlay/index.tsx

@@ -54,7 +54,7 @@ export const LoadingOverlayProvider: React.FC<{ children?: React.ReactNode }> =
   )
 
   return (
-    <Context.Provider
+    <Context
       value={{
         isOnScreen: isMounted,
         toggleLoadingOverlay,
@@ -69,12 +69,12 @@ export const LoadingOverlayProvider: React.FC<{ children?: React.ReactNode }> =
         />
       )}
       {children}
-    </Context.Provider>
+    </Context>
   )
 }
 
 export const useLoadingOverlay = (): LoadingOverlayContext => {
-  const contextHook = React.useContext(Context)
+  const contextHook = React.use(Context)
   if (contextHook === undefined) {
     throw new Error('useLoadingOverlay must be used within a LoadingOverlayProvider')
   }

packages/ui/src/elements/Nav/context.tsx

@@ -21,7 +21,7 @@ export const NavContext = React.createContext<NavContextType>({
   shouldAnimate: false,
 })
 
-export const useNav = () => React.useContext(NavContext)
+export const useNav = () => React.use(NavContext)
 
 const getNavPreference = async (getPreference): Promise<boolean> => {
   const navPrefs = await getPreference('nav')
@@ -111,8 +111,8 @@ export const NavProvider: React.FC<{
   }, [])
 
   return (
-    <NavContext.Provider value={{ hydrated, navOpen, navRef, setNavOpen, shouldAnimate }}>
+    <NavContext value={{ hydrated, navOpen, navRef, setNavOpen, shouldAnimate }}>
       {children}
-    </NavContext.Provider>
+    </NavContext>
   )
 }

packages/ui/src/elements/StepNav/context.tsx

@@ -1,9 +1,9 @@
 'use client'
-import React, { createContext, useContext, useState } from 'react'
+import React, { createContext, use, useState } from 'react'
 
 import type { ContextType } from './types.js'
 
-export const useStepNav = (): ContextType => useContext(Context)
+export const useStepNav = (): ContextType => use(Context)
 
 export const Context = createContext({} as ContextType)
 
@@ -11,13 +11,13 @@ export const StepNavProvider: React.FC<{ children?: React.ReactNode }> = ({ chil
   const [stepNav, setStepNav] = useState([])
 
   return (
-    <Context.Provider
+    <Context
       value={{
         setStepNav,
         stepNav,
       }}
     >
       {children}
-    </Context.Provider>
+    </Context>
   )
 }

packages/ui/src/elements/Table/RelationshipProvider/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { TypeWithID } from 'payload'
 
-import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react'
+import React, { createContext, use, useCallback, useEffect, useReducer, useRef } from 'react'
 
 import { useDebounce } from '../../../hooks/useDebounce.js'
 import { useConfig } from '../../../providers/Config/index.js'
@@ -115,7 +115,7 @@ export const RelationshipProvider: React.FC<{ readonly children?: React.ReactNod
     [],
   )
 
-  return <Context.Provider value={{ documents, getRelationships }}>{children}</Context.Provider>
+  return <Context value={{ documents, getRelationships }}>{children}</Context>
 }
 
-export const useListRelationships = (): ListRelationshipContext => useContext(Context)
+export const useListRelationships = (): ListRelationshipContext => use(Context)

packages/ui/src/elements/TableColumns/RenderDefaultCell/index.tsx

@@ -13,7 +13,7 @@ const baseClass = 'default-cell'
 const CellPropsContext = React.createContext<DefaultCellComponentProps | null>(null)
 
 export const useCellProps = (): DefaultCellComponentProps | null =>
-  React.useContext(CellPropsContext)
+  React.use(CellPropsContext)
 
 export const RenderDefaultCell: React.FC<{
   clientProps: DefaultCellComponentProps
@@ -44,8 +44,8 @@ export const RenderDefaultCell: React.FC<{
   }
 
   return (
-    <CellPropsContext.Provider value={propsToPass}>
+    <CellPropsContext value={propsToPass}>
       {isLinkedColumn && LinkedCellOverride ? LinkedCellOverride : <DefaultCell {...propsToPass} />}
-    </CellPropsContext.Provider>
+    </CellPropsContext>
   )
 }

packages/ui/src/elements/TableColumns/context.ts

@@ -1,7 +1,7 @@
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 
 import type { ITableColumns } from './types.js'
 
 export const TableColumnContext = createContext<ITableColumns>({} as ITableColumns)
 
-export const useTableColumns = (): ITableColumns => useContext(TableColumnContext)
+export const useTableColumns = (): ITableColumns => use(TableColumnContext)

packages/ui/src/elements/TableColumns/index.tsx

@@ -90,7 +90,7 @@ export const TableColumnsProvider: React.FC<TableColumnsProviderProps> = ({
   }, [defaultColumns, setActiveColumns])
 
   return (
-    <TableColumnContext.Provider
+    <TableColumnContext
       value={{
         columns: columnState,
         LinkedCellOverride,
@@ -101,6 +101,6 @@ export const TableColumnsProvider: React.FC<TableColumnsProviderProps> = ({
       }}
     >
       {children}
-    </TableColumnContext.Provider>
+    </TableColumnContext>
   )
 }

packages/ui/src/fields/Group/provider.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { createContext, useContext } from 'react'
+import React, { createContext, use } from 'react'
 
 export const GroupContext = createContext(false)
 
@@ -7,7 +7,7 @@ export const GroupProvider: React.FC<{ children?: React.ReactNode; withinGroup?:
   children,
   withinGroup = true,
 }) => {
-  return <GroupContext.Provider value={withinGroup}>{children}</GroupContext.Provider>
+  return <GroupContext value={withinGroup}>{children}</GroupContext>
 }
 
-export const useGroup = (): boolean => useContext(GroupContext)
+export const useGroup = (): boolean => use(GroupContext)

packages/ui/src/fields/Row/provider.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { createContext, useContext } from 'react'
+import React, { createContext, use } from 'react'
 
 export const Context = createContext(false)
 
@@ -7,7 +7,7 @@ export const RowProvider: React.FC<{ children?: React.ReactNode; withinRow?: boo
   children,
   withinRow = true,
 }) => {
-  return <Context.Provider value={withinRow}>{children}</Context.Provider>
+  return <Context value={withinRow}>{children}</Context>
 }
 
-export const useRow = (): boolean => useContext(Context)
+export const useRow = (): boolean => use(Context)

packages/ui/src/fields/Tabs/provider.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { createContext, useContext } from 'react'
+import React, { createContext, use } from 'react'
 
 const Context = createContext(false)
 
@@ -7,7 +7,7 @@ export const TabsProvider: React.FC<{ children?: React.ReactNode; withinTab?: bo
   children,
   withinTab = true,
 }) => {
-  return <Context.Provider value={withinTab}>{children}</Context.Provider>
+  return <Context value={withinTab}>{children}</Context>
 }
 
-export const useTabs = (): boolean => useContext(Context)
+export const useTabs = (): boolean => use(Context)

packages/ui/src/forms/Form/context.ts

@@ -1,7 +1,7 @@
 'use client'
 import type { RenderedField } from 'payload'
 
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 import {
   createContext as createSelectorContext,
   useContextSelector,
@@ -31,23 +31,23 @@ export type RenderedFieldSlots = Map<string, RenderedField>
  *
  * @see https://payloadcms.com/docs/admin/react-hooks#useform
  */
-const useForm = (): Context => useContext(FormContext)
+const useForm = (): Context => use(FormContext)
 /**
  * Get the state of the document-level form. This is useful if you need to access the document-level Form from within a child Form.
  * This is the case withing lexical Blocks, as each lexical blocks renders their own Form.
  */
-const useDocumentForm = (): Context => useContext(DocumentFormContext)
+const useDocumentForm = (): Context => use(DocumentFormContext)
 
-const useWatchForm = (): Context => useContext(FormWatchContext)
-const useFormSubmitted = (): boolean => useContext(SubmittedContext)
-const useFormProcessing = (): boolean => useContext(ProcessingContext)
+const useWatchForm = (): Context => use(FormWatchContext)
+const useFormSubmitted = (): boolean => use(SubmittedContext)
+const useFormProcessing = (): boolean => use(ProcessingContext)
 /**
  * If the form has started processing in the background (e.g.
  * if autosave is running), this will be true.
  */
-const useFormBackgroundProcessing = (): boolean => useContext(BackgroundProcessingContext)
-const useFormModified = (): boolean => useContext(ModifiedContext)
-const useFormInitializing = (): boolean => useContext(InitializingContext)
+const useFormBackgroundProcessing = (): boolean => use(BackgroundProcessingContext)
+const useFormModified = (): boolean => use(ModifiedContext)
+const useFormInitializing = (): boolean => use(InitializingContext)
 
 /**
  * Get and set the value of a form field based on a selector

packages/ui/src/forms/Form/index.tsx

@@ -771,7 +771,7 @@ export const Form: React.FC<FormProps> = (props) => {
   )
 
   const DocumentFormContextComponent: React.FC<any> = isDocumentForm
-    ? DocumentFormContext.Provider
+    ? DocumentFormContext
     : React.Fragment
 
   const documentFormContextProps = isDocumentForm
@@ -792,28 +792,29 @@ export const Form: React.FC<FormProps> = (props) => {
       ref={formRef}
     >
       <DocumentFormContextComponent {...documentFormContextProps}>
-        <FormContext.Provider value={contextRef.current}>
-          <FormWatchContext.Provider
+        <FormContext value={contextRef.current}>
+          <FormWatchContext
             value={{
               fields,
               ...contextRef.current,
             }}
           >
-            <SubmittedContext.Provider value={submitted}>
-              <InitializingContext.Provider value={!isMounted || (isMounted && initializing)}>
-                <ProcessingContext.Provider value={processing}>
-                  <BackgroundProcessingContext.Provider value={backgroundProcessing}>
-                    <ModifiedContext.Provider value={modified}>
+            <SubmittedContext value={submitted}>
+              <InitializingContext value={!isMounted || (isMounted && initializing)}>
+                <ProcessingContext value={processing}>
+                  <BackgroundProcessingContext value={backgroundProcessing}>
+                    <ModifiedContext value={modified}>
+                      {/* eslint-disable-next-line @eslint-react/no-context-provider */}
                       <FormFieldsContext.Provider value={fieldsReducer}>
                         {children}
                       </FormFieldsContext.Provider>
-                    </ModifiedContext.Provider>
-                  </BackgroundProcessingContext.Provider>
-                </ProcessingContext.Provider>
-              </InitializingContext.Provider>
-            </SubmittedContext.Provider>
-          </FormWatchContext.Provider>
-        </FormContext.Provider>
+                    </ModifiedContext>
+                  </BackgroundProcessingContext>
+                </ProcessingContext>
+              </InitializingContext>
+            </SubmittedContext>
+          </FormWatchContext>
+        </FormContext>
       </DocumentFormContextComponent>
     </El>
   )

packages/ui/src/forms/RowLabel/Context/index.tsx

@@ -28,9 +28,9 @@ export const RowLabelProvider: React.FC<Props<unknown>> = ({ children, path, row
 
   const data = arrayData || collapsibleData
 
-  return <RowLabel.Provider value={{ data, path, rowNumber }}>{children}</RowLabel.Provider>
+  return <RowLabel value={{ data, path, rowNumber }}>{children}</RowLabel>
 }
 
 export const useRowLabel = <T,>() => {
-  return React.useContext(RowLabel) as RowLabelType<T>
+  return React.use(RowLabel) as RowLabelType<T>
 }

packages/ui/src/providers/Actions/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { createContext, useContext, useState } from 'react'
+import React, { createContext, use, useState } from 'react'
 
 type ActionsContextType = {
   Actions: {
@@ -14,7 +14,7 @@ const ActionsContext = createContext<ActionsContextType>({
   setViewActions: () => {},
 })
 
-export const useActions = () => useContext(ActionsContext)
+export const useActions = () => use(ActionsContext)
 
 export const ActionsProvider: React.FC<{
   readonly Actions?: {
@@ -25,7 +25,7 @@ export const ActionsProvider: React.FC<{
   const [viewActions, setViewActions] = useState(Actions)
 
   return (
-    <ActionsContext.Provider
+    <ActionsContext
       value={{
         Actions: {
           ...viewActions,
@@ -35,6 +35,6 @@ export const ActionsProvider: React.FC<{
       }}
     >
       {children}
-    </ActionsContext.Provider>
+    </ActionsContext>
   )
 }

packages/ui/src/providers/Auth/index.tsx

@@ -5,7 +5,7 @@ import { useModal } from '@faceless-ui/modal'
 import { usePathname, useRouter } from 'next/navigation.js'
 import { formatAdminURL } from 'payload/shared'
 import * as qs from 'qs-esm'
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import React, { createContext, use, useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 import { stayLoggedInModalSlug } from '../../elements/StayLoggedIn/index.js'
@@ -307,7 +307,7 @@ export function AuthProvider({
   }, [tokenExpiration, openModal, i18n, setNewUser, user, redirectToInactivityRoute])
 
   return (
-    <Context.Provider
+    <Context
       value={{
         fetchFullUser,
         logOut,
@@ -322,8 +322,8 @@ export function AuthProvider({
       }}
     >
       {children}
-    </Context.Provider>
+    </Context>
   )
 }
 
-export const useAuth = <T = ClientUser,>(): AuthContext<T> => useContext(Context) as AuthContext<T>
+export const useAuth = <T = ClientUser,>(): AuthContext<T> => use(Context) as AuthContext<T>

packages/ui/src/providers/ClientFunction/index.tsx

@@ -35,21 +35,19 @@ export const ClientFunctionProvider: React.FC<{ children: React.ReactNode }> = (
   }, [])
 
   return (
-    <ModifyClientFunctionContext.Provider
+    <ModifyClientFunctionContext
       value={{
         addClientFunction,
         removeClientFunction,
       }}
     >
-      <ClientFunctionsContext.Provider value={clientFunctions}>
-        {children}
-      </ClientFunctionsContext.Provider>
-    </ModifyClientFunctionContext.Provider>
+      <ClientFunctionsContext value={clientFunctions}>{children}</ClientFunctionsContext>
+    </ModifyClientFunctionContext>
   )
 }
 
 export const useAddClientFunction = (key: string, func: any) => {
-  const { addClientFunction, removeClientFunction } = React.useContext(ModifyClientFunctionContext)
+  const { addClientFunction, removeClientFunction } = React.use(ModifyClientFunctionContext)
 
   React.useEffect(() => {
     addClientFunction({
@@ -67,5 +65,5 @@ export const useAddClientFunction = (key: string, func: any) => {
 }
 
 export const useClientFunctions = () => {
-  return React.useContext(ClientFunctionsContext)
+  return React.use(ClientFunctionsContext)
 }

packages/ui/src/providers/Config/index.tsx

@@ -9,7 +9,7 @@ import type {
   UnsanitizedClientConfig,
 } from 'payload'
 
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import React, { createContext, use, useCallback, useEffect, useMemo, useState } from 'react'
 
 type GetEntityConfigFn = {
   // Overload #1: collectionSlug only
@@ -99,10 +99,8 @@ export const ConfigProvider: React.FC<{
   )
 
   return (
-    <RootConfigContext.Provider value={{ config, getEntityConfig, setConfig }}>
-      {children}
-    </RootConfigContext.Provider>
+    <RootConfigContext value={{ config, getEntityConfig, setConfig }}>{children}</RootConfigContext>
   )
 }
 
-export const useConfig = (): ClientConfigContext => useContext(RootConfigContext)
+export const useConfig = (): ClientConfigContext => use(RootConfigContext)

packages/ui/src/providers/DocumentEvents/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { DocumentEvent } from 'payload'
 
-import React, { createContext, useContext, useState } from 'react'
+import React, { createContext, use, useState } from 'react'
 
 const Context = createContext({
   mostRecentUpdate: null,
@@ -11,7 +11,7 @@ const Context = createContext({
 export const DocumentEventsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [mostRecentUpdate, reportUpdate] = useState<DocumentEvent>(null)
 
-  return <Context.Provider value={{ mostRecentUpdate, reportUpdate }}>{children}</Context.Provider>
+  return <Context value={{ mostRecentUpdate, reportUpdate }}>{children}</Context>
 }
 
-export const useDocumentEvents = () => useContext(Context)
+export const useDocumentEvents = () => use(Context)

packages/ui/src/providers/DocumentInfo/index.tsx

@@ -4,8 +4,8 @@ import type { ClientUser, DocumentPreferences, SanitizedDocumentPermissions } fr
 import * as qs from 'qs-esm'
 import React, {
   createContext,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -28,7 +28,7 @@ const Context = createContext({} as DocumentInfoContext)
 
 export type * from './types.js'
 
-export const useDocumentInfo = (): DocumentInfoContext => useContext(Context)
+export const useDocumentInfo = (): DocumentInfoContext => use(Context)
 
 const DocumentInfo: React.FC<
   {
@@ -360,7 +360,7 @@ const DocumentInfo: React.FC<
     versionCount,
   }
 
-  return <Context.Provider value={value}>{children}</Context.Provider>
+  return <Context value={value}>{children}</Context>
 }
 
 export const DocumentInfoProvider: React.FC<

packages/ui/src/providers/EditDepth/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { createContext, useContext } from 'react'
+import React, { createContext, use } from 'react'
 
 export const EditDepthContext = createContext(0)
 
@@ -7,7 +7,7 @@ export const EditDepthProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   const parentDepth = useEditDepth()
   const depth = parentDepth + 1
 
-  return <EditDepthContext.Provider value={depth}>{children}</EditDepthContext.Provider>
+  return <EditDepthContext value={depth}>{children}</EditDepthContext>
 }
 
-export const useEditDepth = (): number => useContext(EditDepthContext)
+export const useEditDepth = (): number => use(EditDepthContext)

packages/ui/src/providers/EntityVisibility/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { SanitizedCollectionConfig, SanitizedGlobalConfig, VisibleEntities } from 'payload'
 
-import React, { createContext, useCallback, useContext } from 'react'
+import React, { createContext, use, useCallback } from 'react'
 
 export type VisibleEntitiesContextType = {
   isEntityVisible: ({
@@ -42,11 +42,11 @@ export const EntityVisibilityProvider: React.FC<{
   )
 
   return (
-    <EntityVisibilityContext.Provider value={{ isEntityVisible, visibleEntities }}>
+    <EntityVisibilityContext value={{ isEntityVisible, visibleEntities }}>
       {children}
-    </EntityVisibilityContext.Provider>
+    </EntityVisibilityContext>
   )
 }
 
 export const useEntityVisibility = (): VisibleEntitiesContextType =>
-  useContext(EntityVisibilityContext)
+  use(EntityVisibilityContext)

packages/ui/src/providers/ListQuery/context.ts

@@ -1,7 +1,7 @@
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 
 import type { IListQueryContext } from './types.js'
 
 export const ListQueryContext = createContext({} as IListQueryContext)
 
-export const useListQuery = (): IListQueryContext => useContext(ListQueryContext)
+export const useListQuery = (): IListQueryContext => use(ListQueryContext)

packages/ui/src/providers/ListQuery/index.tsx

@@ -178,7 +178,7 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
   }, [defaultSort, defaultLimit, modifySearchParams, columns])
 
   return (
-    <ListQueryContext.Provider
+    <ListQueryContext
       value={{
         data,
         handlePageChange,
@@ -191,6 +191,6 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
       }}
     >
       {children}
-    </ListQueryContext.Provider>
+    </ListQueryContext>
   )
 }

packages/ui/src/providers/Locale/index.tsx

@@ -3,7 +3,7 @@
 import type { Locale } from 'payload'
 
 import { useSearchParams } from 'next/navigation.js'
-import React, { createContext, useContext, useEffect, useRef, useState } from 'react'
+import React, { createContext, use, useEffect, useRef, useState } from 'react'
 
 import { findLocaleFromCode } from '../../utilities/findLocaleFromCode.js'
 import { useAuth } from '../Auth/index.js'
@@ -114,18 +114,18 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Loc
   }, [defaultLocale, getPreference, localization, fetchURL, localeFromParams, user?.id])
 
   return (
-    <LocaleContext.Provider value={locale}>
-      <LocaleLoadingContext.Provider value={{ localeIsLoading: isLoading, setLocaleIsLoading }}>
+    <LocaleContext value={locale}>
+      <LocaleLoadingContext value={{ localeIsLoading: isLoading, setLocaleIsLoading }}>
         {children}
-      </LocaleLoadingContext.Provider>
-    </LocaleContext.Provider>
+      </LocaleLoadingContext>
+    </LocaleContext>
   )
 }
 
-export const useLocaleLoading = () => useContext(LocaleLoadingContext)
+export const useLocaleLoading = () => use(LocaleLoadingContext)
 
 /**
  * TODO: V4
  * The return type of the `useLocale` hook will change in v4. It will return `null | Locale` instead of `false | {} | Locale`.
  */
-export const useLocale = (): Locale => useContext(LocaleContext)
+export const useLocale = (): Locale => use(LocaleContext)

packages/ui/src/providers/Operation/index.tsx

@@ -1,13 +1,13 @@
 'use client'
-import React, { createContext, useContext } from 'react'
+import React, { createContext, use } from 'react'
 
 export const OperationContext = createContext('' as Operation)
 
 export const OperationProvider: React.FC<{ children: React.ReactNode; operation: Operation }> = ({
   children,
   operation,
-}) => <OperationContext.Provider value={operation}>{children}</OperationContext.Provider>
+}) => <OperationContext value={operation}>{children}</OperationContext>
 
 export type Operation = 'create' | 'update'
 
-export const useOperation = (): Operation | undefined => useContext(OperationContext)
+export const useOperation = (): Operation | undefined => use(OperationContext)

packages/ui/src/providers/Params/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useParams as useNextParams } from 'next/navigation.js'
-import React, { createContext, useContext } from 'react'
+import React, { createContext, use } from 'react'
 
 export type Params = ReturnType<typeof useNextParams>
 interface IParamsContext extends Params {}
@@ -18,7 +18,7 @@ const Context = createContext<IParamsContext>({} as IParamsContext)
  */
 export const ParamsProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const params = useNextParams()
-  return <Context.Provider value={params}>{children}</Context.Provider>
+  return <Context value={params}>{children}</Context>
 }
 
 /**
@@ -29,4 +29,4 @@ export const ParamsProvider: React.FC<{ children?: React.ReactNode }> = ({ child
  * import { useParams } from 'next/navigation'
  * ```
  */
-export const useParams = (): IParamsContext => useContext(Context)
+export const useParams = (): IParamsContext => use(Context)

packages/ui/src/providers/Preferences/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { dequal } from 'dequal/lite' // lite: no need for Map and Set support
-import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react'
+import React, { createContext, use, useCallback, useEffect, useRef } from 'react'
 
 import { useTranslation } from '../../providers/Translation/index.js'
 import { requests } from '../../utilities/api.js'
@@ -149,7 +149,7 @@ export const PreferencesProvider: React.FC<{ children?: React.ReactNode }> = ({
   contextRef.current.getPreference = getPreference
   contextRef.current.setPreference = setPreference
 
-  return <Context.Provider value={contextRef.current}>{children}</Context.Provider>
+  return <Context value={contextRef.current}>{children}</Context>
 }
 
-export const usePreferences = (): PreferencesContext => useContext(Context)
+export const usePreferences = (): PreferencesContext => use(Context)

packages/ui/src/providers/RouteCache/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { usePathname, useRouter } from 'next/navigation.js'
-import React, { createContext, useCallback, useContext, useEffect } from 'react'
+import React, { createContext, use, useCallback, useEffect } from 'react'
 
 export type RouteCacheContext = {
   clearRouteCache: () => void
@@ -23,7 +23,7 @@ export const RouteCache: React.FC<{ children: React.ReactNode }> = ({ children }
     clearRouteCache()
   }, [pathname, clearRouteCache])
 
-  return <Context.Provider value={{ clearRouteCache }}>{children}</Context.Provider>
+  return <Context value={{ clearRouteCache }}>{children}</Context>
 }
 
-export const useRouteCache = () => useContext(Context)
+export const useRouteCache = () => use(Context)

packages/ui/src/providers/RouteTransition/index.tsx

@@ -74,11 +74,9 @@ export const RouteTransitionProvider: React.FC<RouteTransitionProps> = ({ childr
   )
 
   return (
-    <RouteTransitionContext.Provider
-      value={{ isTransitioning, startRouteTransition, transitionProgress }}
-    >
+    <RouteTransitionContext value={{ isTransitioning, startRouteTransition, transitionProgress }}>
       {children}
-    </RouteTransitionContext.Provider>
+    </RouteTransitionContext>
   )
 }
 
@@ -121,4 +119,4 @@ const RouteTransitionContext = React.createContext<RouteTransitionContextValue>(
  *   // ...
  * }
  */
-export const useRouteTransition = () => React.useContext(RouteTransitionContext)
+export const useRouteTransition = () => React.use(RouteTransitionContext)

packages/ui/src/providers/SearchParams/index.tsx

@@ -2,7 +2,7 @@
 
 import { useSearchParams as useNextSearchParams } from 'next/navigation.js'
 import * as qs from 'qs-esm'
-import React, { createContext, useContext } from 'react'
+import React, { createContext, use } from 'react'
 
 export type SearchParamsContext = {
   searchParams: qs.ParsedQs
@@ -50,7 +50,7 @@ export const SearchParamsProvider: React.FC<{ children?: React.ReactNode }> = ({
     [searchParams],
   )
 
-  return <Context.Provider value={{ searchParams, stringifyParams }}>{children}</Context.Provider>
+  return <Context value={{ searchParams, stringifyParams }}>{children}</Context>
 }
 
 /**
@@ -66,4 +66,4 @@ export const SearchParamsProvider: React.FC<{ children?: React.ReactNode }> = ({
  * const parsedSearchParams = parseSearchParams(searchParams)
  * ```
  */
-export const useSearchParams = (): SearchParamsContext => useContext(Context)
+export const useSearchParams = (): SearchParamsContext => use(Context)

packages/ui/src/providers/Selection/index.tsx

@@ -3,7 +3,7 @@ import type { ClientUser, Where } from 'payload'
 
 import { useSearchParams } from 'next/navigation.js'
 import * as qs from 'qs-esm'
-import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import React, { createContext, use, useCallback, useEffect, useRef, useState } from 'react'
 
 import { parseSearchParams } from '../../utilities/parseSearchParams.js'
 import { useLocale } from '../Locale/index.js'
@@ -200,7 +200,7 @@ export const SelectionProvider: React.FC<Props> = ({ children, docs = [], totalD
     totalDocs,
   }
 
-  return <Context.Provider value={contextRef.current}>{children}</Context.Provider>
+  return <Context value={contextRef.current}>{children}</Context>
 }
 
-export const useSelection = (): SelectionContext => useContext(Context)
+export const useSelection = (): SelectionContext => use(Context)

packages/ui/src/providers/ServerFunctions/index.tsx

@@ -77,7 +77,7 @@ export const ServerFunctionsContext = createContext<ServerFunctionsContextType |
 )
 
 export const useServerFunctions = () => {
-  const context = React.useContext(ServerFunctionsContext)
+  const context = React.use(ServerFunctionsContext)
   if (context === undefined) {
     throw new Error('useServerFunctions must be used within a ServerFunctionsProvider')
   }
@@ -218,7 +218,7 @@ export const ServerFunctionsProvider: React.FC<{
   )
 
   return (
-    <ServerFunctionsContext.Provider
+    <ServerFunctionsContext
       value={{
         copyDataFromLocale,
         getDocumentSlots,
@@ -230,6 +230,6 @@ export const ServerFunctionsProvider: React.FC<{
       }}
     >
       {children}
-    </ServerFunctionsContext.Provider>
+    </ServerFunctionsContext>
   )
 }

packages/ui/src/providers/Theme/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import React, { createContext, use, useCallback, useEffect, useState } from 'react'
 
 import { useConfig } from '../Config/index.js'
 
@@ -100,7 +100,7 @@ export const ThemeProvider: React.FC<{
     [cookieKey],
   )
 
-  return <Context.Provider value={{ autoMode, setTheme, theme }}>{children}</Context.Provider>
+  return <Context value={{ autoMode, setTheme, theme }}>{children}</Context>
 }
 
-export const useTheme = (): ThemeContext => useContext(Context)
+export const useTheme = (): ThemeContext => use(Context)

packages/ui/src/providers/Translation/index.tsx

@@ -14,7 +14,7 @@ import type { LanguageOptions } from 'payload'
 import { importDateFNSLocale, t } from '@payloadcms/translations'
 import { enUS } from 'date-fns/locale/en-US'
 import { useRouter } from 'next/navigation.js'
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React, { createContext, use, useEffect, useState } from 'react'
 
 type ContextType<
   TAdditionalTranslations = {},
@@ -98,7 +98,7 @@ export const TranslationProvider: React.FC<Props> = ({
   }, [dateFNSKey])
 
   return (
-    <Context.Provider
+    <Context
       value={{
         i18n: {
           dateFNS,
@@ -114,11 +114,11 @@ export const TranslationProvider: React.FC<Props> = ({
       }}
     >
       {children}
-    </Context.Provider>
+    </Context>
   )
 }
 
 export const useTranslation = <
   TAdditionalTranslations = {},
   TAdditionalClientTranslationKeys extends string = never,
->() => useContext<ContextType<TAdditionalTranslations, TAdditionalClientTranslationKeys>>(Context)
+>() => use<ContextType<TAdditionalTranslations, TAdditionalClientTranslationKeys>>(Context)

packages/ui/src/providers/UploadEdits/index.tsx

@@ -29,11 +29,7 @@ export const UploadEditsProvider = ({ children }) => {
     }))
   }
 
-  return (
-    <Context.Provider value={{ resetUploadEdits, updateUploadEdits, uploadEdits }}>
-      {children}
-    </Context.Provider>
-  )
+  return <Context value={{ resetUploadEdits, updateUploadEdits, uploadEdits }}>{children}</Context>
 }
 
-export const useUploadEdits = (): UploadEditsContext => React.useContext(Context)
+export const useUploadEdits = (): UploadEditsContext => React.use(Context)

packages/ui/src/providers/UploadHandlers/index.tsx

@@ -38,13 +38,11 @@ export const UploadHandlersProvider = ({ children }) => {
     })
   }
 
-  return (
-    <Context.Provider value={{ getUploadHandler, setUploadHandler }}>{children}</Context.Provider>
-  )
+  return <Context value={{ getUploadHandler, setUploadHandler }}>{children}</Context>
 }
 
 export const useUploadHandlers = (): UploadHandlersContext => {
-  const context = React.useContext(Context)
+  const context = React.use(Context)
 
   if (context === null) {
     throw new Error('useUploadHandlers must be used within UploadHandlersProvider')

templates/website/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)

templates/website/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)

templates/with-vercel-website/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)

templates/with-vercel-website/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)

test/admin/components/CustomProvider/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { createContext, useContext, useState } from 'react'
+import React, { createContext, use, useState } from 'react'
 
 type CustomContext = {
   getCustom
@@ -18,13 +18,13 @@ export const CustomProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   }
 
   return (
-    <Context.Provider value={value}>
+    <Context value={value}>
       <div className="custom-provider" style={{ display: 'none' }}>
         This is a custom provider.
       </div>
       {children}
-    </Context.Provider>
+    </Context>
   )
 }
 
-export const useCustom = () => useContext(Context)
+export const useCustom = () => use(Context)