react-form-manage 1.0.8-beta.16 → 1.0.8-beta.18

package/CHANGELOG.md

@@ -2,20 +2,67 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8-beta.17] - 2026-02-01
+
+### Features
+
+- Add nested path onChange trigger: `setFieldValue` now triggers onChange for child paths when parent path has no listener
+- Support setting array values in FormList with automatic re-render of list items and value updates
+- Enhanced listener types with `type` field (normal/array) and `onArrayChange` callback support
+
+### Improvements
+
+- `useFormListControl` now tracks item values and handles cache properly
+- Improved `useFormItemControl` with cache path validation using `lodash.has`
+
+## [1.0.8-beta.16] - 2026-02-01
+
+### Fixes
+
+- Fix: Guard listener registration to prevent pushing incomplete listeners without name/formName
+- Fix: Guard cleanup execution - only cleanup listeners that actually exist in the store
+- Add formItemId to dependency array for proper listener re-registration in strict mode
+
+## [1.0.8-beta.15] - 2026-02-01
+
+### Features
+
+- Export `useFormStore` and types (`FormInstance`, `ListenerItem`, `CleanUpItem`) to public API
+- Allow advanced users to access and manipulate form state directly
+
+## [1.0.8-beta.13] - 2026-02-01
+
+### Refactoring
+
+- Combine separate Zustand stores (`useFormListeners`, `useFormCleanUp`) into single unified `useFormStore`
+- Implement slice-based store pattern for better code organization and maintainability
+- Update all internal imports to use unified store across hooks and components
+- Maintain backward compatibility with deprecated store aliases
+
+## [1.0.8-beta.12] - 2026-01-27
+
+### Features
+
+- Add slice-based store architecture using Zustand for better scalability
+- Refactor form state management with proper separation of concerns
+
 ## [1.0.8-beta.3] - 2026-01-22
 
 ## [1.0.8-beta.7] - 2026-01-24
+
 - Add control flag for FormItem to support rendering MUI uncontrolled components when initial value is undefined (control on init).
 - Fix: `onReset` did not restore listener state to init.
 - Fix: reset did not return Form submit state to `idle`.
 - Add `hidden` prop to allow hiding components while still assigning a value.
 
 Docs: Update usage notes for `FormItem` control-on-init flag and `hidden` prop.
+
 - Add `UseFormItemStateWatchReturn` type export for `useFormItemStateWatch` hook
 
 - Add isTouched field to FormItem for tracking user interaction state
 
 ## [1.0.8-beta.10] - 2026-01-27
+
 - `useForm()` giờ có thể trả về form instance từ provider lân cận nếu không truyền `formName` (không còn bắt buộc truyền tên form khi đã wrap trong `Form`).
 - `FormList.add` khi không truyền `index` sẽ mặc định append vào cuối danh sách.
 - Docs: cập nhật hướng dẫn cho `useForm` và `FormList.add`.
@@ -23,6 +70,7 @@ Docs: Update usage notes for `FormItem` control-on-init flag and `hidden` prop.
 ## [1.0.8-beta.1] - 2026-01-22
 
 - Fix UseFormItemControlReturn errors type to properly export FormFieldError[]
+
 ## [1.0.7-beta.1] - 2026-01-22
 
 - Add `FormFieldError` type export for typed error handling
@@ -103,7 +151,3 @@ Docs: Update usage notes for `FormItem` control-on-init flag and `hidden` prop.
 ## [1.0.5] - 2026-01-21
 
 - Export `Form` as a named export in addition to default to improve import ergonomics for consumers.
-
-
-
-

package/README.md

@@ -157,6 +157,7 @@ Custom validator (async):
 `FormList` là render-prop component cung cấp `listFields` và các action `add`, `remove`, `move`.
 
 Ghi chú:
+
 - `add()` nếu không truyền `index` sẽ tự động append phần tử mới vào cuối danh sách.
 
 Ví dụ:

package/dist/components/Form/FormList.d.ts

