fix(list-atom): make pristine (!dirty) after new initialValue is set (#…

…107)

Fixes #105
This requires the user to control the referential equality of the initialValue for the same values in order to prevent unnecessary updates.

src/atoms/_useFieldInitialValue.ts

@@ -24,9 +24,6 @@ export function _useFieldInitialValue<Value>(
     if (initialValue === undefined) {
       return;
     }
-    if (!store.get(field.dirty)) {
-      store.set(field.value, initialValue);
-    }
-    store.set(field._initialValue, initialValue);
-  }, [store, field._initialValue, field.value, field.dirty, initialValue]);
+    store.set(field.value, initialValue);
+  }, [store, field.value, initialValue]);
 }

src/atoms/list-atom/listAtom.test.ts

@@ -272,11 +272,10 @@ describe("listAtom()", () => {
       expect(state.current.dirty).toBe(false);
 
       await act(async () => listActions.current.remove(list.current[0]!));
-
       expect(state.current.dirty).toBe(true);
     });
 
-    it("becomes dirty when an item is added ", async () => {
+    it("becomes dirty when an item is added", async () => {
       const field = listAtom({
         value: [],
         builder: (value) => numberField({ value }),
@@ -288,7 +287,6 @@ describe("listAtom()", () => {
       expect(state.current.dirty).toBe(false);
 
       await act(async () => listActions.current.add());
-
       expect(state.current.dirty).toBe(true);
     });
 
@@ -306,10 +304,32 @@ describe("listAtom()", () => {
       expect(state.current.dirty).toBe(false);
 
       await act(async () => listActions.current.move(list.current[0]!));
-
       expect(state.current.dirty).toBe(true);
     });
 
+    it("becomes dirty when some item field is edited", async () => {
+      const field = listAtom({
+        value: [undefined],
+        builder: (value) => numberField({ value }),
+      });
+
+      const { result: fieldState } = renderHook(() => useFieldState(field));
+      const { result: formFields } = renderHook(() =>
+        useAtomValue(useAtomValue(field)._formFields),
+      );
+      const { result: inputActions } = renderHook(() =>
+        useFieldActions(formFields.current[0]!),
+      );
+
+      expect(fieldState.current.dirty).toBe(false);
+
+      await act(async () => inputActions.current.setValue(42));
+      expect(fieldState.current.dirty).toBe(true);
+
+      await act(async () => inputActions.current.reset());
+      expect(fieldState.current.dirty).toBe(false);
+    });
+
     it("becomes pristine when items are reordered & back", async () => {
       const field = listAtom({
         value: [42, 84],
@@ -325,54 +345,29 @@ describe("listAtom()", () => {
 
       // moves first item down
       await act(async () => listActions.current.move(list.current[0]!));
-
       expect(state.current.dirty).toBe(true);
 
       // moves first item down
       await act(async () => listActions.current.move(list.current[0]!));
-
       expect(state.current.dirty).toBe(false);
     });
 
     it("becomes pristine after value is set (the set is usually called by useFieldInitialValue to hydrate the field)", async () => {
       const field = listAtom({
-        value: [] as number[],
+        value: [1, 2],
         builder: (value) => numberField({ value }),
       });
 
       const { result: state } = renderHook(() => useFieldState(field));
       const { result: fieldActions } = renderHook(() => useFieldActions(field));
 
-      expect(state.current.dirty).toBe(false);
-
-      await act(async () => fieldActions.current.setValue([42]));
+      // make list dirty
+      const { result: listActions } = renderHook(() => useListActions(field));
+      await act(async () => listActions.current.add());
+      expect(state.current.dirty).toBe(true);
 
+      await act(async () => fieldActions.current.setValue([42, 84]));
       expect(state.current.dirty).toBe(false);
     });
-
-    it("becomes dirty when some item field is edited", async () => {
-      const field = listAtom({
-        value: [undefined],
-        builder: (value) => numberField({ value }),
-      });
-
-      const { result: fieldState } = renderHook(() => useFieldState(field));
-      const { result: formFields } = renderHook(() =>
-        useAtomValue(useAtomValue(field)._formFields),
-      );
-      const { result: inputActions } = renderHook(() =>
-        useFieldActions(formFields.current[0]!),
-      );
-
-      expect(fieldState.current.dirty).toBe(false);
-
-      await act(async () => inputActions.current.setValue(42));
-
-      expect(fieldState.current.dirty).toBe(true);
-
-      await act(async () => inputActions.current.reset());
-
-      expect(fieldState.current.dirty).toBe(false);
-    });
   });
 });

src/hooks/use-list-field-initial-value/index.ts

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

src/hooks/use-list-field-initial-value/useListFieldInitialValue.test.ts

@@ -0,0 +1,42 @@
+import { act, renderHook } from "@testing-library/react";
+import { useFieldState } from "form-atoms";
+import { describe, expect, it } from "vitest";
+
+import { useListFieldInitialValue } from "./useListFieldInitialValue";
+import { listAtom } from "../../atoms";
+import { numberField } from "../../fields";
+import { useListActions } from "../use-list-actions";
+
+describe("useListFieldInitialValue()", () => {
+  it("reinitializes the field value", async () => {
+    const field = listAtom({
+      value: [] as number[],
+      builder: (value) => numberField({ value }),
+    });
+
+    const { result: state } = renderHook(() => useFieldState(field));
+    const { rerender } = renderHook(
+      (props) => useListFieldInitialValue(field, props.initialValue),
+      { initialProps: { initialValue: [1, 2] } },
+    );
+
+    // make list dirty
+    const { result: listActions } = renderHook(() => useListActions(field));
+    await act(async () => listActions.current.add());
+    expect(state.current.dirty).toBe(true);
+
+    const initialValue = [42, 84];
+
+    // initialization makes field pristine
+    rerender({ initialValue });
+    expect(state.current.dirty).toBe(false);
+
+    // make list dirty again
+    await act(async () => listActions.current.add());
+    expect(state.current.dirty).toBe(true);
+
+    // re-inititialation skipped with the same initialValue (useEffect dependency)
+    rerender({ initialValue });
+    expect(state.current.dirty).toBe(true);
+  });
+});

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

@@ -1,2 +1 @@
 export * from "./useListField";
-export * from "./useListFieldInitialValue";

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

@@ -1,10 +1,10 @@
 import { UseFieldOptions } from "form-atoms";
 import { useAtomValue } from "jotai";
 
-import { useListFieldInitialValue } from "./useListFieldInitialValue";
 import { ListAtomItems, ListAtomValue } from "../../atoms/list-atom";
 import { ListField } from "../../fields";
 import { useListActions } from "../use-list-actions";
+import { useListFieldInitialValue } from "../use-list-field-initial-value";
 
 export const useListField = <
   Fields extends ListAtomItems,