remix-validated-form 4.3.1-beta.0 → 4.4.2

package/dist/types/hooks.d.ts

@@ -64,4 +64,4 @@ export declare const useField: (name: string, options?: {
     formId?: string | undefined;
 } | undefined) => FieldProps;
 export declare const useControlField: <T>(name: string, formId?: string | undefined) => readonly [T, (value: T) => void];
-export declare const useUpdateControlledField: (formId?: string | undefined) => (field: string, value: unknown) => void;
+export declare const useUpdateControlledField: (formId?: string | undefined) => (fieldName: string, value: unknown) => void;

package/dist/types/internal/hooks.d.ts

@@ -1,11 +1,7 @@
-import { Atom, WritableAtom } from "jotai";
-import { useUpdateAtom } from "jotai/utils";
 import { FieldErrors, ValidationErrorResponseData } from "..";
 import { InternalFormContextValue } from "./formContext";
 import { Hydratable } from "./hydratable";
-export declare const useFormUpdateAtom: typeof useUpdateAtom;
-export declare const useFormAtom: <Value, Update, Result extends void | Promise<void>>(anAtom: WritableAtom<Value, Update, Result>) => [Value extends Promise<infer V> ? V : Value, import("jotai/core/atom").SetAtom<Update, Result>];
-export declare const useFormAtomValue: <Value>(anAtom: Atom<Value>) => Value extends Promise<infer V> ? V : Value;
+import { InternalFormId } from "./state/storeFamily";
 export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
 export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
 export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
@@ -14,8 +10,23 @@ export declare const useDefaultValuesForForm: (context: InternalFormContextValue
     [fieldName: string]: any;
 }>;
 export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
-export declare const useFieldTouched: (field: string, { formId }: InternalFormContextValue) => [boolean, (update: boolean) => void];
-export declare const useFieldError: (name: string, context: InternalFormContextValue) => readonly [string | undefined, (update?: string | undefined) => void];
+export declare const useFieldTouched: (field: string, { formId }: InternalFormContextValue) => readonly [boolean, (touched: boolean) => void];
+export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
+export declare const useClearError: (context: InternalFormContextValue) => (field: string) => void;
 export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
-export declare const useClearError: ({ formId }: InternalFormContextValue) => (name: string) => void;
-export declare const useSetTouched: ({ formId }: InternalFormContextValue) => (name: string, touched: boolean) => void;
+export declare const useInternalIsSubmitting: (formId: InternalFormId) => boolean;
+export declare const useInternalIsValid: (formId: InternalFormId) => boolean;
+export declare const useInternalHasBeenSubmitted: (formId: InternalFormId) => boolean;
+export declare const useValidateField: (formId: InternalFormId) => (fieldName: string) => Promise<string | null>;
+export declare const useValidate: (formId: InternalFormId) => () => Promise<void>;
+export declare const useRegisterReceiveFocus: (formId: InternalFormId) => (fieldName: string, handler: () => void) => () => void;
+export declare const useSyncedDefaultValues: (formId: InternalFormId) => {
+    [fieldName: string]: any;
+};
+export declare const useSetTouched: ({ formId }: InternalFormContextValue) => (field: string, touched: boolean) => void;
+export declare const useTouchedFields: (formId: InternalFormId) => import("..").TouchedFields;
+export declare const useFieldErrors: (formId: InternalFormId) => FieldErrors;
+export declare const useSetFieldErrors: (formId: InternalFormId) => (errors: FieldErrors) => void;
+export declare const useResetFormElement: (formId: InternalFormId) => () => void;
+export declare const useFormActionProp: (formId: InternalFormId) => string | undefined;
+export declare const useFormSubactionProp: (formId: InternalFormId) => string | undefined;

package/dist/types/internal/state/cleanup.d.ts

@@ -0,0 +1,2 @@
+import { InternalFormId } from "./storeFamily";
+export declare const cleanupFormState: (formId: InternalFormId) => void;

package/dist/types/internal/state/controlledFieldStore.d.ts

