juststore 0.4.0 → 0.4.1

package/dist/form.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 import { pascalCase } from 'change-case';
-import { useId } from 'react';
+import { useEffect, useId, useMemo } from 'react';
 import { getSnapshot, produce } from './impl';
 import { createNode } from './node';
 import { createStoreRoot } from './root';
@@ -36,7 +36,7 @@ function useForm(defaultValue, fieldConfigs = {}) {
     const errorNamespace = `errors.${namespace}`;
     const storeApi = createStoreRoot(namespace, defaultValue, { memoryOnly: true });
     const errorStore = createStoreRoot(errorNamespace, {}, { memoryOnly: true });
-    const formStore = {
+    const formStore = useMemo(() => ({
         clearErrors: () => produce(errorNamespace, undefined, false, true),
         handleSubmit: (onSubmit) => (e) => {
             e.preventDefault();
@@ -45,8 +45,8 @@ function useForm(defaultValue, fieldConfigs = {}) {
                 onSubmit(getSnapshot(namespace));
             }
         }
-    };
-    const store = new Proxy(storeApi, {
+    }), [namespace, errorNamespace]);
+    const store = useMemo(() => new Proxy(storeApi, {
         get(_target, prop) {
             if (prop in formStore) {
                 return formStore[prop];
@@ -59,22 +59,34 @@ function useForm(defaultValue, fieldConfigs = {}) {
             }
             return undefined;
         }
-    });
-    for (const entry of Object.entries(fieldConfigs)) {
-        const [path, config] = entry;
-        const validator = getValidator(path, config?.validate);
-        if (validator) {
-            storeApi.subscribe(path, (value) => {
-                const error = validator(value, store);
-                if (!error) {
-                    errorStore.reset(path);
-                }
-                else {
-                    errorStore.set(path, error);
-                }
-            });
+    }), [storeApi, formStore, errorStore]);
+    const unsubscribeFns = useMemo(() => {
+        const unsubscribeFns = [];
+        for (const entry of Object.entries(fieldConfigs)) {
+            const [path, config] = entry;
+            const validator = getValidator(path, config?.validate);
+            if (validator) {
+                const unsubscribe = storeApi.subscribe(path, (value) => {
+                    const error = validator(value, store);
+                    if (!error) {
+                        errorStore.reset(path);
+                    }
+                    else {
+                        errorStore.set(path, error);
+                    }
+                });
+                unsubscribeFns.push(unsubscribe);
+            }
         }
-    }
+        return unsubscribeFns;
+    }, [fieldConfigs, storeApi, errorStore, store]);
+    useEffect(() => {
+        return () => {
+            for (const unsubscribe of unsubscribeFns) {
+                unsubscribe();
+            }
+        };
+    }, [unsubscribeFns]);
     return store;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juststore",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A small, expressive, and type-safe state management library for React.",
   "type": "module",
   "main": "dist/index.js",