@formisch/react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as v from "valibot";
-import { useEffect, useLayoutEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region ../../packages/core/dist/index.vanilla.js
@@ -868,11 +868,24 @@ function validate(form, config) {
 * Hook to enable reactive signals within a React component.
 */
 function useSignals() {
-	const [, setTick] = useState({});
-	const listener$1 = useMemo(() => [() => setTick({}), /* @__PURE__ */ new Set()], []);
-	for (const subscriber of listener$1[1]) subscriber.delete(listener$1);
+	const [, forceUpdate] = useReducer((x) => x + 1, 0);
+	const listener$1 = useMemo(() => [forceUpdate, /* @__PURE__ */ new Set()], []);
+	const cleanSubscribers = useCallback(() => {
+		for (const subscriber of listener$1[1]) subscriber.delete(listener$1);
+	}, [listener$1]);
+	cleanSubscribers();
 	setListener(listener$1);
 	useLayoutEffect(() => setListener(void 0));
+	const timeout = useRef(null);
+	useEffect(() => {
+		if (timeout.current) {
+			clearTimeout(timeout.current);
+			timeout.current = null;
+		}
+		return () => {
+			timeout.current = setTimeout(cleanSubscribers);
+		};
+	}, [cleanSubscribers]);
 }
 
 //#endregion
@@ -887,7 +900,7 @@ function useField(form, config) {
 			internalFieldStore.elements = internalFieldStore.elements.filter((element) => element.isConnected);
 		};
 	}, [internalFieldStore]);
-	return {
+	return useMemo(() => ({
 		path: config.path,
 		get input() {
 			return getFieldInput(internalFieldStore);
@@ -923,7 +936,7 @@ function useField(form, config) {
 				validateIfRequired(internalFormStore, internalFieldStore, "blur");
 			}
 		}
-	};
+	}), [internalFormStore, internalFieldStore]);
 }
 
 //#endregion
@@ -933,7 +946,7 @@ function useFieldArray(form, config) {
 	useSignals();
 	const internalFormStore = form[INTERNAL];
 	const internalFieldStore = getFieldStore(internalFormStore, config.path);
-	return {
+	return useMemo(() => ({
 		path: config.path,
 		get items() {
 			return internalFieldStore.items.value;
@@ -950,7 +963,7 @@ function useFieldArray(form, config) {
 		get isValid() {
 			return !getFieldBool(internalFieldStore, "errors");
 		}
-	};
+	}), [internalFormStore, internalFieldStore]);
 }
 
 //#endregion
@@ -962,7 +975,7 @@ function useForm(config) {
 	useLayoutEffect(() => {
 		if (config.validate === "initial") validateFormInput(internalFormStore);
 	}, []);
-	return {
+	return useMemo(() => ({
 		[INTERNAL]: internalFormStore,
 		get isSubmitting() {
 			return internalFormStore.isSubmitting.value;
@@ -985,7 +998,7 @@ function useForm(config) {
 		get errors() {
 			return internalFormStore.errors.value;
 		}
-	};
+	}), [internalFormStore]);
 }
 
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/react",
   "description": "The modular and type-safe form library for React",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",