remix-validated-form 4.3.1-beta.0 → 4.4.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,
@@ -234,41 +225,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 +263,8 @@ export function ValidatedForm<DataType>({
       action,
       defaultValues: providedDefaultValues ?? backendDefaultValues ?? {},
       subaction,
-      validateField,
       registerReceiveFocus,
+      validator,
     });
   }, [
     action,
@@ -295,8 +272,8 @@ export function ValidatedForm<DataType>({
     registerReceiveFocus,
     subaction,
     syncFormProps,
-    validateField,
     backendDefaultValues,
+    validator,
   ]);
 
   useEffect(() => {
@@ -386,6 +363,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,
   ]);
 

package/src/internal/hooks.ts

@@ -1,6 +1,4 @@
 import { useActionData, useMatches, useTransition } from "@remix-run/react";
-import { Atom, useAtom, WritableAtom } from "jotai";
-import { useAtomValue, useUpdateAtom } from "jotai/utils";
 import lodashGet from "lodash/get";
 import { useCallback, useContext } from "react";
 import invariant from "tiny-invariant";
@@ -8,25 +6,8 @@ import { FieldErrors, ValidationErrorResponseData } from "..";
 import { formDefaultValuesKey } from "./constants";
 import { InternalFormContext, InternalFormContextValue } from "./formContext";
 import { Hydratable, hydratable } from "./hydratable";
-import {
-  ATOM_SCOPE,
-  fieldErrorAtom,
-  fieldTouchedAtom,
-  formPropsAtom,
-  isHydratedAtom,
-  setFieldErrorAtom,
-  setTouchedAtom,
-} from "./state";
-
-export const useFormUpdateAtom: typeof useUpdateAtom = (atom) =>
-  useUpdateAtom(atom, ATOM_SCOPE);
-
-export const useFormAtom = <Value, Update, Result extends void | Promise<void>>(
-  anAtom: WritableAtom<Value, Update, Result>
-) => useAtom(anAtom, ATOM_SCOPE);
-
-export const useFormAtomValue = <Value>(anAtom: Atom<Value>) =>
-  useAtomValue(anAtom, ATOM_SCOPE);
+import { InternalFormId } from "./state/storeFamily";
+import { useFormStore } from "./state/storeHooks";
 
 export const useInternalFormContext = (
   formId?: string | symbol,
@@ -72,7 +53,7 @@ export const useFieldErrorsForForm = (
   context: InternalFormContextValue
 ): Hydratable<FieldErrors | undefined> => {
   const response = useErrorResponseForForm(context);
-  const hydrated = useFormAtomValue(isHydratedAtom(context.formId));
+  const hydrated = useFormStore(context.formId, (state) => state.isHydrated);
   return hydratable.from(response?.fieldErrors, hydrated);
 };
 
@@ -97,7 +78,7 @@ export const useDefaultValuesForForm = (
   context: InternalFormContextValue
 ): Hydratable<{ [fieldName: string]: any }> => {
   const { formId, defaultValuesProp } = context;
-  const hydrated = useFormAtomValue(isHydratedAtom(formId));
+  const hydrated = useFormStore(formId, (state) => state.isHydrated);
   const errorResponse = useErrorResponseForForm(context);
   const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
 
@@ -133,20 +114,31 @@ export const useHasActiveFormSubmit = ({
 export const useFieldTouched = (
   field: string,
   { formId }: InternalFormContextValue
-) => useFormAtom(fieldTouchedAtom({ formId, field }));
+) => {
+  const touched = useFormStore(formId, (state) => state.touchedFields[field]);
+  const setFieldTouched = useFormStore(formId, (state) => state.setTouched);
+  const setTouched = useCallback(
+    (touched: boolean) => setFieldTouched(field, touched),
+    [field, setFieldTouched]
+  );
+  return [touched, setTouched] as const;
+};
 
 export const useFieldError = (
   name: string,
   context: InternalFormContextValue
 ) => {
   const fieldErrors = useFieldErrorsForForm(context);
-  const [state, set] = useFormAtom(
-    fieldErrorAtom({ formId: context.formId, field: name })
+  const state = useFormStore(
+    context.formId,
+    (state) => state.fieldErrors[name]
   );
-  return [
-    fieldErrors.map((fieldErrors) => fieldErrors?.[name]).hydrateTo(state),
-    set,
-  ] as const;
+  return fieldErrors.map((fieldErrors) => fieldErrors?.[name]).hydrateTo(state);
+};
+
+export const useClearError = (context: InternalFormContextValue) => {
+  const { formId } = context;
+  return useFormStore(formId, (state) => state.clearFieldError);
 };
 
 export const useFieldDefaultValue = (
@@ -154,26 +146,58 @@ export const useFieldDefaultValue = (
   context: InternalFormContextValue
 ) => {
   const defaultValues = useDefaultValuesForForm(context);
-  const { defaultValues: state } = useFormAtomValue(
-    formPropsAtom(context.formId)
-  );
+  const state = useSyncedDefaultValues(context.formId);
   return defaultValues
     .map((val) => lodashGet(val, name))
     .hydrateTo(lodashGet(state, name));
 };
 
-export const useClearError = ({ formId }: InternalFormContextValue) => {
-  const updateError = useFormUpdateAtom(setFieldErrorAtom(formId));
-  return useCallback(
-    (name: string) => updateError({ field: name, error: undefined }),
-    [updateError]
+export const useInternalIsSubmitting = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.isSubmitting);
+
+export const useInternalIsValid = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.isValid());
+
+export const useInternalHasBeenSubmitted = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.hasBeenSubmitted);
+
+export const useValidateField = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.validateField);
+
+export const useValidate = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.validate);
+
+const noOpReceiver = () => () => {};
+export const useRegisterReceiveFocus = (formId: InternalFormId) =>
+  useFormStore(
+    formId,
+    (state) => state.formProps?.registerReceiveFocus ?? noOpReceiver
   );
-};
 
-export const useSetTouched = ({ formId }: InternalFormContextValue) => {
-  const setTouched = useFormUpdateAtom(setTouchedAtom(formId));
-  return useCallback(
-    (name: string, touched: boolean) => setTouched({ field: name, touched }),
-    [setTouched]
+const defaultDefaultValues = {};
+export const useSyncedDefaultValues = (formId: InternalFormId) =>
+  useFormStore(
+    formId,
+    (state) => state.formProps?.defaultValues ?? defaultDefaultValues
   );
-};
+
+export const useSetTouched = ({ formId }: InternalFormContextValue) =>
+  useFormStore(formId, (state) => state.setTouched);
+
+export const useTouchedFields = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.touchedFields);
+
+export const useFieldErrors = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.fieldErrors);
+
+export const useSetFieldErrors = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.setFieldErrors);
+
+export const useResetFormElement = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.resetFormElement);
+
+export const useFormActionProp = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.formProps?.action);
+
+export const useFormSubactionProp = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.formProps?.subaction);

