@formisch/react 0.1.0 → 0.2.1

package/README.md

@@ -9,7 +9,7 @@ Formisch is also available for [Preact][formisch-preact], [Qwik][formisch-qwik],
 - Small bundle size starting at 2.5 kB
 - Schema-based validation with Valibot
 - Type safety with autocompletion in editor
-- It's fast – DOM updates are fine-grained
+- It's fast – re-renders only if necessary
 - Minimal, readable and well thought out API
 - Supports all native HTML form fields
 

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
@@ -480,8 +480,8 @@ function setFieldInput(internalFormStore, path, input) {
 			for (let index = 0; index < path.length; index++) {
 				internalFieldStore = internalFieldStore.children[path[index]];
 				if (index < path.length - 1) internalFieldStore.input.value = true;
-				else setNestedInput(internalFieldStore, input);
 			}
+			setNestedInput(internalFieldStore, input);
 		});
 	});
 }
@@ -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.1",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -48,8 +48,8 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
-    "@formisch/core": "0.4.3",
-    "@formisch/methods": "0.5.1"
+    "@formisch/methods": "0.5.2",
+    "@formisch/core": "0.4.4"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",