@@ -0,0 +1,24 @@
+export declare type ControlledFieldState = {
+    fields: {
+        [fieldName: string]: {
+            refCount: number;
+            value: unknown;
+            defaultValue?: unknown;
+            hydrated: boolean;
+            valueUpdatePromise: Promise<void> | undefined;
+            resolveValueUpdate: (() => void) | undefined;
+        } | undefined;
+    };
+    register: (fieldName: string) => void;
+    unregister: (fieldName: string) => void;
+    setValue: (fieldName: string, value: unknown) => void;
+    hydrateWithDefault: (fieldName: string, defaultValue: unknown) => void;
+    awaitValueUpdate: (fieldName: string) => Promise<void>;
+    reset: () => void;
+};
+export declare const controlledFieldStore: {
+    (formId: import("./storeFamily").InternalFormId): import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ControlledFieldState>, "setState"> & {
+        setState(nextStateOrUpdater: ControlledFieldState | Partial<ControlledFieldState> | ((state: import("immer/dist/internal").WritableDraft<ControlledFieldState>) => void), shouldReplace?: boolean | undefined): void;
+    }>;
+    remove(formId: import("./storeFamily").InternalFormId): void;
+};

package/dist/types/internal/state/controlledFields.d.ts

@@ -1,119 +1,6 @@
-import { PrimitiveAtom } from "jotai";
 import { InternalFormContextValue } from "../formContext";
-import { FieldAtomKey, InternalFormId } from "./atomUtils";
-export declare const controlledFieldsAtom: {
-    (param: InternalFormId): import("jotai").Atom<Record<string, PrimitiveAtom<unknown>>> & {
-        write: (get: {
-            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-                unstable_promise: true;
-            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-        }, set: {
-            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-        }, update: Record<string, PrimitiveAtom<unknown>> | ((prev: Record<string, PrimitiveAtom<unknown>>) => Record<string, PrimitiveAtom<unknown>>)) => void;
-        onMount?: (<S extends (update: Record<string, PrimitiveAtom<unknown>> | ((prev: Record<string, PrimitiveAtom<unknown>>) => Record<string, PrimitiveAtom<unknown>>)) => void>(setAtom: S) => void | (() => void)) | undefined;
-    } & {
-        init: Record<string, PrimitiveAtom<unknown>>;
-    };
-    remove(param: InternalFormId): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
-};
-export declare const valueUpdatePromiseAtom: {
-    (param: FieldAtomKey): import("jotai").Atom<Promise<void> | undefined> & {
-        write: (get: {
-            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-                unstable_promise: true;
-            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-        }, set: {
-            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-        }, update: Promise<void> | ((prev: Promise<void> | undefined) => Promise<void> | undefined) | undefined) => void;
-        onMount?: (<S extends (update?: Promise<void> | ((prev: Promise<void> | undefined) => Promise<void> | undefined) | undefined) => void>(setAtom: S) => void | (() => void)) | undefined;
-    } & {
-        init: Promise<void> | undefined;
-    };
-    remove(param: FieldAtomKey): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
-};
-export declare const resolveValueUpdateAtom: {
-    (param: FieldAtomKey): import("jotai").Atom<(() => void) | undefined> & {
-        write: (get: {
-            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-                unstable_promise: true;
-            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-        }, set: {
-            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-        }, update: (() => void) | ((prev: (() => void) | undefined) => (() => void) | undefined) | undefined) => void;
-        onMount?: (<S extends (update?: (() => void) | ((prev: (() => void) | undefined) => (() => void) | undefined) | undefined) => void>(setAtom: S) => void | (() => void)) | undefined;
-    } & {
-        init: (() => void) | undefined;
-    };
-    remove(param: FieldAtomKey): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
-};
-export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
-    write: (get: {
-        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-    } & {
-        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-            unstable_promise: true;
-        }): Value_3 | Promise<Value_3>;
-        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-            unstable_promise: true;
-        }): Value_4 | Promise<Value_4>;
-        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-            unstable_promise: true;
-        }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-    }, set: {
-        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-    }, update: {
-        formId: InternalFormId;
-        field: string;
-        value: unknown;
-    }) => void;
-    onMount?: (<S extends (update: {
-        formId: InternalFormId;
-        field: string;
-        value: unknown;
-    }) => void>(setAtom: S) => void | (() => void)) | undefined;
-} & {
-    init: null;
-};
+import { InternalFormId } from "./storeFamily";
 export declare const useControlledFieldValue: (context: InternalFormContextValue, field: string) => any;
 export declare const useControllableValue: (context: InternalFormContextValue, field: string) => readonly [any, (value: unknown) => void];
-export declare const useUpdateControllableValue: (formId: InternalFormId) => (field: string, value: unknown) => void;
-export declare const useAwaitValue: (formId: InternalFormId) => (arg: string) => Promise<void>;
+export declare const useUpdateControllableValue: (formId: InternalFormId) => (fieldName: string, value: unknown) => void;
+export declare const useAwaitValue: (formId: InternalFormId) => (fieldName: string) => Promise<void>;

