react-form-manage 1.0.8-beta.24 → 1.0.8-beta.26

package/CHANGELOG.md

@@ -2,18 +2,27 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8-beta.25] - 2026-02-04
+
+### Changes
+
+- Remove cleanup stack execution for clearing form items and array values
+
 ## [1.0.8-beta.24] - 2026-02-04
 
 ### Fixes
+
 - Fix cleanup item execution for proper FormItem unmounting
 
 ### Features
+
 - Add `Component` prop to FormItem for wrapping input with custom elements
 - Support custom wrapper components in FormItem
 
 ## [1.0.8-beta.23] - 2026-02-04
 
 ### Features
+
 - Add `hidden` prop to FormItem for conditional visibility control
 - Add `collectHiddenValue` option to control whether hidden form items contribute to form data collection
 - FormItem can now be retrieved from Form instance
@@ -22,26 +31,31 @@ All notable changes to this project will be documented in this file.
 ## [1.0.8-beta.22] - 2026-02-02
 
 ### Changes
+
 - Refactor: Adjust useFormItemControl and main.tsx for better performance
 
 ## [1.0.8-beta.21] - 2026-02-02
 
 ### Fixes
+
 - Patch: Minor adjustments in useFormItemControl
 
 ## [1.0.8-beta.20] - 2026-02-02
 
 ### Features
+
 - Trigger `initied` flag for onChange in `useFormItemControl` to properly mark form items as initialized
 
 ## [1.0.8-beta.19] - 2026-02-02
 
 ### Features
+
 - Trigger `initied` flag for onChange in `useFormItemControl` to properly mark form items as initialized
 
 ## [1.0.8-beta.18] - 2026-02-01
 
 ### Features
+
 - Avoid deep traversal into class instances/functions in path collection
 - `getAllNoneObjStringPath` now skips non-plain objects and functions, only traverses arrays and plain objects
 - Improves performance and prevents accidental property access on class instances

package/dist/hooks/useFormListControl.js