@@ -8,7 +8,7 @@ export interface FormListProps<T = any> {
         name: string;
         key: string;
     }>, operations: {
-        add: (index: number) => void;
+        add: (index?: number) => void;
         remove: (opts: {
             index?: number;
             key?: string;

package/dist/hooks/useFormItemControl.js

@@ -1,4 +1,4 @@
-import { get, isNil } from "lodash";
+import { get, has, isNil } from "lodash";
 import { useTaskEffect } from "minh-custom-hooks-release";
 import { useEffect, useMemo } from "react";
 import { useShallow } from "zustand/react/shallow";
@@ -319,10 +319,13 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
     const cacheData = getCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName));
     if (cacheData) {
       const getNewDataFromCache = get(cacheData, name);
-      if (!getNewDataFromCache) {
-        onChange(initialValue);
+      const isIncludeDirectoryInCache = has(cacheData, name);
+      if (!isIncludeDirectoryInCache && isNil(getNewDataFromCache)) {
+        onChange(initialValue, {
+          notTriggerDirty: true
+        });
       } else
-        onChange(getNewDataFromCache);
+        onChange(getNewDataFromCache, { notTriggerDirty: true });
     }
   }, [name, formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]);
   useEffect(() => {

package/dist/hooks/useFormListControl.d.ts

@@ -2,6 +2,7 @@ import type { FormInstance } from "../stores/formStore";
 type ListField = {
     name: string;
     key: string;
+    value?: any;
 };
 interface UseFormListControlProps {
     name?: string;

package/dist/hooks/useFormListControl.js

@@ -5,13 +5,18 @@ import { useShallow } from "zustand/react/shallow";
 import { useFormContext } from "../providers/Form";
 import { useFormStore } from "../stores/formStore";
 function useFormListControl({ name, form, initialValues, formName }) {
+  const [formItemId] = useState(v4());
   const contextForm = useFormContext();
   const getFormValues = useFormStore((state) => state.getFormValues);
   const [listFormInitValues, setListFormInitValues] = useState(void 0);
-  const { clearCacheData, setCacheData } = useFormStore(useShallow((state) => ({
+  const { clearCacheData, setCacheData, setListener, getListener } = useFormStore(useShallow((state) => ({
+    // Cache
     cacheData: state.cacheData,
     clearCacheData: state.clearCacheData,
-    setCacheData: state.setCacheData
+    setCacheData: state.setCacheData,
+    // Listener
+    setListener: state.setListener,
+    getListener: state.getListener
   })));
   const { setCleanUpStack } = useFormStore(useShallow((state) => ({
     setCleanUpStack: state.setCleanUpStack
@@ -37,7 +42,16 @@ function useFormListControl({ name, form, initialValues, formName }) {
         value: d
       };
     }).filter(Boolean);
-    const mapCurWithKey = cur.map((c) => mapPrevWithKey.find((m) => m.key === c.key) || c);
+    const mapCurWithKey = cur.map((c) => {
+      const find = mapPrevWithKey.find((m) => m.key === c.key);
+      if (find) {
+        return {
+          key: find.key,
+          value: isNil(c.value) ? find.value : c.value
+        };
+      }
+      return c;
+    });
     const getNewValueCache = mapCurWithKey.filter(Boolean).map((c) => c.value);
     const startRemoveIndex = formDataBeforeChange.length - getNewValueCache.length;
     if (startRemoveIndex > 0) {
@@ -218,6 +232,42 @@ function useFormListControl({ name, form, initialValues, formName }) {
       clearCacheData();
     };
   }, [listFields]);
+  useEffect(() => {
+    if (!getListener(formItemId)) {
+      setListener({
+        formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
+        name: name || "",
+        formItemId,
+        type: "array",
+        onArrayChange: (newArr) => {
+          setListFields((prev) => {
+            const result = newArr.map((_, i) => {
+              const itemName = `${name}.${i}`;
+              const existingItem = prev[i];
+              return {
+                key: existingItem ? existingItem.key : v4(),
+                name: itemName
+              };
+            });
+            handleCacheListField(prev, result.map((r, i) => {
+              return { ...r, value: newArr[i] };
+            }));
+            return result;
+          });
+        }
+      });
+    }
+    return () => {
+      if (getListener(formItemId)) {
+        setListener({
+          formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
+          name: name || "",
+          formItemId,
+          onArrayChange: void 0
+        });
+      }
+    };
+  }, []);
   return { listFields, move, add, remove };
 }
 export {

package/dist/index.cjs.d.ts

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

package/dist/index.d.ts

@@ -1,11 +1,11 @@
-import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, type FormProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn } from "./providers/Form";
 import { SUBMIT_STATE } from "./constants/form";
+import Form, { useForm, useFormStateWatch, useSubmitDataWatch, useWatch, type FormFieldError, type FormProps, type SubmitState, type UseFormItemStateWatchReturn, type ValidationRule } from "./providers/Form";
 import FormItem, { type FormItemProps } from "./components/Form/FormItem";
 import FormList, { type FormListProps } from "./components/Form/FormList";
-import Input from "./components/Input";
 import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
+import Input from "./components/Input";
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
-import { useFormStore, type FormInstance, type ListenerItem, type CleanUpItem } from "./stores/formStore";
-export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, useFormStore, type FormProps, type FormItemProps, type FormListProps, type InputWrapperProps, type ValidationRule, type FormFieldError, type SubmitState, type UseFormItemStateWatchReturn, type FormInstance, type ListenerItem, type CleanUpItem, SUBMIT_STATE, };
+import { useFormStore, type CleanUpItem, type FormInstance, type ListenerItem } from "./stores/formStore";
+export { Form, FormItem, FormList, Input, InputWrapper, SUBMIT_STATE, useForm, useFormItemControl, useFormListControl, useFormStateWatch, useFormStore, useSubmitDataWatch, useWatch, type CleanUpItem, type FormFieldError, type FormInstance, type FormItemProps, type FormListProps, type FormProps, type InputWrapperProps, type ListenerItem, type SubmitState, type UseFormItemStateWatchReturn, type ValidationRule, };
 export default Form;

package/dist/index.esm.d.ts

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

package/dist/index.js

@@ -1,9 +1,9 @@
-import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch } from "./providers/Form";
 import { SUBMIT_STATE } from "./constants/form";
+import Form, { useForm, useFormStateWatch, useSubmitDataWatch, useWatch } from "./providers/Form";
 import FormItem from "./components/Form/FormItem";
 import FormList from "./components/Form/FormList";
-import Input from "./components/Input";
 import InputWrapper from "./components/Form/InputWrapper";
+import Input from "./components/Input";
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
 import { useFormStore } from "./stores/formStore";

package/dist/providers/Form.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneDeep, get, isEqual, isNil, last, set, uniqBy } from "lodash";
+import { cloneDeep, get, isEqual, isNil, isPlainObject, last, set, uniqBy } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import { createContext, useContext, useEffect, useState } from "react";
 import { flushSync } from "react-dom";
@@ -47,9 +47,36 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
   const setFieldValue = (name, value, options) => {
     const listener = getListeners().find((l) => l.name === name && l.formName === formName);
     if (listener) {
-      listener.onChange(value, options);
+      if (listener.type === "array") {
+        if (!isEqual(getFormItemValue(formName, name), value)) {
+          listener.onArrayChange(value, options);
+          const allStringPath = getAllNoneObjStringPath(value);
+          allStringPath.forEach((p) => {
+            const findListener = getListeners().find((l) => l.name === `${name}.${p}` && l.formName === formName);
+            if (findListener) {
+              findListener.onChange(get(value, p), options);
+            } else {
+              setData(formName, `${name}.${p}`, get(value, p));
+            }
+          });
+        }
+      } else {
+        listener.onChange(value, options);
+      }
     } else {
-      setData(formName, name, value);
+      if (isPlainObject(value) || Array.isArray(value)) {
+        const allStringPath = getAllNoneObjStringPath(value);
+        allStringPath.forEach((p) => {
+          const findListener = getListeners().find((l) => l.name === `${name}.${p}` && l.formName === formName);
+          if (findListener) {
+            findListener.onChange(get(value, p), options);
+          } else {
+            setData(formName, `${name}.${p}`, get(value, p));
+          }
+        });
+      } else {
+        setData(formName, name, value);
+      }
     }
   };
   const setFieldValues = (values, options = { notTriggerDirty: false }) => {
@@ -57,7 +84,24 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
     allStringPath.forEach((p) => {
       const listener = getListeners().find((l) => l.name === p && l.formName === formName);
       if (listener) {
-        listener.onChange(get(values, listener.name), options);
+        if (listener.type === "array") {
+          if (!isEqual(getFormItemValue(formName, p), get(values, p))) {
+            listener.onArrayChange(get(values, listener.name), options);
+            const nestedAllStringPath = getAllNoneObjStringPath(get(values, p));
+            nestedAllStringPath.forEach((np) => {
+              {
+                const findListener = getListeners().find((l) => l.name === `${p}.${np}` && l.formName === formName);
+                if (findListener) {
+                  findListener.onChange(get(values, `${p}.${np}`), options);
+                } else {
+                  setData(formName, `${p}.${np}`, get(values, `${p}.${np}`));
+                }
+              }
+            });
+          }
+        } else {
+          listener.onChange(get(values, listener.name), options);
+        }
       } else {
         setData(formName, p, get(values, p));
       }

package/dist/stores/formStore.d.ts

@@ -1,3 +1,4 @@
+type ListenerFormItemType = "normal" | "array";
 export interface FormInstance {
     formName: string;
     resetFields: (values?: any) => void;
@@ -20,11 +21,13 @@ export interface ListenerItem {
     isDirty?: boolean;
     formItemId?: string;
     internalErrors?: any;
+    onArrayChange?: any;
     onChange?: any;
     onReset?: any;
     onFocus?: any;
     emitFocus?: any;
     isInitied?: boolean;
+    type?: ListenerFormItemType;
 }
 export interface CleanUpItem {
     name?: string;

package/dist/stores/formStore.js

@@ -200,7 +200,7 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
   getListeners() {
     return storeGet().listeners;
   },
-  setListener({ formName, name, onChange, onReset, isTouched, isDirty, formItemId, internalErrors, onFocus, emitFocus, isInitied }) {
+  setListener({ formName, name, onChange, onReset, isTouched, isDirty, formItemId, internalErrors, onFocus, emitFocus, isInitied, type, onArrayChange }) {
     return storeSet(produce((state) => {
       const storeListeners = state.listeners;
       const findListenerIndex = state.listeners.findIndex((l) => l.formItemId === formItemId);
@@ -235,6 +235,9 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
         if (!isNil(isInitied)) {
           storeListeners[findListenerIndex].isInitied = isInitied;
         }
+        if (!isNil(onArrayChange)) {
+          storeListeners[findListenerIndex].onArrayChange = onArrayChange;
+        }
         return;
       }
       if (name && formName) {
@@ -247,7 +250,9 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
           internalErrors,
           onChange,
           onReset,
-          isInitied: Boolean(isInitied)
+          isInitied: Boolean(isInitied),
+          type: type || "normal",
+          onArrayChange
         });
       }
     }));

package/dist/types/index.d.ts

@@ -1 +1 @@
-export * from './public';
+export * from "./public";

package/dist/types/public.d.ts

@@ -1,5 +1,5 @@
-import type { GetConstantType } from "./util";
 import type { SUBMIT_STATE } from "../constants/form";
+import type { GetConstantType } from "./util";
 export type FormValues<T = any> = T;
 export interface FormFieldError {
     ruleName: string | number;

package/dist/utils/obj.util.d.ts

@@ -1,2 +1,2 @@
-export declare function getAllNoneObjStringPath(value: any, prevPath?: string): any;
+export declare function getAllNoneObjStringPath(value: any, prevPath?: string): string[];
 export declare function getAllStringPath(value: any, prevPath?: string): any;

package/dist/utils/obj.util.js

@@ -1,14 +1,25 @@
-import { filter, isNil, join } from "lodash";
+import { filter, isNil, isPlainObject, join } from "lodash";
 function getAllNoneObjStringPath(value, prevPath = "") {
-  if (typeof value === "object") {
-    return Object.keys(value).reduce((prev, cur) => {
+  if (value === null || value === void 0 || typeof value !== "object" || typeof value === "function") {
+    return [prevPath];
+  }
+  if (Array.isArray(value)) {
+    return value.reduce((prev, item, index) => {
       return [
         ...prev,
-        ...getAllNoneObjStringPath(value[cur], join(filter([prevPath, cur], (v) => !isNil(v) && v !== ""), "."))
+        ...getAllNoneObjStringPath(item, join(filter([prevPath, String(index)], (v) => !isNil(v) && v !== ""), "."))
       ];
     }, []);
   }
-  return [prevPath];
+  if (!isPlainObject(value)) {
+    return [prevPath];
+  }
+  return Object.keys(value).reduce((prev, cur) => {
+    return [
+      ...prev,
+      ...getAllNoneObjStringPath(value[cur], join(filter([prevPath, cur], (v) => !isNil(v) && v !== ""), "."))
+    ];
+  }, []);
 }
 function getAllStringPath(value, prevPath = "") {
   if (typeof value === "object") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.8-beta.16",
+  "version": "1.0.8-beta.18",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",

package/src/App.tsx

@@ -47,7 +47,7 @@ const App = () => {
         initialValues={{
           TestData: "",
           numericCode: "",
-          arr: [{ el: "Item 1" }, { el: "Item 2" }],
+          // arr: [{ el: "Item 1" }, { el: "Item 2" }],
         }}
         onFinish={(values) => {
           console.log(values);
@@ -103,7 +103,8 @@ const App = () => {
         <FormList
           initialValues={[
             {
-              el: "",
+              el: "sdfsdf",
+              d: { child: "Test Child" },
             },
           ]}
           name="arr"
@@ -112,7 +113,15 @@ const App = () => {
             <div>
               {fields.map((field, index) => (
                 <div key={field.key} style={{ marginBottom: 8 }}>
-                  <FormItem name={`${field.name}.el`}>
+                  <FormItem name={`${field.name}.el`} initialValue={"Chém gió"}>
+                    <InputWrapper>
+                      <Input placeholder="Item value" style={{ width: 200 }} />
+                    </InputWrapper>
+                  </FormItem>
+                  <FormItem
+                    name={`${field.name}.d.child`}
+                    initialValue={"Con của item"}
+                  >
                     <InputWrapper>
                       <Input placeholder="Item value" style={{ width: 200 }} />
                     </InputWrapper>
@@ -145,6 +154,17 @@ const App = () => {
             </div>
           )}
         </FormList>
+        <Button
+          onClick={() => {
+            form?.setFieldValue("arr", [
+              { el: "Set Item 1" },
+              { el: "Set Item 2" },
+              { el: "Set Item 3" },
+            ]);
+          }}
+        >
+          Test set array list value
+        </Button>
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}

package/src/components/Form/FormList.tsx

@@ -9,7 +9,7 @@ export interface FormListProps<T = any> {
   children: (
     fields: Array<{ name: string; key: string }>,
     operations: {
-      add: (index: number) => void;
+      add: (index?: number) => void;
       remove: (opts: { index?: number; key?: string }) => void;
       move: (opts: { from?: number; fromKey?: string; to: number }) => void;
     },

package/src/hooks/useFormItemControl.ts

@@ -1,4 +1,4 @@
-import { get, isNil } from "lodash";
+import { get, has, isNil } from "lodash";
 import { useTaskEffect } from "minh-custom-hooks-release";
 import { useEffect, useMemo, type RefObject } from "react";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
@@ -595,13 +595,17 @@ export default function useFormItemControl<T = any>({
     // console.log("Get cache Data after list change: ", cacheData);
 
     if (cacheData) {
+      console.log("Cache data found when form item change: ", name, cacheData);
       const getNewDataFromCache = get(cacheData, name);
+      const isIncludeDirectoryInCache = has(cacheData, name);
 
       // console.log("Init data when change form ite: ", name, cacheData);
 
-      if (!getNewDataFromCache) {
-        onChange(initialValue);
-      } else onChange(getNewDataFromCache);
+      if (!isIncludeDirectoryInCache && isNil(getNewDataFromCache)) {
+        onChange(initialValue, {
+          notTriggerDirty: true,
+        });
+      } else onChange(getNewDataFromCache, { notTriggerDirty: true });
     }
   }, [name, formName || form?.formName || contextForm?.formName]);
 

package/src/hooks/useFormListControl.ts

@@ -7,7 +7,7 @@ import { useFormStore } from "../stores/formStore";
 
 import type { FormInstance } from "../stores/formStore";
 
-type ListField = { name: string; key: string };
+type ListField = { name: string; key: string; value?: any };
 
 interface UseFormListControlProps {
   name?: string;
@@ -29,18 +29,25 @@ export default function useFormListControl<T = any>({
   initialValues,
   formName,
 }: UseFormListControlProps): UseFormListControlReturn {
+  const [formItemId] = useState<string>(v4());
   const contextForm = useFormContext();
   const getFormValues = useFormStore((state) => state.getFormValues);
   const [listFormInitValues, setListFormInitValues] = useState<
     any[] | undefined
   >(undefined);
-  const { clearCacheData, setCacheData } = useFormStore(
-    useShallow((state) => ({
-      cacheData: state.cacheData,
-      clearCacheData: state.clearCacheData,
-      setCacheData: state.setCacheData,
-    })),
-  );
+  const { clearCacheData, setCacheData, setListener, getListener } =
+    useFormStore(
+      useShallow((state) => ({
+        // Cache
+        cacheData: state.cacheData,
+        clearCacheData: state.clearCacheData,
+        setCacheData: state.setCacheData,
+
+        // Listener
+        setListener: state.setListener,
+        getListener: state.getListener,
+      })),
+    );
   const { setCleanUpStack } = useFormStore(
     useShallow((state) => ({
       setCleanUpStack: state.setCleanUpStack,
@@ -94,9 +101,20 @@ export default function useFormListControl<T = any>({
       })
       .filter(Boolean);
 
-    const mapCurWithKey = cur.map(
-      (c) => mapPrevWithKey.find((m) => m.key === c.key) || c,
-    );
+    const mapCurWithKey = cur.map((c) => {
+      const find = mapPrevWithKey.find((m) => m.key === c.key);
+
+      if (find) {
+        return {
+          key: find.key,
+          value: isNil(c.value) ? find.value : c.value,
+        };
+      }
+
+      return c;
+    });
+
+    console.log("compare prev cur", { prev, cur });
 
     const getNewValueCache = mapCurWithKey.filter(Boolean).map((c) => c.value);
 
@@ -109,7 +127,7 @@ export default function useFormListControl<T = any>({
     // console.log("Mapping Cur value with prev fields: ", mapCurWithKey);
     // console.log("After change arr value: ", getNewValueCache);
 
-    // Nếu số phần tử trước khi thay đổi mảng lớn hơn thì đẩy 2 phần tử còn lại vào clean up stack để clear
+    // Nếu số phần tử trước khi thay đổi mảng lớn hơn thì đẩy các phần tử còn lại vào clean up stack để clear
     if (startRemoveIndex > 0) {
       Array.from(Array(startRemoveIndex))
         .map((_, index) => {
@@ -129,6 +147,12 @@ export default function useFormListControl<T = any>({
         });
     }
 
+    console.log("Set cache data for form list: ", {
+      formName: formName || form?.formName || contextForm?.formName,
+      name,
+      getNewValueCache,
+    });
+
     // console.log({ getNewValueCache });
     setCacheData(
       formName || form?.formName || contextForm?.formName,
@@ -228,7 +252,7 @@ export default function useFormListControl<T = any>({
     to: number;
   }) => {
     setListFields((prev) => {
-      console.log("move list item: ", { from, to });
+      // console.log("move list item: ", { from, to });
       if (
         from >= listFields.length ||
         from < 0 ||
@@ -237,7 +261,7 @@ export default function useFormListControl<T = any>({
         from === to
       )
         return prev;
-      console.log("Trigger move item: ");
+      // console.log("Trigger move item: ");
 
       if (!isNil(fromKey)) {
         const findItemIndex = prev.findIndex((p) => p.key === fromKey);
@@ -383,5 +407,50 @@ export default function useFormListControl<T = any>({
     };
   }, [listFields]);
 
+  useEffect(() => {
+    if (!getListener(formItemId)) {
+      setListener({
+        formName: formName || form?.formName || contextForm?.formName,
+        name: name || "",
+        formItemId: formItemId,
+        type: "array",
+        onArrayChange: (newArr) => {
+          setListFields((prev) => {
+            const result = newArr.map((_, i) => {
+              const itemName = `${name}.${i}`;
+              const existingItem = prev[i];
+              return {
+                key: existingItem ? existingItem.key : v4(),
+                name: itemName,
+              };
+            });
+
+            handleCacheListField(
+              prev,
+              result.map((r, i) => {
+                return { ...r, value: newArr[i] };
+              }),
+            );
+            return result;
+          });
+        },
+      });
+    }
+    return () => {
+      // Remove listener on unmount
+      if (getListener(formItemId)) {
+        console.log("Remove listener for form list: ", {
+          formItemId,
+        });
+        setListener({
+          formName: formName || form?.formName || contextForm?.formName,
+          name: name || "",
+          formItemId: formItemId,
+          onArrayChange: undefined,
+        });
+      }
+    };
+  }, []);
+
   return { listFields, move, add, remove };
 }

package/src/index.ts

@@ -1,28 +1,30 @@
+import { SUBMIT_STATE } from "./constants/form";
 import Form, {
   useForm,
-  useWatch,
-  useSubmitDataWatch,
   useFormStateWatch,
-  type FormProps,
-  type ValidationRule,
+  useSubmitDataWatch,
+  useWatch,
   type FormFieldError,
+  type FormProps,
   type SubmitState,
   type UseFormItemStateWatchReturn,
+  type ValidationRule,
 } from "./providers/Form";
-import { SUBMIT_STATE } from "./constants/form";
 
 import FormItem, { type FormItemProps } from "./components/Form/FormItem";
 import FormList, { type FormListProps } from "./components/Form/FormList";
+import InputWrapper, {
+  type InputWrapperProps,
+} from "./components/Form/InputWrapper";
 import Input from "./components/Input";
-import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
 
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
 import {
   useFormStore,
+  type CleanUpItem,
   type FormInstance,
   type ListenerItem,
-  type CleanUpItem,
 } from "./stores/formStore";
 
 export {
@@ -31,25 +33,25 @@ export {
   FormList,
   Input,
   InputWrapper,
+  SUBMIT_STATE,
+  useForm,
   useFormItemControl,
   useFormListControl,
-  useForm,
-  useWatch,
-  useSubmitDataWatch,
   useFormStateWatch,
   useFormStore,
-  type FormProps,
+  useSubmitDataWatch,
+  useWatch,
+  type CleanUpItem,
+  type FormFieldError,
+  type FormInstance,
   type FormItemProps,
   type FormListProps,
+  type FormProps,
   type InputWrapperProps,
-  type ValidationRule,
-  type FormFieldError,
+  type ListenerItem,
   type SubmitState,
   type UseFormItemStateWatchReturn,
-  type FormInstance,
-  type ListenerItem,
-  type CleanUpItem,
-  SUBMIT_STATE,
+  type ValidationRule,
 };
 
 export default Form;

package/src/providers/Form.tsx

@@ -1,4 +1,13 @@
-import { cloneDeep, get, isEqual, isNil, last, set, uniqBy } from "lodash";
+import {
+  cloneDeep,
+  get,
+  isEqual,
+  isNil,
+  isPlainObject,
+  last,
+  set,
+  uniqBy,
+} from "lodash";
 import { useTask } from "minh-custom-hooks-release";
 import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
 import { createContext, useContext, useEffect, useState } from "react";
@@ -6,7 +15,7 @@ import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import FormCleanUp from "../components/Form/FormCleanUp";
 import { SUBMIT_STATE } from "../constants/form";
-import { useFormStore } from "../stores/formStore";
+import { ListenerItem, useFormStore } from "../stores/formStore";
 import type {
   PublicFormInstance,
   UseFormItemStateWatchReturn,
@@ -90,13 +99,51 @@ export default function Form<T = any>({
   );
 
   const setFieldValue = (name, value, options) => {
-    const listener = getListeners().find(
+    const listener: ListenerItem | null = getListeners().find(
       (l) => l.name === name && l.formName === formName,
     );
     if (listener) {
-      listener.onChange(value, options);
+      // Nếu loại listener là array thì gọi onArrayChange
+      if (listener.type === "array") {
+        // Do nothing if the value is the same for array item to prevent unnecessary re-renders
+        if (!isEqual(getFormItemValue(formName, name), value)) {
+          listener.onArrayChange(value, options);
+
+          // Kiểm tra từng path con của array item xem có listener nào không, nếu có thì gọi onChange của listener đó
+          const allStringPath = getAllNoneObjStringPath(value);
+          allStringPath.forEach((p) => {
+            const findListener = getListeners().find(
+              (l) => l.name === `${name}.${p}` && l.formName === formName,
+            );
+            if (findListener) {
+              findListener.onChange(get(value, p), options);
+            } else {
+              setData(formName, `${name}.${p}`, get(value, p));
+            }
+          });
+        }
+      } else {
+        listener.onChange(value, options);
+      }
     } else {
-      setData(formName, name, value);
+      // set data for non-listener field
+      if (isPlainObject(value) || Array.isArray(value)) {
+        // Nếu là object hoặc array thì set từng path con
+        const allStringPath = getAllNoneObjStringPath(value);
+
+        allStringPath.forEach((p) => {
+          const findListener = getListeners().find(
+            (l) => l.name === `${name}.${p}` && l.formName === formName,
+          );
+          if (findListener) {
+            findListener.onChange(get(value, p), options);
+          } else {
+            setData(formName, `${name}.${p}`, get(value, p));
+          }
+        });
+      } else {
+        setData(formName, name, value);
+      }
     }
   };
 
@@ -108,7 +155,31 @@ export default function Form<T = any>({
         (l) => l.name === p && l.formName === formName,
       );
       if (listener) {
-        listener.onChange(get(values, listener.name), options);
+        if (listener.type === "array") {
+          // Do nothing if the value is the same for array item to prevent unnecessary re-renders
+          if (!isEqual(getFormItemValue(formName, p), get(values, p))) {
+            listener.onArrayChange(get(values, listener.name), options);
+
+            // Kiểm tra từng path con của array item xem có listener nào không, nếu có thì gọi onChange của listener đó
+            const nestedAllStringPath: string[] = getAllNoneObjStringPath(
+              get(values, p),
+            );
+            nestedAllStringPath.forEach((np) => {
+              {
+                const findListener = getListeners().find(
+                  (l) => l.name === `${p}.${np}` && l.formName === formName,
+                );
+                if (findListener) {
+                  findListener.onChange(get(values, `${p}.${np}`), options);
+                } else {
+                  setData(formName, `${p}.${np}`, get(values, `${p}.${np}`));
+                }
+              }
+            });
+          }
+        } else {
+          listener.onChange(get(values, listener.name), options);
+        }
       } else {
         setData(formName, p, get(values, p));
       }

package/src/stores/formStore.ts

@@ -3,7 +3,7 @@ import { cloneDeep, get, isNil, isNumber, last, set, unset } from "lodash";
 import { v4 } from "uuid";
 import { create } from "zustand";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
-
+type ListenerFormItemType = "normal" | "array";
 export interface FormInstance {
   formName: string;
   resetFields: (values?: any) => void;
@@ -24,11 +24,13 @@ export interface ListenerItem {
   isDirty?: boolean;
   formItemId?: string;
   internalErrors?: any;
+  onArrayChange?: any;
   onChange?: any;
   onReset?: any;
   onFocus?: any;
   emitFocus?: any;
   isInitied?: boolean;
+  type?: ListenerFormItemType;
 }
 
 export interface CleanUpItem {
@@ -379,7 +381,9 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
     onFocus,
     emitFocus,
     isInitied,
-  }) {
+    type,
+    onArrayChange,
+  }: Partial<ListenerItem> & { formItemId: string }) {
     return storeSet(
       produce<any>((state: any) => {
         const storeListeners = state.listeners;
@@ -420,6 +424,10 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
             storeListeners[findListenerIndex].isInitied = isInitied;
           }
 
+          if (!isNil(onArrayChange)) {
+            storeListeners[findListenerIndex].onArrayChange = onArrayChange;
+          }
+
           return;
         }
         if (name && formName) {
@@ -433,6 +441,8 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
             onChange,
             onReset,
             isInitied: Boolean(isInitied),
+            type: type || "normal",
+            onArrayChange,
           });
         }
       }),

package/src/types/index.ts

@@ -1 +1 @@
-export * from './public';
+export * from "./public";

package/src/types/public.ts

@@ -1,5 +1,5 @@
-import type { GetConstantType } from "./util";
 import type { SUBMIT_STATE } from "../constants/form";
+import type { GetConstantType } from "./util";
 
 export type FormValues<T = any> = T;
 

package/src/utils/obj.util.ts

@@ -1,22 +1,53 @@
-import { filter, isNil, join } from "lodash";
+import { filter, isNil, isPlainObject, join } from "lodash";
 
-export function getAllNoneObjStringPath(value: any, prevPath: string = "") {
-  if (typeof value === "object") {
-    return Object.keys(value).reduce((prev, cur) => {
+export function getAllNoneObjStringPath(
+  value: any,
+  prevPath: string = "",
+): string[] {
+  // primitive / function / null / undefined => dừng
+  if (
+    value === null ||
+    value === undefined ||
+    typeof value !== "object" ||
+    typeof value === "function"
+  ) {
+    return [prevPath];
+  }
+
+  // array thì đi sâu
+  if (Array.isArray(value)) {
+    return value.reduce((prev: string[], item, index) => {
       return [
         ...prev,
-
         ...getAllNoneObjStringPath(
-          value[cur],
+          item,
           join(
-            filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
-            "."
-          )
+            filter([prevPath, String(index)], (v) => !isNil(v) && v !== ""),
+            ".",
+          ),
         ),
       ];
     }, []);
   }
-  return [prevPath];
+
+  // class instance (non-plain object) => dừng
+  if (!isPlainObject(value)) {
+    return [prevPath];
+  }
+
+  // plain object => đi sâu
+  return Object.keys(value).reduce((prev: string[], cur) => {
+    return [
+      ...prev,
+      ...getAllNoneObjStringPath(
+        value[cur],
+        join(
+          filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
+          ".",
+        ),
+      ),
+    ];
+  }, []);
 }
 
 export function getAllStringPath(value: any, prevPath: string = "") {
@@ -26,14 +57,14 @@ export function getAllStringPath(value: any, prevPath: string = "") {
         ...prev,
         join(
           filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
-          "."
+          ".",
         ),
         ...getAllStringPath(
           value[cur],
           join(
             filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
-            "."
-          )
+            ".",
+          ),
         ),
       ];
     }, []);