package/dist/types/internal/state/createFormStore.d.ts

@@ -0,0 +1,40 @@
+import { FieldErrors, TouchedFields, Validator } from "../../validation/types";
+export declare type SyncedFormProps = {
+    formId?: string;
+    action?: string;
+    subaction?: string;
+    defaultValues: {
+        [fieldName: string]: any;
+    };
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    validator: Validator<unknown>;
+};
+export declare type FormState = {
+    isHydrated: boolean;
+    isSubmitting: boolean;
+    hasBeenSubmitted: boolean;
+    fieldErrors: FieldErrors;
+    touchedFields: TouchedFields;
+    formProps?: SyncedFormProps;
+    formElement: HTMLFormElement | null;
+    isValid: () => boolean;
+    startSubmit: () => void;
+    endSubmit: () => void;
+    setTouched: (field: string, touched: boolean) => void;
+    setFieldError: (field: string, error: string) => void;
+    setFieldErrors: (errors: FieldErrors) => void;
+    clearFieldError: (field: string) => void;
+    reset: () => void;
+    syncFormProps: (props: SyncedFormProps) => void;
+    setHydrated: () => void;
+    setFormElement: (formElement: HTMLFormElement | null) => void;
+    validateField: (fieldName: string) => Promise<string | null>;
+    validate: () => Promise<void>;
+    resetFormElement: () => void;
+};
+export declare const formStore: {
+    (formId: import("./storeFamily").InternalFormId): import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormState>, "setState"> & {
+        setState(nextStateOrUpdater: FormState | Partial<FormState> | ((state: import("immer/dist/internal").WritableDraft<FormState>) => void), shouldReplace?: boolean | undefined): void;
+    }>;
+    remove(formId: import("./storeFamily").InternalFormId): void;
+};

package/dist/types/internal/state/storeFamily.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This is basically what `atomFamily` from jotai does,
+ * but it doesn't make sense to include the entire jotai library just for that api.
+ */
+export declare type InternalFormId = string | symbol;
+export declare const storeFamily: <T>(create: (formId: InternalFormId) => T) => {
+    (formId: InternalFormId): T;
+    remove(formId: InternalFormId): void;
+};

package/dist/types/internal/state/storeHooks.d.ts

@@ -0,0 +1,5 @@
+import { ControlledFieldState } from "./controlledFieldStore";
+import { FormState } from "./createFormStore";
+import { InternalFormId } from "./storeFamily";
+export declare const useFormStore: <T>(formId: InternalFormId, selector: (state: FormState) => T) => T;
+export declare const useControlledFieldStore: <T>(formId: InternalFormId, selector: (state: ControlledFieldState) => T) => T;

package/dist/types/unreleased/formStateHooks.d.ts

@@ -30,6 +30,21 @@ export declare type FormHelpers = {
      * Change the touched state of the specified field.
      */
     setTouched: (fieldName: string, touched: boolean) => void;
+    /**
+     * Validate the whole form and populate any errors.
+     */
+    validate: () => Promise<void>;
+    /**
+     * Clears all errors on the form.
+     */
+    clearAllErrors: () => void;
+    /**
+     * Resets the form.
+     *
+     * _Note_: The equivalent behavior can be achieved by calling formElement.reset()
+     * or clicking a button element with `type="reset"`.
+     */
+    reset: () => void;
 };
 /**
  * Returns helpers that can be used to update the form state.

package/dist/types/userFacingFormContext.d.ts

@@ -53,6 +53,21 @@ export declare type FormContextValue = {
      * Change the touched state of the specified field.
      */
     setFieldTouched: (fieldName: string, touched: boolean) => void;
