@ipxjs/refract 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipxjs/refract",
-  "version": "0.7.0",
+  "version": "0.9.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/coreRenderer.ts

@@ -52,6 +52,7 @@ export function renderFiber(vnode: VNode, container: Node): void {
   isRendering = false;
   const committedDeletions = deletions.slice();
   commitRoot(rootFiber);
+  clearAlternates(rootFiber);
   runAfterCommitHandlers();
   roots.set(container, rootFiber);
   runCommitHandlers(rootFiber, committedDeletions);
@@ -309,6 +310,17 @@ function setRef(ref: unknown, value: Node | null): void {
   }
 }
 
+/** Release alternate references after commit to prevent memory leaks.
+ *  Alternates are only needed during reconciliation; retaining them
+ *  creates an ever-growing chain of old fiber trees. */
+function clearAlternates(fiber: Fiber | null): void {
+  while (fiber) {
+    fiber.alternate = null;
+    if (fiber.child) clearAlternates(fiber.child);
+    fiber = fiber.sibling;
+  }
+}
+
 function commitDeletion(fiber: Fiber): void {
   runCleanups(fiber);
   // Clear ref on unmount
@@ -406,6 +418,7 @@ function flushRenders(): void {
       isRendering = false;
       const committedDeletions = deletions.slice();
       commitRoot(newRoot);
+      clearAlternates(newRoot);
       runAfterCommitHandlers();
       roots.set(container, newRoot);
       runCommitHandlers(newRoot, committedDeletions);

package/src/refract/features/hooks.ts

@@ -75,8 +75,10 @@ export function useEffect(effect: () => EffectCleanup, deps?: unknown[]): void {
       hook.state.deps = deps;
       hook.state.pending = true;
       markPendingEffects(fiber);
-    } else {
-      hook.state.pending = false;
+    } else if (hook.state.pending) {
+      // Re-render before effect was flushed — keep it pending and
+      // re-register the fiber so the deferred flush still finds it.
+      markPendingEffects(fiber);
     }
   }
 }
@@ -94,8 +96,8 @@ export function useLayoutEffect(effect: () => EffectCleanup, deps?: unknown[]):
       hook.state.deps = deps;
       hook.state.pending = true;
       markPendingLayoutEffects(fiber);
-    } else {
-      hook.state.pending = false;
+    } else if (hook.state.pending) {
+      markPendingLayoutEffects(fiber);
     }
   }
 }
@@ -113,8 +115,8 @@ export function useInsertionEffect(effect: () => EffectCleanup, deps?: unknown[]
       hook.state.deps = deps;
       hook.state.pending = true;
       markPendingInsertionEffects(fiber);
-    } else {
-      hook.state.pending = false;
+    } else if (hook.state.pending) {
+      markPendingInsertionEffects(fiber);
     }
   }
 }

package/src/refract/hooksRuntime.ts

@@ -33,14 +33,16 @@ function cleanupFiberEffects(fiber: Fiber): void {
   if (!fiber.hooks) return;
 
   for (const hook of fiber.hooks) {
-    const state = hook.state as { cleanup?: () => void; pending?: boolean } | undefined;
-    if (state?.cleanup) {
-      state.cleanup();
-      state.cleanup = undefined;
+    const state = hook.state;
+    if (!state || typeof state !== "object") continue;
+    const effectState = state as { cleanup?: () => void; pending?: boolean };
+    if (effectState.cleanup) {
+      effectState.cleanup();
+      effectState.cleanup = undefined;
     }
     // Prevent deferred passive effects from running on unmounted fibers
-    if (state && "pending" in state) {
-      state.pending = false;
+    if ("pending" in effectState) {
+      effectState.pending = false;
     }
   }
 }