chore: refactor to remove setTimeout

Author: crutchcorn

packages/react-form/src/useForm.tsx

@@ -2,7 +2,7 @@
 
 import { FormApi, functionalUpdate, mergeAndUpdate } from '@tanstack/form-core'
 import { useStore } from '@tanstack/react-store'
-import { useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { Field } from './useField'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import { useFormId } from './useFormId'
@@ -211,8 +211,6 @@ export function useForm<
     setPrevFormId(formId)
   }
 
-  const transform = useMemo(() => opts?.transform, [opts?.transform])
-
   const extendedFormApi = useMemo(() => {
     const extendedApi: ReactFormExtendedApi<
       TFormData,
@@ -241,13 +239,6 @@ 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} />
     }
@@ -263,7 +254,7 @@ export function useForm<
     }
 
     return extendedApi
-  }, [formApi, transform])
+  }, [formApi])
 
   useIsomorphicLayoutEffect(formApi.mount, [])
 
@@ -275,5 +266,17 @@ export function useForm<
     formApi.update(opts)
   })
 
+  const hasRan = useRef(false)
+
+  useIsomorphicLayoutEffect(() => {
+    if (!hasRan.current) return
+    if (!opts?.transform) return
+    mergeAndUpdate(formApi, opts.transform as never)
+  }, [formApi, opts?.transform])
+
+  useIsomorphicLayoutEffect(() => {
+    hasRan.current = true
+  })
+
   return extendedFormApi
 }

packages/react-form/tests/useForm.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { render, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { useStore } from '@tanstack/react-store'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useReducer, useState } from 'react'
 import { mergeForm, useForm } from '../src/index'
 import { sleep } from './utils'
 
@@ -1037,4 +1037,42 @@ describe('useForm', () => {
     const { getByText } = render(<Comp />)
     getByText('What 1')
   })
+
+  it('should handle stable transforms to update the base form on subsequent renders', async () => {
+    function Comp() {
+      const [renders, setRenders] = useState(0)
+      const form = useForm({
+        defaultValues: {
+          test: 'Hello',
+        },
+        transform: useCallback(
+          (baseForm: unknown) => {
+            return mergeForm(baseForm as never, {
+              values: {
+                test: renders === 0 ? 'First' : 'Another',
+              },
+            })
+          },
+          [renders],
+        ),
+      })
+
+      return (
+        <div>
+          <form.Field
+            name="test"
+            children={(field) => <p>{field.state.value}</p>}
+          />
+          <button onClick={() => setRenders((v) => v + 1)} type={'button'}>
+            Rerender
+          </button>
+        </div>
+      )
+    }
+
+    const { findByText, getByText } = render(<Comp />)
+    await findByText('First')
+    await user.click(getByText('Rerender'))
+    await findByText('Another')
+  })
 })