package/src/internal/logic/getRadioChecked.ts

@@ -8,7 +8,7 @@ export const getRadioChecked = (
 
 if (import.meta.vitest) {
   const { it, expect } = import.meta.vitest;
-  it("add", () => {
+  it("getRadioChecked", () => {
     expect(getRadioChecked("on", "on")).toBe(true);
     expect(getRadioChecked("on", undefined)).toBe(undefined);
     expect(getRadioChecked("trueValue", undefined)).toBe(undefined);

package/src/internal/state/cleanup.ts

@@ -0,0 +1,8 @@
+import { controlledFieldStore } from "./controlledFieldStore";
+import { formStore } from "./createFormStore";
+import { InternalFormId } from "./storeFamily";
+
+export const cleanupFormState = (formId: InternalFormId) => {
+  formStore.remove(formId);
+  controlledFieldStore.remove(formId);
+};

package/src/internal/state/controlledFieldStore.ts

@@ -0,0 +1,91 @@
+import invariant from "tiny-invariant";
+import create from "zustand";
+import { immer } from "zustand/middleware/immer";
+import { storeFamily } from "./storeFamily";
+
+export 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 const controlledFieldStore = storeFamily(() =>
+  create<ControlledFieldState>()(
+    immer((set, get, api) => ({
+      fields: {},
+
+      register: (field) =>
+        set((state) => {
+          if (state.fields[field]) {
+            state.fields[field]!.refCount++;
+          } else {
+            state.fields[field] = {
+              refCount: 1,
+              value: undefined,
+              hydrated: false,
+              valueUpdatePromise: undefined,
+              resolveValueUpdate: undefined,
+            };
+          }
+        }),
+
+      unregister: (field) =>
+        set((state) => {
+          const fieldState = state.fields[field];
+          if (!fieldState) return;
+
+          fieldState.refCount--;
+          if (fieldState.refCount === 0) delete state.fields[field];
+        }),
+
+      setValue: (field, value) =>
+        set((state) => {
+          const fieldState = state.fields[field];
+          if (!fieldState) return;
+
+          fieldState.value = value;
+          const promise = new Promise<void>((resolve) => {
+            fieldState.resolveValueUpdate = resolve;
+          });
+          fieldState.valueUpdatePromise = promise;
+        }),
+
+      hydrateWithDefault: (field, defaultValue) =>
+        set((state) => {
+          const fieldState = state.fields[field];
+          if (!fieldState) return;
+
+          fieldState.value = defaultValue;
+          fieldState.defaultValue = defaultValue;
+          fieldState.hydrated = true;
+        }),
+
+      awaitValueUpdate: async (field) => {
+        await get().fields[field]?.valueUpdatePromise;
+      },
+
+      reset: () =>
+        set((state) => {
+          Object.values(state.fields).forEach((field) => {
+            if (!field) return;
+            field.value = field.defaultValue;
+          });
+        }),
+    }))
+  )
+);

package/src/internal/state/controlledFields.ts

@@ -1,115 +1,36 @@
-import { atom, PrimitiveAtom } from "jotai";
-import { useAtomCallback } from "jotai/utils";
-import omit from "lodash/omit";
 import { useCallback, useEffect } from "react";
 import { InternalFormContextValue } from "../formContext";
-import {
-  useFieldDefaultValue,
-  useFormAtomValue,
-  useFormAtom,
-  useFormUpdateAtom,
-} from "../hooks";
-import { isHydratedAtom } from "../state";
-import {
-  fieldAtomFamily,
-  FieldAtomKey,
-  formAtomFamily,
-  InternalFormId,
-} from "./atomUtils";
-
-export const controlledFieldsAtom = formAtomFamily<
-  Record<string, PrimitiveAtom<unknown>>
->({});
-const refCountAtom = fieldAtomFamily(() => atom(0));
-const fieldValueAtom = fieldAtomFamily(() => atom<unknown>(undefined));
-const fieldValueHydratedAtom = fieldAtomFamily(() => atom(false));
-
-export const valueUpdatePromiseAtom = fieldAtomFamily(() =>
-  atom<Promise<void> | undefined>(undefined)
-);
-export const resolveValueUpdateAtom = fieldAtomFamily(() =>
-  atom<(() => void) | undefined>(undefined)
-);
-
-const registerAtom = atom(null, (get, set, { formId, field }: FieldAtomKey) => {
-  set(refCountAtom({ formId, field }), (prev) => prev + 1);
-  const newRefCount = get(refCountAtom({ formId, field }));
-  // We don't set hydrated here because it gets set when we know
-  // we have the right default values
-  if (newRefCount === 1) {
-    set(controlledFieldsAtom(formId), (prev) => ({
-      ...prev,
-      [field]: fieldValueAtom({ formId, field }),
-    }));
-  }
-});
-
-const unregisterAtom = atom(
-  null,
-  (get, set, { formId, field }: FieldAtomKey) => {
-    set(refCountAtom({ formId, field }), (prev) => prev - 1);
-    const newRefCount = get(refCountAtom({ formId, field }));
-    if (newRefCount === 0) {
-      set(controlledFieldsAtom(formId), (prev) => omit(prev, field));
-      fieldValueAtom.remove({ formId, field });
-      resolveValueUpdateAtom.remove({ formId, field });
-      fieldValueHydratedAtom.remove({ formId, field });
-    }
-  }
-);
-
-export const setControlledFieldValueAtom = atom(
-  null,
-  (
-    _get,
-    set,
-    {
-      formId,
-      field,
-      value,
-    }: { formId: InternalFormId; field: string; value: unknown }
-  ) => {
-    set(fieldValueAtom({ formId, field }), value);
-    const resolveAtom = resolveValueUpdateAtom({ formId, field });
-    const promiseAtom = valueUpdatePromiseAtom({ formId, field });
-
-    const promise = new Promise<void>((resolve) =>
-      set(resolveAtom, () => {
-        resolve();
-        set(resolveAtom, undefined);
-        set(promiseAtom, undefined);
-      })
-    );
-    set(promiseAtom, promise);
-  }
-);
+import { useFieldDefaultValue } from "../hooks";
+import { controlledFieldStore } from "./controlledFieldStore";
+import { formStore } from "./createFormStore";
+import { InternalFormId } from "./storeFamily";
 
 export const useControlledFieldValue = (
   context: InternalFormContextValue,
   field: string
 ) => {
-  const fieldAtom = fieldValueAtom({ formId: context.formId, field });
-  const [value, setValue] = useFormAtom(fieldAtom);
+  const useValueStore = controlledFieldStore(context.formId);
+  const value = useValueStore((state) => state.fields[field]?.value);
 
+  const useFormStore = formStore(context.formId);
+  const isFormHydrated = useFormStore((state) => state.isHydrated);
   const defaultValue = useFieldDefaultValue(field, context);
-  const isHydrated = useFormAtomValue(isHydratedAtom(context.formId));
-  const [isFieldHydrated, setIsFieldHydrated] = useFormAtom(
-    fieldValueHydratedAtom({ formId: context.formId, field })
+
+  const isFieldHydrated = useValueStore(
+    (state) => state.fields[field]?.hydrated ?? false
   );
+  const hydrateWithDefault = useValueStore((state) => state.hydrateWithDefault);
 
   useEffect(() => {
-    if (isHydrated && !isFieldHydrated) {
-      setValue(defaultValue);
-      setIsFieldHydrated(true);
+    if (isFormHydrated && !isFieldHydrated) {
+      hydrateWithDefault(field, defaultValue);
     }
   }, [
     defaultValue,
     field,
-    context.formId,
+    hydrateWithDefault,
     isFieldHydrated,
-    isHydrated,
-    setIsFieldHydrated,
-    setValue,
+    isFormHydrated,
   ]);
 
   return isFieldHydrated ? value : defaultValue;
@@ -119,27 +40,26 @@ export const useControllableValue = (
   context: InternalFormContextValue,
   field: string
 ) => {
-  const resolveUpdate = useFormAtomValue(
-    resolveValueUpdateAtom({ formId: context.formId, field })
+  const useValueStore = controlledFieldStore(context.formId);
+
+  const resolveUpdate = useValueStore(
+    (state) => state.fields[field]?.resolveValueUpdate
   );
   useEffect(() => {
     resolveUpdate?.();
   }, [resolveUpdate]);
 
-  const register = useFormUpdateAtom(registerAtom);
-  const unregister = useFormUpdateAtom(unregisterAtom);
+  const register = useValueStore((state) => state.register);
+  const unregister = useValueStore((state) => state.unregister);
   useEffect(() => {
-    register({ formId: context.formId, field });
-    return () => unregister({ formId: context.formId, field });
+    register(field);
+    return () => unregister(field);
   }, [context.formId, field, register, unregister]);
 
-  const setControlledFieldValue = useFormUpdateAtom(
-    setControlledFieldValueAtom
-  );
+  const setControlledFieldValue = useValueStore((state) => state.setValue);
   const setValue = useCallback(
-    (value: unknown) =>
-      setControlledFieldValue({ formId: context.formId, field, value }),
-    [field, context.formId, setControlledFieldValue]
+    (value: unknown) => setControlledFieldValue(field, value),
+    [field, setControlledFieldValue]
   );
 
   const value = useControlledFieldValue(context, field);
@@ -148,23 +68,11 @@ export const useControllableValue = (
 };
 
 export const useUpdateControllableValue = (formId: InternalFormId) => {
-  const setControlledFieldValue = useFormUpdateAtom(
-    setControlledFieldValueAtom
-  );
-  return useCallback(
-    (field: string, value: unknown) =>
-      setControlledFieldValue({ formId, field, value }),
-    [formId, setControlledFieldValue]
-  );
+  const useValueStore = controlledFieldStore(formId);
+  return useValueStore((state) => state.setValue);
 };
 
 export const useAwaitValue = (formId: InternalFormId) => {
-  return useAtomCallback(
-    useCallback(
-      async (get, _set, field: string) => {
-        await get(valueUpdatePromiseAtom({ formId, field }));
-      },
-      [formId]
-    )
-  );
+  const useValueStore = controlledFieldStore(formId);
+  return useValueStore((state) => state.awaitValueUpdate);
 };