+    /**
+     * Validate the whole form and populate any errors.
+     */
+    validate: () => Promise<void>;
+    /**
+     * Clears all errors on the form.
+     */
+    clearAllErrors: () => void;
+    /**
+     * Resets the form.
+     *
+     * _Note_: The equivalent behavior can be achieved by calling formElement.reset()
+     * or clicking a button element with `type="reset"`.
+     */
+    reset: () => void;
 };
 /**
  * Provides access to some of the internal state of the form.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.3.1-beta.0",
+  "version": "4.4.2",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./dist/remix-validated-form.cjs.js",
   "main": "./dist/remix-validated-form.umd.js",
@@ -49,8 +49,9 @@
     "vite-config": "*"
   },
   "dependencies": {
-    "jotai": "^1.5.3",
+    "immer": "^9.0.12",
     "lodash": "^4.17.21",
-    "tiny-invariant": "^1.2.0"
+    "tiny-invariant": "^1.2.0",
+    "zustand": "^4.0.0-rc.0"
   }
 }

package/src/ValidatedForm.tsx

@@ -1,5 +1,4 @@
 import { Form as RemixForm, useFetcher, useSubmit } from "@remix-run/react";
-import { useAtomCallback } from "jotai/utils";
 import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
@@ -11,7 +10,6 @@ import React, {
   useRef,
   useState,
 } from "react";
-import invariant from "tiny-invariant";
 import { useIsSubmitting, useIsValid } from "./hooks";
 import { FORM_ID_FIELD } from "./internal/constants";
 import {
@@ -21,23 +19,16 @@ import {
 import {
   useDefaultValuesFromLoader,
   useErrorResponseForForm,
-  useFormUpdateAtom,
   useHasActiveFormSubmit,
+  useSetFieldErrors,
 } from "./internal/hooks";
 import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
-import { resetAtom } from "./internal/reset";
+import { cleanupFormState } from "./internal/state/cleanup";
+import { SyncedFormProps } from "./internal/state/createFormStore";
 import {
-  cleanupFormState,
-  endSubmitAtom,
-  fieldErrorsAtom,
-  formElementAtom,
-  formPropsAtom,
-  isHydratedAtom,
-  setFieldErrorAtom,
-  startSubmitAtom,
-  SyncedFormProps,
-} from "./internal/state";
-import { useAwaitValue } from "./internal/state/controlledFields";
+  useControlledFieldStore,
+  useFormStore,
+} from "./internal/state/storeHooks";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
   mergeRefs,
@@ -195,6 +186,14 @@ function formEventProxy<T extends object>(event: T): T {
   }) as T;
 }
 
+type HTMLSubmitEvent = React.BaseSyntheticEvent<
+  SubmitEvent,
+  Event,
+  HTMLFormElement
+>;
+
+type HTMLFormSubmitter = HTMLButtonElement | HTMLInputElement;
+
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -234,41 +233,27 @@ export function ValidatedForm<DataType>({
   const Form = fetcher?.Form ?? RemixForm;
 
   const submit = useSubmit();
-  const setFieldErrors = useFormUpdateAtom(fieldErrorsAtom(formId));
-  const setFieldError = useFormUpdateAtom(setFieldErrorAtom(formId));
-  const reset = useFormUpdateAtom(resetAtom(formId));
-  const startSubmit = useFormUpdateAtom(startSubmitAtom(formId));
-  const endSubmit = useFormUpdateAtom(endSubmitAtom(formId));
-  const syncFormProps = useFormUpdateAtom(formPropsAtom(formId));
-  const setHydrated = useFormUpdateAtom(isHydratedAtom(formId));
-  const setFormElementInState = useFormUpdateAtom(formElementAtom(formId));
+  const setFieldErrors = useSetFieldErrors(formId);
+  const setFieldError = useFormStore(formId, (state) => state.setFieldError);
+  const reset = useFormStore(formId, (state) => state.reset);
+  const resetControlledFields = useControlledFieldStore(
+    formId,
+    (state) => state.reset
+  );
+  const startSubmit = useFormStore(formId, (state) => state.startSubmit);
+  const endSubmit = useFormStore(formId, (state) => state.endSubmit);
+  const syncFormProps = useFormStore(formId, (state) => state.syncFormProps);
+  const setHydrated = useFormStore(formId, (state) => state.setHydrated);
+  const setFormElementInState = useFormStore(
+    formId,
+    (state) => state.setFormElement
+  );
 
   useEffect(() => {
-    setHydrated(true);
+    setHydrated();
     return () => cleanupFormState(formId);
   }, [formId, setHydrated]);
 
-  const awaitValue = useAwaitValue(formId);
-  const validateField: SyncedFormProps["validateField"] = useCallback(
-    async (field) => {
-      invariant(formRef.current, "Cannot find reference to form");
-      await awaitValue(field);
-      const { error } = await validator.validateField(
-        getDataFromForm(formRef.current),
-        field
-      );
-
-      if (error) {
-        setFieldError({ field, error });
-        return error;
-      } else {
-        setFieldError({ field, error: undefined });
-        return null;
-      }
-    },
-    [awaitValue, setFieldError, validator]
-  );
-
   const customFocusHandlers = useMultiValueMap<string, () => void>();
   const registerReceiveFocus: SyncedFormProps["registerReceiveFocus"] =
     useCallback(
@@ -286,8 +271,8 @@ export function ValidatedForm<DataType>({
       action,
       defaultValues: providedDefaultValues ?? backendDefaultValues ?? {},
       subaction,
-      validateField,
       registerReceiveFocus,
+      validator,
     });
   }, [
     action,
@@ -295,8 +280,8 @@ export function ValidatedForm<DataType>({
     registerReceiveFocus,
     subaction,
     syncFormProps,
-    validateField,
     backendDefaultValues,
+    validator,
   ]);
 
   useEffect(() => {
@@ -354,17 +339,16 @@ export function ValidatedForm<DataType>({
         return;
       }
 
+      const submitter = (e as unknown as HTMLSubmitEvent).nativeEvent
+        .submitter as HTMLFormSubmitter | null;
+
       // We deviate from the remix code here a bit because of our async submit.
       // In remix's `FormImpl`, they use `event.currentTarget` to get the form,
       // but we already have the form in `formRef.current` so we can just use that.
       // If we use `event.currentTarget` here, it will break because `currentTarget`
       // will have changed since the start of the submission.
-      if (fetcher) fetcher.submit(clickedButtonRef.current || formRef.current);
-      else
-        submit(clickedButtonRef.current || formRef.current, {
-          method,
-          replace,
-        });
+      if (fetcher) fetcher.submit(submitter || e.currentTarget);
+      else submit(submitter || e.currentTarget, { method, replace });
 
       clickedButtonRef.current = null;
     }
@@ -386,6 +370,7 @@ export function ValidatedForm<DataType>({
         onReset?.(event);
         if (event.defaultPrevented) return;
         reset();
+        resetControlledFields();
       }}
     >
       <InternalFormContext.Provider value={contextValue}>

package/src/hooks.ts

@@ -8,15 +8,14 @@ import {
   useInternalFormContext,
   useFieldTouched,
   useFieldError,
-  useFormAtomValue,
   useFieldDefaultValue,
+  useClearError,
+  useInternalIsSubmitting,
+  useInternalIsValid,
+  useInternalHasBeenSubmitted,
+  useValidateField,
+  useRegisterReceiveFocus,
 } from "./internal/hooks";
-import {
-  formPropsAtom,
-  hasBeenSubmittedAtom,
-  isSubmittingAtom,
-  isValidAtom,
-} from "./internal/state";
 import {
   useControllableValue,
   useUpdateControllableValue,
@@ -31,7 +30,7 @@ import {
  */
 export const useIsSubmitting = (formId?: string) => {
   const formContext = useInternalFormContext(formId, "useIsSubmitting");
-  return useFormAtomValue(isSubmittingAtom(formContext.formId));
+  return useInternalIsSubmitting(formContext.formId);
 };
 
 /**
@@ -41,7 +40,7 @@ export const useIsSubmitting = (formId?: string) => {
  */
 export const useIsValid = (formId?: string) => {
   const formContext = useInternalFormContext(formId, "useIsValid");
-  return useFormAtomValue(isValidAtom(formContext.formId));
+  return useInternalIsValid(formContext.formId);
 };
 
 export type FieldProps = {
@@ -103,14 +102,12 @@ export const useField = (
 
   const defaultValue = useFieldDefaultValue(name, formContext);
   const [touched, setTouched] = useFieldTouched(name, formContext);
-  const [error, setError] = useFieldError(name, formContext);
+  const error = useFieldError(name, formContext);
+  const clearError = useClearError(formContext);
 
-  const hasBeenSubmitted = useFormAtomValue(
-    hasBeenSubmittedAtom(formContext.formId)
-  );
-  const { validateField, registerReceiveFocus } = useFormAtomValue(
-    formPropsAtom(formContext.formId)
-  );
+  const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
+  const validateField = useValidateField(formContext.formId);
+  const registerReceiveFocus = useRegisterReceiveFocus(formContext.formId);
 
   useEffect(() => {
     if (handleReceiveFocus)
@@ -120,7 +117,7 @@ export const useField = (
   const field = useMemo<FieldProps>(() => {
     const helpers = {
       error,
-      clearError: () => setError(undefined),
+      clearError: () => clearError(name),
       validate: () => {
         validateField(name);
       },
@@ -140,13 +137,13 @@ export const useField = (
     };
   }, [
     error,
+    clearError,
     defaultValue,
     touched,
     setTouched,
     name,
     hasBeenSubmitted,
     options?.validationBehavior,
-    setError,
     validateField,
   ]);