perf(ui): reduce number of field renders on submit (#13524)

Needed for #13501.

No need to re-render all fields during save, and especially autosave.
Fields are already rendered. We only need to render new fields that may
have been created by hooks, etc.

We can achieve this by sending previous form state and new data through
the request with `renderAllFields: false`. That way form state can be
built up from previous form state, while still accepting new data.

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1211094406108904

Author: jacobsfletch

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

@@ -266,12 +266,12 @@ export const Form: React.FC<FormProps> = (props) => {
 
       const data = reduceFieldsToValues(contextRef.current.fields, true)
 
+      const serializableFormState = deepCopyObjectSimpleWithoutReactComponents(
+        contextRef.current.fields,
+      )
+
       // Execute server side validations
       if (Array.isArray(beforeSubmit)) {
-        const serializableFormState = deepCopyObjectSimpleWithoutReactComponents(
-          contextRef.current.fields,
-        )
-
         let revalidatedFormState: FormState
 
         await beforeSubmit.reduce(async (priorOnChange, beforeSubmitFn) => {
@@ -379,6 +379,7 @@ export const Form: React.FC<FormProps> = (props) => {
           if (typeof onSuccess === 'function') {
             const newFormState = await onSuccess(json, {
               context,
+              formState: serializableFormState,
             })
 
             if (newFormState) {

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

@@ -30,7 +30,10 @@ type Args = {
  * We typically do not want to merge properties that rely on user input, however, such as values, unless explicitly requested.
  * Doing this would cause the client to lose any local changes to those fields.
  *
- * This function will also a few defaults, as well as clean up the server response in preparation for the client.
+ * Note: Local state is the source of truth, not the new server state that is getting merged in. This is critical for array row
+ * manipulation specifically, where the user may have added, removed, or reordered rows while a request was pending and is now stale.
+ *
+ * This function applies some defaults, as well as cleans up the server response in preparation for the client.
  * e.g. it will set `valid` and `passesCondition` to true if undefined, and remove `addedByServer` from the response.
  */
 export const mergeServerFormState = ({
@@ -51,22 +54,30 @@ export const mergeServerFormState = ({
      *   a. accept all values when explicitly requested, e.g. on submit
      *   b. only accept values for unmodified fields, e.g. on autosave
      */
-    if (
-      !incomingField.addedByServer &&
-      (!acceptValues ||
-        // See `acceptValues` type definition for more details
-        (typeof acceptValues === 'object' &&
-          acceptValues !== null &&
-          acceptValues?.overrideLocalChanges === false &&
-          currentState[path].isModified))
-    ) {
-      delete incomingField.value
-      delete incomingField.initialValue
+    const shouldAcceptValue =
+      incomingField.addedByServer ||
+      acceptValues === true ||
+      (typeof acceptValues === 'object' &&
+        acceptValues !== null &&
+        // Note: Must be explicitly `false`, allow `null` or `undefined` to mean true
+        acceptValues.overrideLocalChanges === false &&
+        !currentState[path]?.isModified)
+
+    let sanitizedIncomingField = incomingField
+
+    if (!shouldAcceptValue) {
+      /**
+       * Note: do not delete properties off `incomingField` as this will mutate the original object
+       * Instead, omit them from the destructured object by excluding specific keys
+       * This will also ensure we don't set `undefined` into the result unnecessarily
+       */
+      const { initialValue, value, ...rest } = incomingField
+      sanitizedIncomingField = rest
     }
 
     newState[path] = {
       ...currentState[path],
-      ...incomingField,
+      ...sanitizedIncomingField,
     }
 
     if (

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

@@ -61,6 +61,7 @@ export type FormProps = {
        * Arbitrary context passed to the onSuccess callback.
        */
       context?: Record<string, unknown>
+      formState?: FormState
     },
   ) => Promise<FormState | void> | void
   redirect?: string

packages/ui/src/utilities/buildFormState.ts

@@ -134,8 +134,6 @@ export const buildFormState = async (
 
   const selectMode = select ? getSelectMode(select) : undefined
 
-  let data = incomingData
-
   if (!collectionSlug && !globalSlug) {
     throw new Error('Either collectionSlug or globalSlug must be provided')
   }
@@ -175,11 +173,9 @@ export const buildFormState = async (
     )
   }
 
-  // If there is a form state,
-  // then we can deduce data from that form state
-  if (formState) {
-    data = reduceFieldsToValues(formState, true)
-  }
+  // If there is form state but no data, deduce data from that form state, e.g. on initial load
+  // Otherwise, use the incoming data as the source of truth, e.g. on subsequent saves
+  const data = incomingData || reduceFieldsToValues(formState, true)
 
   let documentData = undefined
 

packages/ui/src/views/Edit/index.tsx

@@ -258,7 +258,7 @@ export function DefaultEditView({
 
   const onSave = useCallback<FormProps['onSuccess']>(
     async (json, options) => {
-      const { context } = options || {}
+      const { context, formState } = options || {}
 
       const controller = handleAbortRef(abortOnSaveRef)
 
@@ -327,9 +327,10 @@ export function DefaultEditView({
           data: document,
           docPermissions,
           docPreferences,
+          formState,
           globalSlug,
           operation,
-          renderAllFields: true,
+          renderAllFields: false,
           returnLockStatus: false,
           schemaPath: schemaPathSegments.join('.'),
           signal: controller.signal,