@@ -9,17 +9,16 @@ function useFormListControl({ name, form, initialValues, formName }) {
   const contextForm = useFormContext();
   const getFormValues = useFormStore((state) => state.getFormValues);
   const [listFormInitValues, setListFormInitValues] = useState(void 0);
-  const { clearCacheData, setCacheData, setListener, getListener } = useFormStore(useShallow((state) => ({
+  const { clearCacheData, setCacheData, setListener, getListener, clearArrItems } = 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
+    getListener: state.getListener,
+    // Clear Arr Items
+    clearArrItems: state.clearArrItems
   })));
   const { initValue: internalInitValue, formState } = useFormStore(useShallow((state) => {
     return {
@@ -55,15 +54,14 @@ function useFormListControl({ name, form, initialValues, formName }) {
     const getNewValueCache = mapCurWithKey.filter(Boolean).map((c) => c.value);
     const startRemoveIndex = formDataBeforeChange.length - getNewValueCache.length;
     if (startRemoveIndex > 0) {
-      Array.from(Array(startRemoveIndex)).map((_, index) => {
-        return getNewValueCache.length + index;
-      }).forEach((index) => {
-        setCleanUpStack({
+      const clearItems = Array.from(Array(startRemoveIndex)).map((_, index) => {
+        const clearIndex = getNewValueCache.length + index;
+        return {
           formName: formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName),
-          name: `${name}.${index}`,
-          type: "array"
-        });
+          name: `${name}.${clearIndex}`
+        };
       });
+      clearArrItems(clearItems);
     }
     setCacheData(formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName), name, getNewValueCache);
   };

package/dist/providers/Form.js

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cloneDeep, filter, 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";
 import { useShallow } from "zustand/react/shallow";
-import FormCleanUp from "../components/Form/FormCleanUp";
 import FormItem from "../components/Form/FormItem";
 import { SUBMIT_STATE } from "../constants/form";
 import { useFormStore } from "../stores/formStore";
@@ -300,9 +299,9 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
       clearFormState(formName);
     };
   }, []);
-  return _jsxs(FormContext.Provider, { value: {
+  return _jsx(FormContext.Provider, { value: {
     formName
-  }, children: [_jsx(FormCleanUp, {}), FormElement ? _jsx(FormElement, { onSubmit: (e) => {
+  }, children: FormElement ? _jsx(FormElement, { onSubmit: (e) => {
     e.preventDefault();
     e.stopPropagation();
     runSubmit(void 0);
@@ -310,7 +309,7 @@ function Form({ children, formName, initialValues, onFinish, onReject, onFinally
     e.preventDefault();
     e.stopPropagation();
     runSubmit(void 0);
-  }, ...props, children })] });
+  }, ...props, children }) });
 }
 function useFormContext() {
   const c = useContext(FormContext);

package/dist/stores/formStore.js

@@ -72,6 +72,19 @@ const createFormStoreSlice = (storeSet, storeGet, api) => ({
       }
     }));
   },
+  clearArrItems(clearItems) {
+    return storeSet(produce((state) => {
+      const oldValues = state.forms;
+      clearItems.forEach(({ formName, name }) => {
+        const arrPath = name.split(".").slice(0, -1).join(".");
+        const elPath = Number(name.split(".").slice(-1).join(""));
+        const getArrItem = get(oldValues, `${formName}.${arrPath}`);
+        if (isNumber(elPath)) {
+          getArrItem.splice(elPath, 1);
+        }
+      });
+    }));
+  },
   setFormState({ formName, isInitied, submitState }) {
     return storeSet(produce((state) => {
       const oldValues = state.formStates;

package/package.json

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

package/src/hooks/useFormListControl.ts

@@ -35,24 +35,28 @@ export default function useFormListControl<T = any>({
   const [listFormInitValues, setListFormInitValues] = useState<
     any[] | undefined
   >(undefined);
-  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(
+  const {
+    clearCacheData,
+    setCacheData,
+    setListener,
+    getListener,
+    clearArrItems,
+  } = useFormStore(
     useShallow((state) => ({
-      setCleanUpStack: state.setCleanUpStack,
+      // Cache
+      cacheData: state.cacheData,
+      clearCacheData: state.clearCacheData,
+      setCacheData: state.setCacheData,
+
+      // Listener
+      setListener: state.setListener,
+      getListener: state.getListener,
+
+      // Clear Arr Items
+      clearArrItems: state.clearArrItems,
     })),
   );
+
   const { initValue: internalInitValue, formState } = useFormStore(
     useShallow((state) => {
       // console.log(
@@ -129,22 +133,15 @@ export default function useFormListControl<T = any>({
 
     // 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) => {
-          return getNewValueCache.length + index;
-        })
-        .forEach((index) => {
-          // console.log("Data for cleanup arr element: ", {
-          //   formName: formName || form?.formName || contextForm?.formName,
-          //   name: `${name}.${index}`,
-          //   type: "array",
-          // });
-          setCleanUpStack({
-            formName: formName || form?.formName || contextForm?.formName,
-            name: `${name}.${index}`,
-            type: "array",
-          });
-        });
+      const clearItems = Array.from(Array(startRemoveIndex)).map((_, index) => {
+        const clearIndex = getNewValueCache.length + index;
+
+        return {
+          formName: formName || form?.formName || contextForm?.formName,
+          name: `${name}.${clearIndex}`,
+        };
+      });
+      clearArrItems(clearItems);
     }
 
     console.log("Set cache data for form list: ", {

package/src/providers/Form.tsx

@@ -14,7 +14,6 @@ import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
 import { createContext, useContext, useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
-import FormCleanUp from "../components/Form/FormCleanUp";
 import FormItem from "../components/Form/FormItem";
 import { SUBMIT_STATE } from "../constants/form";
 import { ListenerItem, SubmitProps, useFormStore } from "../stores/formStore";
@@ -467,8 +466,6 @@ export default function Form<T = any>({
         formName,
       }}
     >
-      <FormCleanUp />
-
       {FormElement ? (
         <FormElement
           onSubmit={(e) => {

package/src/stores/formStore.ts

@@ -185,6 +185,30 @@ const createFormStoreSlice = (storeSet: any, storeGet: any, api: any) => ({
     );
   },
 
+  clearArrItems(clearItems: { formName: string; name: string }[]) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
+
+        console.log("Clear item array values: ", clearItems);
+
+        clearItems.forEach(({ formName, name }) => {
+          const arrPath = name.split(".").slice(0, -1).join(".");
+
+          const elPath = Number(name.split(".").slice(-1).join(""));
+
+          const getArrItem = get(oldValues, `${formName}.${arrPath}`);
+
+          if (isNumber(elPath)) {
+            getArrItem.splice(elPath, 1);
+          }
+        });
+
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
+
   setFormState({ formName, isInitied, submitState }) {
     return storeSet(
       produce<any>((state: any) => {