@ipxjs/refract 0.11.0 → 0.13.0

package/README.md

@@ -1,6 +1,8 @@
 ![](assets/lens-syntax-refract.svg "=x200")
 
-# Refract
+[Info](https://refract.ipx.dev) | [Docs](https://refract.ipx.dev/docs)
+
+# Refract 
 
 A minimal React-like virtual DOM library, written in TypeScript with split entrypoints
 so you can keep bundles small and targeted.
@@ -94,9 +96,13 @@ Supported compat APIs include:
 - `forwardRef`, `cloneElement`, `Children`, `isValidElement`
 - `useLayoutEffect`, `useInsertionEffect`, `useId`
 - `useSyncExternalStore`, `useImperativeHandle`
+- `use` — suspends on Promise (with a `promiseCache` WeakMap) or reads a context object
+- `Suspense` — renders a fallback subtree while a child suspends
 - `createPortal`
 - `createRoot`, `flushSync`, `unstable_batchedUpdates`
+- `findDOMNode` stub (returns `null`; prevents crashes from libraries like `react-transition-group` v4)
 - `jsx/jsxs/jsxDEV` runtime entrypoints
+- `$$typeof` stamped on every VNode (`Symbol.for("react.element")`) so `react-is` helpers work
 - React hook dispatcher bridge internals (`__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`) with optional `registerExternalReactModule(...)` for mixed-runtime environments (tests/Node)
 
 Example Vite aliases:
@@ -121,10 +127,10 @@ export default defineConfig({
 The compat layer is intentionally separate from core so users who do not need
 React ecosystem compatibility keep the smallest and fastest Refract bundles.
 
-Compatibility status (last verified February 17, 2026):
-- `yarn test`: 14 files passed, 85 tests passed
+Compatibility status (last verified February 22, 2026):
+- `yarn test`: 14 files passed, 91 tests passed
 - Compat-focused suites passed: `tests/compat.test.ts` (10), `tests/poc-compat.test.ts` (2), `tests/react-router-smoke.test.ts` (3)
-- Verified behaviors include `forwardRef`, portals, `createRoot`, JSX runtimes, `useSyncExternalStore`, `flushSync`, and react-router tree construction/dispatcher bridging
+- Verified behaviors include `forwardRef`, portals, `createRoot`, JSX runtimes, `useSyncExternalStore`, `flushSync`, react-router tree construction/dispatcher bridging, `React.use` (Promise + context), and Suspense boundary fallback rendering
 
 ## API
 
@@ -318,6 +324,7 @@ How Refract compares to React and Preact:
 | useId                          | Yes     | Yes   | Yes    |
 | useSyncExternalStore           | Yes     | Yes   | Yes    |
 | useImperativeHandle            | Yes     | Yes   | Yes    |
+| use                            | Yes⁶    | Yes   | No     |
 | useTransition / useDeferredValue | Partial⁵ | Yes | Partial⁷ |
 | **State & Data Flow**          |         |       |        |
 | Built-in state management      | Yes     | Yes   | Yes    |
@@ -330,7 +337,7 @@ How Refract compares to React and Preact:
 | className prop                 | Yes     | Yes   | Yes¹   |
 | dangerouslySetInnerHTML        | Yes     | Yes   | Yes    |
 | Portals                        | Yes     | Yes   | Yes    |
-| Suspense / lazy                | No⁸     | Yes   | Yes²   |
+| Suspense / lazy                | Partial⁸ | Yes  | Yes²   |
 | Error boundaries               | Yes³    | Yes   | Yes    |
 | Server-side rendering          | No      | Yes   | Yes    |
 | Hydration                      | No⁹     | Yes   | Yes    |
@@ -354,7 +361,7 @@ How Refract compares to React and Preact:
 ⁵ Refract exposes `useTransition` / `useDeferredValue` but currently runs both synchronously (no concurrent scheduling).
 ⁶ Available via opt-in compat entrypoints (`refract/compat/react*`) with partial React API parity.
 ⁷ Preact compatibility is provided through `preact/compat`.
-⁸ Compat exports `Suspense`/`lazy`, but full suspension/fallback semantics are not implemented.
+⁸ Compat `Suspense` renders a fallback while a child suspends (via `React.use` + `useState` boundary). `lazy` is exported but code-splitting semantics are limited.
 ⁹ `hydrateRoot` is exposed in compat, but currently performs client render rather than true SSR hydration.
 ¹⁰ `memo` is supported; `PureComponent` is compat-oriented and does not guarantee full React shallow-compare behavior.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipxjs/refract",
-  "version": "0.11.0",
+  "version": "0.13.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/compat/react-dom.ts

@@ -16,6 +16,14 @@ export function unstable_batchedUpdates<T>(callback: () => T): T {
   return callback();
 }
 
+// findDOMNode was removed in React 19. react-transition-group v4 calls it
+// when no nodeRef prop is provided. Returning null avoids a hard crash; any
+// guarded usage (if node) degrades gracefully while unguarded usage (e.g.
+// CSSTransition without nodeRef) will silently skip the animation.
+export function findDOMNode(_instance: unknown): Element | null {
+  return null;
+}
+
 export function flushSync<T>(callback: () => T): T {
   const result = callback();
   flushPendingRenders();
@@ -34,6 +42,7 @@ export function unmountComponentAtNode(container: HTMLElement): boolean {
 
 const ReactDomCompat = {
   createPortal,
+  findDOMNode,
   flushSync,
   render: renderCompat,
   unstable_batchedUpdates,

package/src/refract/compat/react-jsx-runtime.ts

@@ -2,6 +2,8 @@ import { createElement, Fragment } from "../createElement.js";
 import type { VNode, VNodeType } from "../types.js";
 import { resolveCompatType, getWrappedHandler } from "./react.js";
 
+const REACT_ELEMENT_TYPE = Symbol.for("react.element");
+
 type JsxProps = Record<string, unknown> | null | undefined;
 type JsxChild = VNode | string | number | boolean | null | undefined | JsxChild[];
 
@@ -45,6 +47,7 @@ function createJsxElement(type: VNodeType, rawProps: JsxProps, key?: string): Re
   } else {
     vnode = createElement(effectiveType as VNodeType, props, children as JsxChild);
   }
+  (vnode as any).$$typeof = REACT_ELEMENT_TYPE;
   return normalizeVNodeChildren(vnode);
 }
 

package/src/refract/compat/react.ts

@@ -1,10 +1,11 @@
-import { createElement as createElementImpl, Fragment } from "../createElement.js";
+import { createElement as createElementImpl, Fragment as InternalFragment } from "../createElement.js";
 import { memo } from "../memo.js";
 import { createContext as createContextImpl, setContextValue } from "../features/context.js";
 import {
   createRef,
   useErrorBoundary,
 } from "../features/hooks.js";
+import { currentFiber } from "../coreRenderer.js";
 import type { Component as RefractComponent, Props, VNode } from "../types.js";
 import {
   __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
@@ -41,6 +42,9 @@ export function forwardRef<T, P extends Record<string, unknown> = Record<string,
     return render(rest as unknown as P, ref ?? null);
   };
   (ForwardRefComponent as any).displayName = `ForwardRef(${(render as any).name || 'anonymous'})`;
+  // Stamp $$typeof so react-is.isForwardRef(element) works when this component
+  // is used as the VNode type.
+  (ForwardRefComponent as any).$$typeof = REACT_FORWARD_REF_TYPE;
   return ForwardRefComponent;
 }
 
@@ -87,11 +91,13 @@ function childrenToArray(children: unknown): unknown[] {
   if (children === undefined || children === null) return [];
   if (!Array.isArray(children)) return [children];
   const out: unknown[] = [];
-  const stack = [...children];
+  const stack: unknown[] = [children];
   while (stack.length > 0) {
-    const child = stack.shift();
+    const child = stack.pop();
     if (Array.isArray(child)) {
-      stack.unshift(...child);
+      for (let i = child.length - 1; i >= 0; i--) {
+        stack.push(child[i]);
+      }
       continue;
     }
     if (child === undefined || child === null || typeof child === "boolean") {
@@ -269,7 +275,54 @@ PureComponent.prototype.isPureReactComponent = true;
 // Suspense / Lazy
 // ---------------------------------------------------------------------------
 
+// Cache for promises passed to use() — maps a Promise to its settled result
+// so subsequent renders can return the value instead of throwing again.
+type PromiseResult<T> =
+  | { status: 'pending' }
+  | { status: 'fulfilled'; value: T }
+  | { status: 'rejected'; reason: unknown };
+
+const promiseCache = new WeakMap<Promise<unknown>, PromiseResult<unknown>>();
+
+export function use<T>(value: Promise<T> | unknown): T {
+  if (value instanceof Promise) {
+    let result = promiseCache.get(value as Promise<unknown>) as PromiseResult<T> | undefined;
+    if (!result) {
+      result = { status: 'pending' };
+      promiseCache.set(value as Promise<unknown>, result as PromiseResult<unknown>);
+      (value as Promise<T>).then(
+        (v) => { (result as any).status = 'fulfilled'; (result as any).value = v; },
+        (e) => { (result as any).status = 'rejected'; (result as any).reason = e; },
+      );
+    }
+    if (result.status === 'fulfilled') return (result as { status: 'fulfilled'; value: T }).value;
+    if (result.status === 'rejected') throw (result as { status: 'rejected'; reason: unknown }).reason;
+    throw value; // pending — triggers Suspense boundary
+  }
+  // Treat non-Promise values as context objects (React 19 use(Context) pattern).
+  return useContext(value as unknown) as T;
+}
+
+// Suspense is a real component so it can use useState to toggle between the
+// fallback and live children, and so the renderer can attach a
+// _suspenseHandler to its fiber for thrown-promise recovery.
 export function Suspense(props: { children?: unknown; fallback?: unknown }): unknown {
+  const [suspended, setSuspended] = useState(false);
+
+  // Register the promise handler on this render's fiber so that any
+  // descendant that throws a Promise can find and invoke it.
+  const fiber = currentFiber;
+  if (fiber) {
+    fiber._suspenseHandler = (promise: Promise<unknown>) => {
+      setSuspended(true);
+      promise.then(
+        () => setSuspended(false),
+        () => setSuspended(false),
+      );
+    };
+  }
+
+  if (suspended) return props.fallback ?? null;
   return props.children ?? null;
 }
 
@@ -421,6 +474,8 @@ export function resolveCompatType(type: unknown): unknown {
     };
     (wrappedForwardRef as any).displayName = exoticType.displayName
       ?? `ForwardRef(${(render as any).name || "anonymous"})`;
+    // Preserve $$typeof on the wrapper so react-is.isForwardRef(element) works.
+    (wrappedForwardRef as any).$$typeof = REACT_FORWARD_REF_TYPE;
     exoticTypeCache.set(type as object, wrappedForwardRef);
     return wrappedForwardRef;
   }
@@ -451,7 +506,7 @@ export function resolveCompatType(type: unknown): unknown {
       if (Array.isArray(children)) {
         return children.length === 1
           ? children[0] as VNode
-          : createElementImpl(Fragment, null, ...(children as ElementChild[]));
+          : createElementImpl(InternalFragment, null, ...(children as ElementChild[]));
       }
       return children as VNode;
     };
@@ -533,6 +588,7 @@ function normalizeChildrenSingle(vnode: any): any {
 export function createElement(type: unknown, props?: unknown, ...children: unknown[]): VNode {
   const effectiveType = resolveCompatType(type);
 
+  let vnode: VNode;
   if (typeof type === 'string' && props && typeof props === 'object') {
     const newProps = { ...props } as Record<string, unknown>;
     let hasChanges = false;
@@ -543,18 +599,29 @@ export function createElement(type: unknown, props?: unknown, ...children: unkno
       }
     }
     if (hasChanges) {
-        return normalizeChildrenSingle(createElementImpl(effectiveType as any, newProps, ...(children as any[])));
+      vnode = normalizeChildrenSingle(createElementImpl(effectiveType as any, newProps, ...(children as any[])));
+    } else {
+      vnode = normalizeChildrenSingle(createElementImpl(effectiveType as any, props as any, ...(children as any[])));
     }
+  } else {
+    vnode = normalizeChildrenSingle(createElementImpl(effectiveType as any, props as any, ...(children as any[])));
   }
 
-  return normalizeChildrenSingle(createElementImpl(effectiveType as any, props as any, ...(children as any[])));
+  // Stamp $$typeof so react-is.isValidElement / isFragment / isForwardRef etc.
+  // work correctly on VNodes produced by the compat layer.
+  (vnode as any).$$typeof = REACT_ELEMENT_TYPE;
+  return vnode;
 }
 
 // ---------------------------------------------------------------------------
 // Export
 // ---------------------------------------------------------------------------
 
-export { Fragment, memo };
+// Export the standard React fragment symbol so react-is.isFragment() works
+// correctly. The renderer recognises both this and the internal refract.fragment
+// symbol (see coreRenderer.ts REACT_FRAGMENT_TYPE).
+export const Fragment = Symbol.for("react.fragment");
+export { memo };
 export {
   createRef,
   registerExternalReactModule,
@@ -571,6 +638,7 @@ const ReactCompat = {
   PureComponent,
   Suspense,
   lazy,
+  use,
   createContext,
   createElement,
   cloneElement,

package/src/refract/compat/sharedInternals.ts

@@ -107,6 +107,7 @@ const secretInternals: ReactSecretInternalsCompat = {
 const externalClientInternals = new Set<ReactClientInternalsCompat>();
 const externalSecretInternals = new Set<ReactSecretInternalsCompat>();
 const dispatcherStack: (RefractHookDispatcher | null)[] = [];
+const MAX_EXTERNAL_INTERNALS = 8;
 
 let runtimeInitialized = false;
 
@@ -135,7 +136,7 @@ export function registerExternalReactModule(moduleValue: unknown): void {
 
   const candidateClient = moduleRecord.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
   if (candidateClient && typeof candidateClient === "object" && "H" in (candidateClient as Record<string, unknown>)) {
-    externalClientInternals.add(candidateClient as ReactClientInternalsCompat);
+    addBoundedInternal(externalClientInternals, candidateClient as ReactClientInternalsCompat);
   }
 
   const candidateSecret = moduleRecord.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
@@ -147,12 +148,23 @@ export function registerExternalReactModule(moduleValue: unknown): void {
     && typeof dispatcherHolder.ReactCurrentDispatcher === "object"
     && "current" in (dispatcherHolder.ReactCurrentDispatcher as Record<string, unknown>)
   ) {
-    externalSecretInternals.add(candidateSecret as ReactSecretInternalsCompat);
+    addBoundedInternal(externalSecretInternals, candidateSecret as ReactSecretInternalsCompat);
   }
 
   syncDispatcherToExternal();
 }
 
+function addBoundedInternal<T>(set: Set<T>, value: T): void {
+  if (set.has(value)) return;
+  if (set.size >= MAX_EXTERNAL_INTERNALS) {
+    const oldest = set.values().next().value as T | undefined;
+    if (oldest !== undefined) {
+      set.delete(oldest);
+    }
+  }
+  set.add(value);
+}
+
 function beforeComponentRender(): void {
   dispatcherStack.push(clientInternals.H);
   setDispatcher(dispatcher);

package/src/refract/coreRenderer.ts

@@ -54,8 +54,12 @@ export function renderFiber(vnode: VNode, container: Node): void {
   };
   deletions = [];
   isRendering = true;
-  performWork(rootFiber);
-  isRendering = false;
+  try {
+    performWork(rootFiber);
+  } finally {
+    isRendering = false;
+    currentFiber = null;
+  }
   const committedDeletions = deletions.slice();
   commitRoot(rootFiber);
   clearAlternates(rootFiber);
@@ -90,6 +94,7 @@ function processWorkUnit(fiber: Fiber): boolean {
       if (!tryHandleRenderError(fiber, error)) throw error;
     } finally {
       runAfterComponentRenderHandlers(fiber);
+      currentFiber = null;
     }
   } else if (isFragment) {
     reconcileChildren(fiber, normalizeChildrenProp(fiber.props.children));
@@ -208,7 +213,7 @@ function flattenRenderedChildren(raw: RenderedChild[]): VNode[] {
       continue;
     }
     if (typeof child === "object") {
-      const record = child as Record<string, unknown>;
+      const record = child as unknown as Record<string, unknown>;
       if ("type" in record && "props" in record) {
         const rawKey = record.key;
         result.push({
@@ -254,33 +259,57 @@ function getNextDomSibling(fiber: Fiber): Node | null {
 /** Collect all DOM nodes from a component/fragment fiber's subtree */
 function collectChildDomNodes(fiber: Fiber): Node[] {
   const nodes: Node[] = [];
-  function walk(f: Fiber | null): void {
-    while (f) {
-      if (isPortalFiber(f)) {
-        f = f.sibling;
-        continue;
-      }
-      if (f.dom) {
-        nodes.push(f.dom);
-      } else {
-        walk(f.child);
-      }
-      f = f.sibling;
+  const stack: Fiber[] = [];
+  const rootChildren: Fiber[] = [];
+  let child = fiber.child;
+  while (child) {
+    rootChildren.push(child);
+    child = child.sibling;
+  }
+  for (let i = rootChildren.length - 1; i >= 0; i--) {
+    stack.push(rootChildren[i]);
+  }
+
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    if (isPortalFiber(current)) {
+      continue;
+    }
+    if (current.dom) {
+      nodes.push(current.dom);
+      continue;
+    }
+    const children: Fiber[] = [];
+    let next = current.child;
+    while (next) {
+      children.push(next);
+      next = next.sibling;
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push(children[i]);
     }
   }
-  walk(fiber.child);
   return nodes;
 }
 
 /** Get the first committed DOM node in a fiber subtree */
 function getFirstCommittedDom(fiber: Fiber): Node | null {
-  if (isPortalFiber(fiber)) return null;
-  if (fiber.dom && !(fiber.flags & PLACEMENT)) return fiber.dom;
-  let child = fiber.child;
-  while (child) {
-    const dom = getFirstCommittedDom(child);
-    if (dom) return dom;
-    child = child.sibling;
+  const stack: Fiber[] = [fiber];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    if (isPortalFiber(current)) continue;
+    if (current.dom && !(current.flags & PLACEMENT)) {
+      return current.dom;
+    }
+    const children: Fiber[] = [];
+    let child = current.child;
+    while (child) {
+      children.push(child);
+      child = child.sibling;
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push(children[i]);
+    }
   }
   return null;
 }
@@ -296,69 +325,74 @@ function commitRoot(rootFiber: Fiber): void {
 }
 
 function commitWork(fiber: Fiber): void {
-  if (isPortalFiber(fiber)) {
-    fiber.flags = 0;
-    if (fiber.child) commitWork(fiber.child);
-    if (fiber.sibling) commitWork(fiber.sibling);
-    return;
-  }
+  const stack: Fiber[] = [fiber];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    if (isPortalFiber(current)) {
+      current.flags = 0;
+      if (current.sibling) stack.push(current.sibling);
+      if (current.child) stack.push(current.child);
+      continue;
+    }
 
-  let parentFiber = fiber.parent;
-  while (parentFiber && !parentFiber.dom) {
-    parentFiber = parentFiber.parent;
-  }
-  const parentDom = parentFiber!.dom!;
-
-  if (fiber.flags & PLACEMENT) {
-    if (fiber.dom) {
-      const before = getNextDomSibling(fiber);
-      if (before) {
-        parentDom.insertBefore(fiber.dom, before);
-      } else {
-        parentDom.appendChild(fiber.dom);
-      }
-    } else {
-      // Component/fragment: move all child DOM nodes
-      const domNodes = collectChildDomNodes(fiber);
-      const before = getNextDomSibling(fiber);
-      for (const dom of domNodes) {
-        if (before) {
-          parentDom.insertBefore(dom, before);
+    let parentFiber = current.parent;
+    while (parentFiber && !parentFiber.dom) {
+      parentFiber = parentFiber.parent;
+    }
+    const parentDom = parentFiber?.dom;
+
+    if (parentDom) {
+      if (current.flags & PLACEMENT) {
+        if (current.dom) {
+          const before = getNextDomSibling(current);
+          if (before) {
+            parentDom.insertBefore(current.dom, before);
+          } else {
+            parentDom.appendChild(current.dom);
+          }
         } else {
-          parentDom.appendChild(dom);
+          // Component/fragment: move all child DOM nodes
+          const domNodes = collectChildDomNodes(current);
+          const before = getNextDomSibling(current);
+          for (const dom of domNodes) {
+            if (before) {
+              parentDom.insertBefore(dom, before);
+            } else {
+              parentDom.appendChild(dom);
+            }
+          }
+        }
+      } else if (current.flags & UPDATE && current.dom) {
+        if (current.type === "TEXT") {
+          const oldValue = current.alternate?.props.nodeValue;
+          if (oldValue !== current.props.nodeValue) {
+            current.dom.textContent = current.props.nodeValue as string;
+          }
+        } else {
+          applyProps(
+            current.dom as HTMLElement,
+            current.alternate?.props ?? {},
+            current.props,
+          );
         }
       }
     }
-  } else if (fiber.flags & UPDATE && fiber.dom) {
-    if (fiber.type === "TEXT") {
-      const oldValue = fiber.alternate?.props.nodeValue;
-      if (oldValue !== fiber.props.nodeValue) {
-        fiber.dom.textContent = fiber.props.nodeValue as string;
-      }
-    } else {
-      applyProps(
-        fiber.dom as HTMLElement,
-        fiber.alternate?.props ?? {},
-        fiber.props,
-      );
-    }
-  }
 
-  // Handle ref prop — only on mount or when ref changes (like React)
-  if (fiber.dom && fiber.props.ref) {
-    const oldRef = fiber.alternate?.props.ref;
-    if (fiber.flags & PLACEMENT || fiber.props.ref !== oldRef) {
-      if (oldRef && oldRef !== fiber.props.ref) {
-        setRef(oldRef, null);
+    // Handle ref prop — only on mount or when ref changes (like React)
+    if (current.dom && current.props.ref) {
+      const oldRef = current.alternate?.props.ref;
+      if (current.flags & PLACEMENT || current.props.ref !== oldRef) {
+        if (oldRef && oldRef !== current.props.ref) {
+          setRef(oldRef, null);
+        }
+        setRef(current.props.ref, current.dom);
       }
-      setRef(fiber.props.ref, fiber.dom);
     }
-  }
-
-  fiber.flags = 0;
 
-  if (fiber.child) commitWork(fiber.child);
-  if (fiber.sibling) commitWork(fiber.sibling);
+    current.flags = 0;
+    if (current.sibling) stack.push(current.sibling);
+    if (current.child) stack.push(current.child);
+  }
 }
 
 function setRef(ref: unknown, value: Node | null): void {
@@ -373,41 +407,51 @@ function setRef(ref: unknown, value: Node | null): void {
  *  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;
+  if (!fiber) return;
+  const stack: Fiber[] = [fiber];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    current.alternate = null;
+    if (current.sibling) stack.push(current.sibling);
+    if (current.child) stack.push(current.child);
   }
 }
 
 function commitDeletion(fiber: Fiber): void {
   runCleanups(fiber);
-  // Clear ref on unmount
-  if (fiber.dom && fiber.props.ref) {
-    setRef(fiber.props.ref, null);
-  }
-  if (isPortalFiber(fiber)) {
-    let child: Fiber | null = fiber.child;
-    while (child) {
-      commitDeletion(child);
-      child = child.sibling;
+  walkSubtree(fiber, (node) => {
+    if (node.dom && node.props.ref) {
+      setRef(node.props.ref, null);
     }
-  } else if (fiber.dom) {
-    fiber.dom.parentNode?.removeChild(fiber.dom);
-  } else if (fiber.child) {
-    // Fragment/component — delete children
-    let child: Fiber | null = fiber.child;
-    while (child) {
-      commitDeletion(child);
-      child = child.sibling;
+  });
+  walkSubtree(fiber, (node) => {
+    if (!isPortalFiber(node) && node.dom) {
+      node.dom.parentNode?.removeChild(node.dom);
     }
-  }
+  });
 }
 
 function runCleanups(fiber: Fiber): void {
-  runFiberCleanupHandlers(fiber);
-  if (fiber.child) runCleanups(fiber.child);
-  if (fiber.sibling) runCleanups(fiber.sibling);
+  walkSubtree(fiber, (node) => {
+    runFiberCleanupHandlers(node);
+  });
+}
+
+function walkSubtree(root: Fiber, visit: (fiber: Fiber) => void): void {
+  const stack: Fiber[] = [root];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    visit(current);
+    const children: Fiber[] = [];
+    let child = current.child;
+    while (child) {
+      children.push(child);
+      child = child.sibling;
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push(children[i]);
+    }
+  }
 }
 
 const pendingContainers = new Set<Node>();
@@ -473,8 +517,12 @@ function flushRenders(): void {
       };
       deletions = [];
       isRendering = true;
-      performWork(newRoot);
-      isRendering = false;
+      try {
+        performWork(newRoot);
+      } finally {
+        isRendering = false;
+        currentFiber = null;
+      }
       const committedDeletions = deletions.slice();
       commitRoot(newRoot);
       clearAlternates(newRoot);

package/src/refract/features/hooks.ts

@@ -36,9 +36,11 @@ export function useState<T>(initial: T | (() => T)): [T, (value: T | ((prev: T)
   // Create a stable setter that is reused across renders (like React)
   if (!hook._setter) {
     hook._setter = (value: T | ((prev: T) => T)) => {
+      if (!hook._fiber) return;
       const action = typeof value === "function"
         ? value as (prev: T) => T
         : () => value;
+      if (!hook.queue) hook.queue = [];
       (hook.queue as ((prev: T) => T)[]).push(action);
       scheduleRender(hook._fiber!);
     };
@@ -191,6 +193,8 @@ export function useReducer<S, A, I>(
   // Create stable dispatch (like React)
   if (!hook._dispatch) {
     hook._dispatch = (action: A) => {
+      if (!hook._fiber) return;
+      if (!hook.queue) hook.queue = [];
       (hook.queue as A[]).push(action);
       scheduleRender(hook._fiber!);
     };

package/src/refract/hooksRuntime.ts

@@ -33,6 +33,8 @@ function cleanupFiberEffects(fiber: Fiber): void {
   if (!fiber.hooks) return;
 
   for (const hook of fiber.hooks) {
+    hook.queue = undefined;
+    hook._fiber = undefined;
     const state = hook.state;
     if (!state || typeof state !== "object") continue;
     const effectState = state as { cleanup?: () => void; pending?: boolean };
@@ -109,7 +111,24 @@ function handleErrorBoundary(fiber: Fiber, error: unknown): boolean {
   return false;
 }
 
+function handleSuspenseBoundary(fiber: Fiber, error: unknown): boolean {
+  if (!(error instanceof Promise)) return false;
+  let current: Fiber | null = fiber.parent;
+  while (current) {
+    if (current._suspenseHandler) {
+      current._suspenseHandler(error as Promise<unknown>);
+      reconcileChildren(fiber, []);
+      return true;
+    }
+    current = current.parent;
+  }
+  return false;
+}
+
 registerFiberCleanupHandler(cleanupFiberEffects);
 registerAfterCommitHandler(runPendingEffects);
 registerBeforeRenderBatchHandler(flushPassiveEffects);
+// Suspense must be registered before the error boundary so a thrown Promise
+// is caught by the nearest Suspense boundary before reaching any error boundary.
+registerRenderErrorHandler(handleSuspenseBoundary);
 registerRenderErrorHandler(handleErrorBoundary);

package/src/refract/types.ts

@@ -48,6 +48,7 @@ export interface Fiber {
   _contexts?: Map<number, unknown>;
   _objectContexts?: Map<object, unknown>;
   _errorHandler?: (error: unknown) => void;
+  _suspenseHandler?: (promise: Promise<unknown>) => void;
   alternate: Fiber | null;
   flags: number;
 }

package/tests/hooks.test.ts

@@ -71,6 +71,25 @@ describe("hooks", () => {
       expect(renderCount).toBe(2);
       expect(container.querySelector("span")!.textContent).toBe("3");
     });
+
+    it("ignores setState after unmount", async () => {
+      let setCount!: (v: number | ((p: number) => number)) => void;
+      let renders = 0;
+      function Counter() {
+        const [count, sc] = useState(0);
+        setCount = sc;
+        renders++;
+        return createElement("span", null, String(count));
+      }
+
+      render(createElement(Counter, null), container);
+      render(createElement("div", null, "gone"), container);
+
+      expect(() => setCount(1)).not.toThrow();
+      await new Promise((r) => setTimeout(r, 10));
+      expect(container.textContent).toBe("gone");
+      expect(renders).toBe(1);
+    });
   });
 
   describe("useEffect", () => {
@@ -269,5 +288,69 @@ describe("hooks", () => {
       await new Promise((r) => setTimeout(r, 10));
       expect(container.querySelector("span")!.textContent).toBe("2");
     });
+
+    it("ignores dispatch after unmount", async () => {
+      type Action = { type: "inc" };
+      let dispatch!: (action: Action) => void;
+      let renders = 0;
+      function Counter() {
+        const [count, d] = useReducer((state: number, action: Action) => {
+          if (action.type === "inc") return state + 1;
+          return state;
+        }, 0);
+        dispatch = d;
+        renders++;
+        return createElement("span", null, String(count));
+      }
+
+      render(createElement(Counter, null), container);
+      render(createElement("div", null, "gone"), container);
+
+      expect(() => dispatch({ type: "inc" })).not.toThrow();
+      await new Promise((r) => setTimeout(r, 10));
+      expect(container.textContent).toBe("gone");
+      expect(renders).toBe(1);
+    });
+  });
+
+  describe("cleanup scoping", () => {
+    it("only cleans up deleted subtree effects", async () => {
+      const leftCleanup = vi.fn();
+      const rightCleanup = vi.fn();
+      let setShowLeft!: (v: boolean) => void;
+
+      function Left() {
+        useEffect(() => leftCleanup, []);
+        return createElement("span", null, "left");
+      }
+
+      function Right() {
+        useEffect(() => rightCleanup, []);
+        return createElement("span", null, "right");
+      }
+
+      function App() {
+        const [showLeft, ss] = useState(true);
+        setShowLeft = ss;
+        return createElement(
+          "div",
+          null,
+          showLeft ? createElement(Left, { key: "left" }) : null,
+          createElement(Right, { key: "right" }),
+        );
+      }
+
+      render(createElement(App, null), container);
+      flushPassiveEffects();
+      expect(leftCleanup).toHaveBeenCalledTimes(0);
+      expect(rightCleanup).toHaveBeenCalledTimes(0);
+
+      setShowLeft(false);
+      await new Promise((r) => setTimeout(r, 10));
+      flushPassiveEffects();
+
+      expect(leftCleanup).toHaveBeenCalledTimes(1);
+      expect(rightCleanup).toHaveBeenCalledTimes(0);
+    });
   });
 });