chore: attempt 8

Author: crutchcorn

examples/react/next-server-actions/src/app/action.ts

@@ -4,8 +4,8 @@ import {
   ServerValidateError,
   createServerValidate,
 } from '@tanstack/react-form-nextjs'
-import { formOpts } from './shared-code'
 import { z } from 'zod'
+import { formOpts } from './shared-code'
 
 const schema = z.object({
   age: z.coerce.number().min(12),

examples/react/next-server-actions/src/app/client-component.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { useActionState } from 'react'
+import { useActionState, useCallback } from 'react'
 import {
   initialFormState,
   mergeForm,
   useForm,
-  useMerge,
+  useTransform,
 } from '@tanstack/react-form-nextjs'
 import { z } from 'zod'
 import someAction from './action'
@@ -14,14 +14,14 @@ import { formOpts } from './shared-code'
 export const ClientComp = () => {
   const [state, action] = useActionState(someAction, initialFormState)
 
+  // debugger
+
   const form = useForm({
     ...formOpts,
-  })
-
-  useMerge({
-    form,
-    fn: (baseForm) => mergeForm(baseForm, state ?? {}),
-    deps: [state],
+    transform: useCallback(
+      (baseForm: unknown) => mergeForm(baseForm as never, state ?? {}),
+      [state],
+    ),
   })
 
   return (

packages/form-core/src/transform.ts

@@ -151,4 +151,6 @@ export function mergeAndUpdate<
       form.setErrorMap(newObj.state.errorMap)
     }
   })
+
+  return newObj;
 }

packages/react-form-nextjs/src/index.ts

@@ -2,4 +2,4 @@ export * from '@tanstack/react-form'
 
 export * from './createServerValidate'
 export * from './error'
-export * from './useMerge'
+export * from './useTransform'

packages/react-form-nextjs/src/useMerge.ts

@@ -0,0 +1,7 @@
+import { useCallback } from 'react'
+import type { AnyFormApi } from '@tanstack/react-form'
+
+export const useTransform: (
+  fn: (formBase: AnyFormApi) => AnyFormApi,
+  deps?: unknown[],
+) => unknown = useCallback as never

packages/react-form-nextjs/src/useTransform.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { FormApi, functionalUpdate } from '@tanstack/form-core'
+import { FormApi, functionalUpdate, mergeAndUpdate } from '@tanstack/form-core'
 import { useStore } from '@tanstack/react-store'
 import { useMemo, useState } from 'react'
 import { Field } from './useField'
@@ -183,7 +183,10 @@ export function useForm<
     TOnDynamicAsync,
     TOnServer,
     TSubmitMeta
-  >,
+  > & {
+    // Made stable by `useTransform`
+    transform?: (data: unknown) => unknown
+  },
 ) {
   const fallbackFormId = useFormId()
   const [prevFormId, setPrevFormId] = useState<string>(opts?.formId as never)
@@ -211,6 +214,8 @@ export function useForm<
     setPrevFormId(formId)
   }
 
+  const transform = useMemo(() => opts?.transform, [opts?.transform])
+
   const extendedFormApi = useMemo(() => {
     const extendedApi: ReactFormExtendedApi<
       TFormData,
@@ -239,6 +244,13 @@ export function useForm<
       },
     } as never
 
+    if (transform) {
+      // Cannot call synchronously, as otherwise we're setting state mid-render, which breaks React
+      setTimeout(() => {
+        mergeAndUpdate(extendedApi, transform as never)
+      }, 0)
+    }
+
     extendedApi.Field = function APIField(props) {
       return <Field {...props} form={formApi} />
     }
@@ -254,7 +266,7 @@ export function useForm<
     }
 
     return extendedApi
-  }, [formApi])
+  }, [formApi, transform])
 
   useIsomorphicLayoutEffect(formApi.mount, [])