fix(form-react): Make sure to only update form and field options with…

…in a layout effect

This is used to prevent setting state during a React render

packages/form-react/src/field/field.hooks.tsx

@@ -41,20 +41,26 @@ export function useField<
     TMixin
   >,
 ): FieldContextType<TData, TName, TBoundValue, TAdapter, TFormAdapter, TMixin> {
-  const field = form.getOrCreateField(name, options)
-  const finalField = React.useMemo(
-    () => fieldLogicToFieldContext(field),
-    [field],
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only ever want to create a field once, and we have to update the options in a layout effect to avoid setting state during render
+  const field = React.useMemo(
+    () => fieldLogicToFieldContext(form.getOrCreateField(name, options)),
+    [form, name],
   )
 
   useIsomorphicLayoutEffect(() => {
-    finalField.mount()
+    // That way we can make sure to not update the options for the first render
+    if (!field.isMounted.peek()) return
+    field.updateOptions(options)
+  }, [field, options])
+
+  useIsomorphicLayoutEffect(() => {
+    field.mount()
     return () => {
-      finalField.unmount()
+      field.unmount()
     }
-  }, [finalField])
+  }, [field])
 
-  return finalField
+  return field
 }
 
 /**

packages/form-react/src/form/form.hooks.tsx

@@ -24,22 +24,23 @@ export function useForm<
 >(
   options?: FormLogicOptions<TData, TAdapter>,
 ): FormContextType<TData, TAdapter> {
-  // biome-ignore lint/correctness/useExhaustiveDependencies: We only ever want to create a form once
-  const finalForm = React.useMemo(() => {
-    const form = new FormLogic(options)
-    return formLogicToFormContext(form)
-  }, [])
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only ever want to create a form once, and we have to update the options in a layout effect to avoid setting state during render
+  const form = React.useMemo(() => formLogicToFormContext(new FormLogic(options)), [])
 
-  finalForm.updateOptions(options)
+  useIsomorphicLayoutEffect(() => {
+    // That way we can make sure to not update the options for the first render
+    if(!form.isMounted.peek()) return
+    form.updateOptions(options)
+  }, [form, options]);
 
   useIsomorphicLayoutEffect(() => {
-    finalForm.mount()
+    form.mount()
     return () => {
-      finalForm.unmount()
+      form.unmount()
     }
-  }, [finalForm])
+  }, [form])
 
-  return finalForm
+  return form
 }
 
 /**