fix(core, react-form): Avoid set state error in React by avoiding setting default value until mount TanStack#1201

Author: juanvilladev

packages/form-core/src/FieldApi.ts

@@ -494,6 +494,10 @@ export interface FieldApiOptions<
     TFormOnServer,
     TParentSubmitMeta
   >
+  /**
+   * If true, the default value will not be set in the constructor.
+   */
+  deferDefaultValue?: boolean
 }
 
 export type FieldMetaBase<
@@ -996,7 +1000,7 @@ 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) {
+    if (!opts.deferDefaultValue && opts.defaultValue !== undefined) {
       this.form.setFieldValue(this.name, opts.defaultValue as never, {
         dontUpdateMeta: true,
       })

packages/react-form/src/useField.tsx

@@ -181,6 +181,7 @@ export function useField<
       ...opts,
       form: opts.form,
       name: opts.name,
+      deferDefaultValue: true, // Prevents https://react.dev/link/setstate-in-render by setting the default value after initial mount for React
     })
 
     const extendedApi: typeof api &
@@ -204,6 +205,18 @@ export function useField<
 
   useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])
 
+  useIsomorphicLayoutEffect(() => {
+    if (fieldApi.options.defaultValue !== undefined) {
+      fieldApi.form.setFieldValue(
+        fieldApi.name,
+        fieldApi.options.defaultValue as never,
+        {
+          dontUpdateMeta: true,
+        },
+      )
+    }
+  }, [fieldApi])
+
   /**
    * fieldApi.update should not have any side effects. Think of it like a `useRef`
    * that we need to keep updated every render with the most up-to-date information.

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()
+  })
 })