perf: significantly reduce form state response size by up to 3x

packages/next/src/utilities/initPage/handleAdminPage.ts

@@ -51,7 +51,7 @@ export function getRouteInfo({
       globalConfig = config.globals.find((global) => global.slug === globalSlug)
     }
 
-    // If the collection is using a custom ID, we need to determine it's type
+    // If the collection is using a custom ID, we need to determine its type
     if (collectionConfig && payload) {
       if (payload.collections?.[collectionSlug]?.customIDType) {
         idType = payload.collections?.[collectionSlug].customIDType

packages/next/src/views/Account/index.tsx

@@ -82,6 +82,9 @@ export const Account: React.FC<AdminViewProps> = async ({
       data,
       docPermissions,
       docPreferences,
+      experimental: {
+        optimized: true,
+      },
       locale: locale?.code,
       operation: 'update',
       renderAllFields: true,

packages/next/src/views/CreateFirstUser/index.tsx

@@ -57,6 +57,9 @@ export const CreateFirstUserView: React.FC<AdminViewProps> = async ({ initPageRe
     data,
     docPermissions,
     docPreferences,
+    experimental: {
+      optimized: true,
+    },
     locale: locale?.code,
     operation: 'create',
     renderAllFields: true,

packages/next/src/views/Document/index.tsx

@@ -149,6 +149,9 @@ export const renderDocument = async ({
       data: doc,
       docPermissions,
       docPreferences,
+      experimental: {
+        optimized: true,
+      },
       fallbackLocale: false,
       globalSlug,
       locale: locale?.code,

packages/payload/src/admin/forms/Field.ts

@@ -17,7 +17,7 @@ import type {
 export type ClientFieldWithOptionalType = MarkOptional<ClientField, 'type'>
 
 export type ClientComponentProps = {
-  customComponents: FormField['customComponents']
+  customComponents?: FormField['customComponents']
   field: ClientBlock | ClientField | ClientTab
   forceRender?: boolean
   readOnly?: boolean

packages/payload/src/admin/forms/Form.ts

@@ -44,14 +44,20 @@ export type FieldState = {
    */
   fieldSchema?: Field
   filterOptions?: FilterOptionsResult
-  initialValue: unknown
+  initialValue?: unknown
+  /**
+   * @deprecated
+   * This is a legacy property that is no longer used.
+   * Please use `fieldIsSidebar(field)` from `payload` instead
+   * Or check `field.admin.position === 'sidebar'` directly.
+   **/
   isSidebar?: boolean
   passesCondition?: boolean
   requiresRender?: boolean
   rows?: Row[]
-  valid: boolean
+  valid?: boolean
   validate?: Validate
-  value: unknown
+  value?: unknown
 }
 
 export type FieldStateWithoutComponents = Omit<FieldState, 'customComponents'>
@@ -68,6 +74,15 @@ export type BuildFormStateArgs = {
   data?: Data
   docPermissions: SanitizedDocumentPermissions | undefined
   docPreferences: DocumentPreferences
+  experimental?: {
+    /**
+     * If true, makes form state as small as possible by omitting unnecessary properties from the response
+     * Examples include the `isSidebar`, `passesCondition`, or `valid`, properties. See https://github.com/payloadcms/payload/pull/9388.
+     * In the next major version, this will be the default behavior.
+     * @default false
+     **/
+    optimized: boolean
+  }
   fallbackLocale?: false | TypedLocale
   formState?: FormState
   id?: number | string

packages/payload/src/admin/types.ts

@@ -445,7 +445,13 @@ export type RenderedField = {
   Field: React.ReactNode
   indexPath?: string
   initialSchemaPath?: string
-  isSidebar: boolean
+  /**
+   * @deprecated
+   * This is a legacy property that is no longer used.
+   * Please use `fieldIsSidebar(field)` from `payload` instead
+   * Or check `field.admin.position === 'sidebar'` directly.
+   **/
+  isSidebar?: boolean
   path: string
   schemaPath: string
   type: FieldTypes

packages/richtext-lexical/tsconfig.json

@@ -11,14 +11,7 @@
     "rootDir": "./src" /* Specify the root folder within your source files. */,
     "strict": true
   },
-  "exclude": [
-    "dist",
-    "build",
-    "tests",
-    "test",
-    "node_modules",
-    "eslint.config.js",
-  ],
+  "exclude": ["dist", "build", "tests", "test", "node_modules", "eslint.config.js"],
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "src/**/*.json"],
   "references": [
     { "path": "../payload" },

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

@@ -227,6 +227,7 @@ export const Form: React.FC<FormProps> = (props) => {
       // Execute server side validations
       if (Array.isArray(beforeSubmit)) {
         let revalidatedFormState: FormState
+
         const serializableFields = deepCopyObjectSimpleWithoutReactComponents(
           contextRef.current.fields,
         )
@@ -241,7 +242,9 @@ export const Form: React.FC<FormProps> = (props) => {
           revalidatedFormState = result
         }, Promise.resolve())
 
-        const isValid = Object.entries(revalidatedFormState).every(([, field]) => field.valid)
+        const isValid = Object.entries(revalidatedFormState).every(
+          ([, field]) => field.valid !== false,
+        )
 
         if (!isValid) {
           setProcessing(false)
@@ -268,6 +271,7 @@ export const Form: React.FC<FormProps> = (props) => {
         const serializableFields = deepCopyObjectSimpleWithoutReactComponents(
           contextRef.current.fields,
         )
+
         const data = reduceFieldsToValues(serializableFields, true)
 
         if (overrides) {