fix: use hydrateAtoms for listField (#77)

src/hooks/index.ts

@@ -5,6 +5,7 @@ export * from "./use-date-field-props";
 export * from "./use-field-error";
 export * from "./use-field-props";
 export * from "./use-files-field-props";
+export * from "./use-hydrate-field";
 export * from "./use-list-actions";
 export * from "./use-list-field";
 export * from "./use-multiselect-field-props";

src/hooks/use-hydrate-field/index.ts

@@ -0,0 +1 @@
+export * from "./useHydrateField";

src/hooks/use-hydrate-field/useHydrateField.ts

@@ -0,0 +1,20 @@
+import { FieldAtom, RESET, UseAtomOptions } from "form-atoms";
+import { useAtomValue } from "jotai";
+import { useHydrateAtoms } from "jotai/utils";
+
+export const useHydrateField = <Value>(
+  fieldAtom: FieldAtom<Value>,
+  initialValue?: Value | typeof RESET,
+  options?: UseAtomOptions,
+) => {
+  const field = useAtomValue(fieldAtom);
+  useHydrateAtoms(
+    initialValue
+      ? [
+          [field.value, initialValue],
+          [field._initialValue, initialValue],
+        ]
+      : [],
+    options,
+  );
+};

src/hooks/use-list-field/useListField.ts

@@ -1,8 +1,9 @@
-import { UseFieldOptions, useFieldInitialValue } from "form-atoms";
+import { UseFieldOptions } from "form-atoms";
 import { useAtomValue } from "jotai";
 
 import { ListAtomItems, ListAtomValue } from "../../atoms/list-atom";
 import { ListField } from "../../fields";
+import { useHydrateField } from "../use-hydrate-field";
 import { useListActions } from "../use-list-actions";
 
 export const useListField = <
@@ -12,13 +13,13 @@ export const useListField = <
   list: ListField<Fields, Value>,
   options?: UseFieldOptions<Value[]>,
 ) => {
+  useHydrateField(list, options?.initialValue, options);
   const atoms = useAtomValue(list);
   const splitItems = useAtomValue(atoms._splitList);
   const formList = useAtomValue(atoms._formList);
   const formFields = useAtomValue(atoms._formFields);
   const isEmpty = useAtomValue(atoms.empty);
   const { add, move, remove } = useListActions(list);
-  useFieldInitialValue(list, options?.initialValue, options);
 
   const items = splitItems.map((item, index) => ({
     item,