fix(form-core): move setting default value to mount function to avoid react set state on render error + include test in react package

Author: juanvilladev

packages/form-core/src/FieldApi.ts

@@ -996,11 +996,6 @@ export class FieldApi<
     this.form = opts.form as never
     this.name = opts.name as never
     this.timeoutIds = {} as Record<ValidationCause, never>
-    if (opts.defaultValue !== undefined) {
-      this.form.setFieldValue(this.name, opts.defaultValue as never, {
-        dontUpdateMeta: true,
-      })
-    }
 
     this.store = new Derived({
       deps: [this.form.store],
@@ -1077,6 +1072,12 @@ export class FieldApi<
   mount = () => {
     const cleanup = this.store.mount()
 
+    if (this.options.defaultValue !== undefined) {
+      this.form.setFieldValue(this.name, this.options.defaultValue as never, {
+        dontUpdateMeta: true,
+      })
+    }
+
     const info = this.getInfo()
     info.instance = this as never
 
@@ -1519,7 +1520,6 @@ export class FieldApi<
 
     // TODO: Dedupe this logic to reduce bundle size
     for (const validateObj of validates) {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (!validateObj.validate) continue
       validateFieldAsyncFn(this, validateObj, validatesPromises)
     }

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

@@ -1130,4 +1130,51 @@ describe('useField', () => {
     // field2 should not have rerendered
     expect(renderCount.field2).toBe(field2InitialRender)
   })
+
+  it('should handle defaultValue without setstate-in-render error', async () => {
+    // Spy on console.error before rendering
+    const consoleErrorSpy = vi.spyOn(console, 'error')
+
+    function Comp() {
+      const form = useForm({
+        defaultValues: {
+          fieldOne: '',
+          fieldTwo: '',
+        },
+      })
+
+      const fieldOne = useStore(form.store, (state) => state.values.fieldOne)
+
+      return (
+        <form>
+          <form.Field
+            name="fieldOne"
+            children={(field) => {
+              return (
+                <input
+                  data-testid={field.name}
+                  id={field.name}
+                  value={field.state.value}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )
+            }}
+          />
+          {fieldOne && (
+            <form.Field
+              name="fieldTwo"
+              defaultValue="default field two value"
+              children={(_) => null}
+            />
+          )}
+        </form>
+      )
+    }
+
+    const { getByTestId } = render(<Comp />)
+    await user.type(getByTestId('fieldOne'), 'John')
+
+    // Should not log an error
+    expect(consoleErrorSpy).not.toHaveBeenCalled()
+  })
 })