perf: prevent form rerenders

packages/ui/package.json

@@ -157,7 +157,6 @@
     "scheduler": "0.25.0",
     "sonner": "^1.7.2",
     "ts-essentials": "10.0.3",
-    "use-context-selector": "2.0.0",
     "uuid": "10.0.0"
   },
   "devDependencies": {

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

@@ -1,12 +1,7 @@
 'use client'
 import type { RenderedField } from 'payload'
 
-import { createContext, use } from 'react'
-import {
-  createContext as createSelectorContext,
-  useContextSelector,
-  useContext as useFullContext,
-} from 'use-context-selector'
+import { createContext, use, useSyncExternalStore } from 'react'
 
 import type { Context, FormFieldsContext as FormFieldsContextType } from './types.js'
 
@@ -22,7 +17,14 @@ const ProcessingContext = createContext(false)
 const BackgroundProcessingContext = createContext(false)
 const ModifiedContext = createContext(false)
 const InitializingContext = createContext(false)
-const FormFieldsContext = createSelectorContext<FormFieldsContextType>([{}, () => null])
+
+// Create a store for FormFields that supports selective subscriptions
+type Store<Snapshot = FormFieldsContextType> = {
+  getState: () => Snapshot
+  subscribe: (listener: () => void) => () => void
+}
+
+const FormFieldsStoreContext = createContext<null | Store>(null)
 
 export type RenderedFieldSlots = Map<string, RenderedField>
 
@@ -56,20 +58,35 @@ const useFormInitializing = (): boolean => use(InitializingContext)
  */
 const useFormFields = <Value = unknown>(
   selector: (context: FormFieldsContextType) => Value,
-): Value => useContextSelector(FormFieldsContext, selector)
+): Value => {
+  const store = use(FormFieldsStoreContext)
+  if (!store) {
+    throw new Error('useFormFields must be used within a Form component')
+  }
+
+  const getSnapshot = () => selector(store.getState())
+  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot)
+}
 
 /**
  * Get the state of all form fields.
  *
  * @see https://payloadcms.com/docs/admin/react-hooks#useallformfields
  */
