@ipxjs/refract 0.14.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipxjs/refract",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "A minimal React-like virtual DOM library with an optional React compat layer",
   "type": "module",
   "main": "src/refract/index.ts",

package/src/refract/dom.ts

@@ -164,6 +164,14 @@ export function applyProps(
             el.removeEventListener(event, getEventListener(oldProps[key]));
           }
           el.addEventListener(event, getEventListener(newProps[key]));
+        } else if (
+          !isSvgElement &&
+          (key === "value" || key === "checked") &&
+          (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT")
+        ) {
+          // Use DOM property for form element values (like React does), so that
+          // controlled inputs update their displayed value correctly.
+          (el as any)[key] = newProps[key] ?? (key === "checked" ? false : "");
         } else {
           const value = newProps[key];
           const attr = normalizeAttributeName(key, isSvgElement);

package/src/refract/features/hooks.ts

@@ -37,6 +37,16 @@ export function useState<T>(initial: T | (() => T)): [T, (value: T | ((prev: T)
   if (!hook._setter) {
     hook._setter = (value: T | ((prev: T) => T)) => {
       if (!hook._fiber) return;
+      // Bail out for same-value direct updates with no pending queue (matches React behavior).
+      // This prevents infinite loops when setState(sameValue) is called in effects —
+      // e.g. MUI FormControl/InputBase calling setAdornedStart(false) repeatedly.
+      if (
+        typeof value !== "function" &&
+        Object.is(value, hook.state) &&
+        (!hook.queue || (hook.queue as unknown[]).length === 0)
+      ) {
+        return;
+      }
       const action = typeof value === "function"
         ? value as (prev: T) => T
         : () => value;