-const useAllFormFields = (): FormFieldsContextType => useFullContext(FormFieldsContext)
+const useAllFormFields = (): FormFieldsContextType => {
+  const store = use(FormFieldsStoreContext)
+  if (!store) {
+    throw new Error('useAllFormFields must be used within a Form component')
+  }
+
+  return store.getState()
+}
 
 export {
   BackgroundProcessingContext,
   DocumentFormContext,
   FormContext,
-  FormFieldsContext,
+  FormFieldsStoreContext,
   FormWatchContext,
   InitializingContext,
   ModifiedContext,
@@ -86,3 +103,4 @@ export {
   useFormSubmitted,
   useWatchForm,
 }
+export type { Store as FormFieldsStore }

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

@@ -13,6 +13,7 @@ import {
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
+import type { FormFieldsStore } from './context.js'
 import type {
   CreateFormData,
   Context as FormContextType,
@@ -42,7 +43,7 @@ import {
   BackgroundProcessingContext,
   DocumentFormContext,
   FormContext,
-  FormFieldsContext,
+  FormFieldsStoreContext,
   FormWatchContext,
   InitializingContext,
   ModifiedContext,
@@ -126,14 +127,43 @@ export const Form: React.FC<FormProps> = (props) => {
   const abortResetFormRef = useRef<AbortController>(null)
   const isFirstRenderRef = useRef(true)
 
-  const fieldsReducer = useReducer(fieldReducer, {}, () => initialState)
-
-  const [formState, dispatchFields] = fieldsReducer
-
+  const [formState, dispatchFields] = useReducer(fieldReducer, initialState)
   contextRef.current.fields = formState
 
   const prevFormState = useRef(formState)
 
+  // Create refs to hold the current state and dispatch
+  const formStateRef = useRef(formState)
+  const dispatchFieldsRef = useRef(dispatchFields)
+
+  // Update refs when state changes
+  formStateRef.current = formState
+  dispatchFieldsRef.current = dispatchFields
+
+  // Create a stable store for selective subscriptions using useSyncExternalStore
+  const listenersRef = useRef(new Set<() => void>())
+  const formFieldsStore = React.useMemo<FormFieldsStore>(() => {
+    return {
+      getState: () => [formStateRef.current, dispatchFieldsRef.current],
+      subscribe: (listener) => {
+        listenersRef.current.add(listener)
+        return () => {
+          listenersRef.current.delete(listener)
+        }
+      },
+    }
+  }, [])
+
+  // Notify subscribers when formState changes
+  const prevFormStateForStore = useRef(formState)
+  React.useEffect(() => {
+    if (prevFormStateForStore.current !== formState) {
+      prevFormStateForStore.current = formState
+      // Notify all subscribers
+      listenersRef.current.forEach((listener) => listener())
+    }
+  }, [formState])
+
   const validateForm = useCallback(async () => {
     const validatedFieldState = {}
     let isValid = true
@@ -836,10 +866,9 @@ export const Form: React.FC<FormProps> = (props) => {
                 <ProcessingContext value={processing}>
                   <BackgroundProcessingContext value={backgroundProcessing}>
                     <ModifiedContext value={modified}>
-                      {/* eslint-disable-next-line @eslint-react/no-context-provider */}
-                      <FormFieldsContext.Provider value={fieldsReducer}>
+                      <FormFieldsStoreContext value={formFieldsStore}>
                         {children}
-                      </FormFieldsContext.Provider>
+                      </FormFieldsStoreContext>
                     </ModifiedContext>
                   </BackgroundProcessingContext>
                 </ProcessingContext>
@@ -855,7 +884,7 @@ export const Form: React.FC<FormProps> = (props) => {
 export {
   DocumentFormContext,
   FormContext,
-  FormFieldsContext,
+  FormFieldsStoreContext,
   FormWatchContext,
   ModifiedContext,
   ProcessingContext,

test/_community/payload-types.ts

@@ -126,21 +126,7 @@ export interface UserAuthOperations {
 export interface Post {
   id: string;
   title?: string | null;
-  content?: {
-    root: {
-      type: string;
-      children: {
-        type: any;
-        version: number;
-        [k: string]: unknown;
-      }[];
-      direction: ('ltr' | 'rtl') | null;
-      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-      indent: number;
-      version: number;
-    };
-    [k: string]: unknown;
-  } | null;
+  customField?: string | null;
   updatedAt: string;
   createdAt: string;
 }
@@ -279,7 +265,7 @@ export interface PayloadMigration {
  */
 export interface PostsSelect<T extends boolean = true> {
   title?: T;
-  content?: T;
+  customField?: T;
   updatedAt?: T;
   createdAt?: T;
 }

test/fields/collections/UI/UICustomClient.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable no-console */
 'use client'
 import type { TextFieldClientComponent } from 'payload'
 
-import React from 'react'
+import React, { useLayoutEffect } from 'react'
 
 export const UICustomClient: TextFieldClientComponent = ({
   field: {
@@ -11,3 +12,18 @@ export const UICustomClient: TextFieldClientComponent = ({
 }) => {
   return <div id={name}>{custom?.customValue}</div>
 }
+
+import { TextField, useFormFields } from '@payloadcms/ui'
+
+export const UICustomField: TextFieldClientComponent = (props) => {
+  // to test useFormFields
+  const uiCustomField = useFormFields(([fields]) => fields.uiCustomField)
+
+  useLayoutEffect(() => {
+    console.log(`UICustomField changed`)
+  }, [uiCustomField])
+
+  console.log('UICustomField rendered')
+
+  return <TextField {...props} />
+}

test/fields/collections/UI/e2e.spec.ts

@@ -67,4 +67,35 @@ describe('Radio', () => {
     await expect(uiField).toBeVisible()
     await expect(uiField).toContainText('client-side-configuration')
   })
+
+  test('The entire Form should not re-render when a field changes', async () => {
+    await page.goto(url.create)
+
+    const logs: string[] = []
+
+    await page.waitForLoadState()
+    // We don't want to save the logs from the initial render
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(1000)
+
+    page.on('console', (msg) => {
+      logs.push(msg.text())
+    })
+
+    await page.locator('#field-text').fill('test')
+
+    await expect(() => {
+      expect(logs).toHaveLength(0)
+    }).toPass({ timeout: 500 })
+
+    await page.locator('#field-uiCustomField').fill('test')
+
+    await expect(() => {
+      expect(logs).toContain('UICustomField changed')
+      expect(logs).toContain('UICustomField rendered')
+      // It should be 3, but I leave a margin of error for contingencies
+      // like React strict mode, to make the test less flaky.
+      expect(logs.length).toBeLessThanOrEqual(4)
+    }).toPass({ timeout: 500 })
+  })
 })

test/fields/collections/UI/index.ts

@@ -20,6 +20,15 @@ const UIFields: CollectionConfig = {
       type: 'text',
       required: true,
     },
+    {
+      name: 'uiCustomField',
+      type: 'ui',
+      admin: {
+        components: {
+          Field: '/collections/UI/UICustomClient.js#UICustomField',
+        },
+      },
+    },
     {
       type: 'ui',
       name: 'uiCustomClient',