@reckona/mreact-compat 0.0.91 → 0.0.92

package/src/hooks.ts

@@ -1,26 +1,13 @@
 import { scheduleCallback } from "./fiber-scheduler.js";
+import { removeChildIfPresent } from "./dom-children.js";
 import {
-  Activity,
-  Fragment,
-  FORWARD_REF_TYPE,
-  MEMO_TYPE,
-  Profiler,
-  isReactCompatElement,
-  type ForwardRefType,
-  type MemoType,
-  type ReactCompatElement,
-  type ReactCompatNode,
-} from "./element.js";
-import {
+  type ReactCompatContextLike,
   isReactCompatContext,
-  isReactCompatConsumer,
-  isReactCompatProvider,
-  renderWithContextProvider,
+  readContextValue,
   useContext,
+  withContextReadObserver,
 } from "./context.js";
 import { isThenable } from "./thenable.js";
-import { isDangerousHtmlAttribute, isDangerousHtmlOptIn } from "./url-safety.js";
-import { escapeHtmlAttribute as escapeHtml } from "@reckona/mreact-shared/html-escape";
 
 export interface RootRuntime {
   currentElement?: unknown;
@@ -35,11 +22,19 @@ export interface RootRuntime {
   pendingEffects: PendingEffect[];
   externalStoreChecks: ExternalStoreCheck[];
   portalContainers: Set<Element>;
+  portalNodes: Map<Element, Set<Node>>;
   idCounter: number;
   identifierPrefix: string;
   idMode: "client" | "server";
   strictModeDepth: number;
+  strictReplayDepth: number;
+  strictMemoCapture: unknown[] | undefined;
+  strictMemoCaptureByHook: Map<string, unknown> | undefined;
+  strictMemoReplay: { values: readonly unknown[]; index: number } | undefined;
+  strictMemoReplayByHook: ReadonlyMap<string, unknown> | undefined;
   profilerFlushDepth: number;
+  effectFlushPhase: "insertion" | "layout" | "normal" | undefined;
+  externalStoreUpdate: boolean;
   rerender(priority?: RenderPriority): void;
   beginRender(): void;
   endRender(committed?: boolean): void;
@@ -48,9 +43,13 @@ export interface RootRuntime {
 }
 
 interface ComponentInstance {
+  owner: unknown | undefined;
+  path: string;
   hooks: HookSlot[];
   hookIndex: number;
   dirty: boolean;
+  disposed?: boolean;
+  contextDependencies?: Map<ReactCompatContextLike<unknown>, unknown>;
   devToolsHooks: DevToolsHookValue[];
   devToolsHookTypes: string[];
   devToolsHookSuppressionDepth: number;
@@ -119,7 +118,7 @@ export type DevToolsHookValue =
   | { kind: "effect"; effectKind: "insertion" | "layout" | "normal"; deps?: readonly unknown[] };
 
 type HookSlot =
-  | { kind: "state"; value: unknown }
+  | { kind: "state"; value: unknown; hostCommitValue?: unknown }
   | {
       kind: "action-state";
       state: unknown;
@@ -135,7 +134,7 @@ type HookSlot =
       update: (state: unknown, payload: unknown) => unknown;
       dispatch?: (payload: unknown) => void;
     }
-  | { kind: "store"; value: unknown }
+  | { kind: "store"; value: unknown; hasMounted?: boolean }
   | { kind: "ref"; value: { current: unknown } }
   | { kind: "memo"; value: unknown; deps?: readonly unknown[] }
   | { kind: "debug"; value: unknown }
@@ -146,12 +145,31 @@ type HookSlot =
       deps?: readonly unknown[];
       cleanup?: () => void;
       disposed?: boolean;
+      mounted?: boolean;
       strictReplay?: boolean;
     };
 
-let currentRuntime: RootRuntime | undefined;
-let currentInstance: ComponentInstance | undefined;
-let currentCacheScope: CacheScope | undefined;
+interface HookRenderState {
+  currentRuntime: RootRuntime | undefined;
+  currentInstance: ComponentInstance | undefined;
+  currentCacheScope: CacheScope | undefined;
+  hostCommitDepth: number;
+  queuedHostCommitRerenders: Set<RootRuntime>;
+  queuedEffectFlushRerenders: Set<RootRuntime>;
+}
+
+const HOOK_RENDER_STATE_KEY = Symbol.for("modular.react.hook_render_state");
+const hookRenderState =
+  ((globalThis as typeof globalThis & Record<symbol, HookRenderState | undefined>)[
+    HOOK_RENDER_STATE_KEY
+  ] ??= {
+    currentRuntime: undefined,
+    currentInstance: undefined,
+    currentCacheScope: undefined,
+    hostCommitDepth: 0,
+    queuedHostCommitRerenders: new Set<RootRuntime>(),
+    queuedEffectFlushRerenders: new Set<RootRuntime>(),
+  });
 const CACHE_SCOPE_SYMBOL = Symbol.for("modular.react.cache_scope");
 const emptyCacheOwnerStack: string[] = [];
 let syncVersion = 0;
@@ -162,18 +180,77 @@ let transitionRerenderScheduled = false;
 let eventBatchDepth = 0;
 let currentEventPriority: EventPriority = "default";
 let eventRerenderScheduled = false;
+let effectFlushRerenderDepth = 0;
+let strictMemoOwnerId = 0;
+const strictMemoObjectOwnerIds = new WeakMap<object, number>();
+const strictMemoPrimitiveOwnerIds = new Map<unknown, number>();
 const queuedTransitionRerenders = new Map<RootRuntime, TransitionContext>();
 const queuedEventRerenders = new Set<RootRuntime>();
 export const version = "19.2.6";
 
 export function act<T>(callback: () => T): T extends PromiseLike<unknown> ? Promise<void> : void {
-  const result = callback();
+  const previousPriority = currentEventPriority;
+  currentEventPriority = "discrete";
+  eventBatchDepth += 1;
+  let result: T;
+
+  try {
+    result = callback();
+  } catch (error) {
+    eventBatchDepth -= 1;
+    currentEventPriority = previousPriority;
+    if (eventBatchDepth === 0) {
+      flushEventRerendersForPriority("discrete");
+    }
+    throw error;
+  }
+
+  const finishActScope = (): void => {
+    eventBatchDepth -= 1;
+    currentEventPriority = previousPriority;
+    if (eventBatchDepth === 0) {
+      flushEventRerendersForPriority("discrete");
+    }
+  };
+
+  if (isThenable(result)) {
+    return Promise.resolve(result).then(
+      async () => {
+        finishActScope();
+        await flushActWorkAsync();
+      },
+      (error: unknown) => {
+        finishActScope();
+        throw error;
+      },
+    ) as T extends PromiseLike<unknown> ? Promise<void> : void;
+  }
 
-  return (isThenable(result) ? Promise.resolve(result).then(() => undefined) : undefined) as T extends PromiseLike<unknown>
+  finishActScope();
+  flushActWork();
+  return undefined as T extends PromiseLike<unknown>
     ? Promise<void>
     : void;
 }
 
+async function flushActWorkAsync(): Promise<void> {
+  for (let attempt = 0; attempt < 10; attempt += 1) {
+    await Promise.resolve();
+    flushActWork();
+  }
+  for (let attempt = 0; attempt < 3; attempt += 1) {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    flushActWork();
+  }
+}
+
+function flushActWork(): void {
+  flushQueuedEventRerenders("sync");
+  flushQueuedTransitionRerenders();
+  flushHostCommitRerenders();
+  flushEffectFlushRerenders();
+}
+
 export type EventPriority = "discrete" | "continuous" | "default";
 export type RenderPriority = "sync" | "transition" | "continuous";
 
@@ -190,6 +267,7 @@ export interface RootRuntimeOptions {
 export interface RuntimeSnapshot {
   instanceKeys: Set<string>;
   portalContainers: Set<Element>;
+  portalNodes: Map<Element, Set<Node>>;
   pendingInsertionEffectsLength: number;
   pendingLayoutEffectsLength: number;
   pendingEffectsLength: number;
@@ -199,6 +277,11 @@ export interface RuntimeSnapshot {
   identifierPrefix: string;
   idMode: "client" | "server";
   strictModeDepth: number;
+  strictReplayDepth: number;
+  strictMemoCapture: unknown[] | undefined;
+  strictMemoCaptureByHook: Map<string, unknown> | undefined;
+  strictMemoReplay: { values: readonly unknown[]; index: number } | undefined;
+  strictMemoReplayByHook: ReadonlyMap<string, unknown> | undefined;
   profilerFlushDepth: number;
 }
 
@@ -218,11 +301,19 @@ export function createRootRuntime(
     pendingEffects: [],
     externalStoreChecks: [],
     portalContainers: new Set(),
+    portalNodes: new Map(),
     idCounter: 0,
     identifierPrefix: options.identifierPrefix ?? "",
     idMode: options.idMode ?? "client",
     strictModeDepth: 0,
+    strictReplayDepth: 0,
+    strictMemoCapture: undefined,
+    strictMemoCaptureByHook: undefined,
+    strictMemoReplay: undefined,
+    strictMemoReplayByHook: undefined,
     profilerFlushDepth: 0,
+    effectFlushPhase: undefined,
+    externalStoreUpdate: false,
     rerender,
     beginRender() {
       this.activeInstanceKeys = new Set();
@@ -245,23 +336,33 @@ export function createRootRuntime(
       }
       this.activeInstanceKeys = undefined;
       this.activeProfilerPaths = undefined;
-      currentRuntime = undefined;
-      currentInstance = undefined;
+      hookRenderState.currentRuntime = undefined;
+      hookRenderState.currentInstance = undefined;
       if (committed) {
         flushProfilerCommits(this, profilerCommits);
+        flushHostCommitRerenders();
+        this.externalStoreUpdate = false;
       }
     },
     flushEffects() {
       this.profilerFlushDepth += 1;
       try {
+        this.effectFlushPhase = "insertion";
         flushPendingEffects(this.pendingInsertionEffects);
+        this.effectFlushPhase = "layout";
         const strictLayoutEffects = flushPendingEffects(this.pendingLayoutEffects);
+        this.effectFlushPhase = "normal";
         const strictEffects = flushPendingEffects(this.pendingEffects);
+        this.effectFlushPhase = undefined;
         const strictReplayEffects = [...strictLayoutEffects, ...strictEffects];
         cleanupStrictEffects(strictReplayEffects);
         replayStrictEffects(strictReplayEffects);
       } finally {
+        this.effectFlushPhase = undefined;
         this.profilerFlushDepth -= 1;
+        if (this.profilerFlushDepth === 0) {
+          flushEffectFlushRerenders();
+        }
       }
     },
     dispose() {
@@ -276,10 +377,7 @@ export function createRootRuntime(
       this.activeProfilerPaths = undefined;
       this.mountedProfilerPaths.clear();
       this.profilerBaseDurations.clear();
-      for (const container of this.portalContainers) {
-        container.replaceChildren();
-      }
-      this.portalContainers.clear();
+      clearRuntimePortalNodes(this);
     },
   };
 }
@@ -299,9 +397,9 @@ export function refreshCacheScope(scope: CacheScope): void {
 }
 
 export function runWithCacheScope<T>(scope: CacheScope, callback: () => T): T {
-  const previousScope = currentCacheScope;
+  const previousScope = hookRenderState.currentCacheScope;
   const previousGlobalScope = getGlobalCacheScope();
-  currentCacheScope = scope;
+  hookRenderState.currentCacheScope = scope;
   setGlobalCacheScope(scope);
 
   try {
@@ -309,16 +407,16 @@ export function runWithCacheScope<T>(scope: CacheScope, callback: () => T): T {
 
     if (isThenable(result)) {
       return Promise.resolve(result).finally(() => {
-        currentCacheScope = previousScope;
+        hookRenderState.currentCacheScope = previousScope;
         setGlobalCacheScope(previousGlobalScope);
       }) as T;
     }
 
-    currentCacheScope = previousScope;
+    hookRenderState.currentCacheScope = previousScope;
     setGlobalCacheScope(previousGlobalScope);
     return result;
   } catch (error) {
-    currentCacheScope = previousScope;
+    hookRenderState.currentCacheScope = previousScope;
     setGlobalCacheScope(previousGlobalScope);
     throw error;
   }
@@ -332,7 +430,7 @@ export function renderWithProfiler<T>(
 ): T {
   const startTime = getCurrentTime();
   const phase: ProfilerPhase =
-    runtime.profilerFlushDepth > 0
+    runtime.profilerFlushDepth > 0 || effectFlushRerenderDepth > 0
       ? "nested-update"
       : runtime.mountedProfilerPaths.has(path)
         ? "update"
@@ -368,10 +466,20 @@ export function renderWithRootRuntime<T>(
   runtime: RootRuntime,
   path: string,
   render: () => T,
+  owner?: unknown,
 ): T {
-  const previousRuntime = currentRuntime;
-  const previousInstance = currentInstance;
-  const instance = runtime.instances.get(path) ?? {
+  const previousRuntime = hookRenderState.currentRuntime;
+  const previousInstance = hookRenderState.currentInstance;
+  let instance = runtime.instances.get(path);
+
+  if (instance !== undefined && owner !== undefined && instance.owner !== owner) {
+    cleanupInstance(instance);
+    instance = undefined;
+  }
+
+  instance ??= {
+    owner,
+    path,
     hooks: [],
     hookIndex: 0,
     dirty: false,
@@ -379,22 +487,56 @@ export function renderWithRootRuntime<T>(
     devToolsHookTypes: [],
     devToolsHookSuppressionDepth: 0,
   };
+  instance.owner = owner;
+  instance.path = path;
   runtime.instances.set(path, instance);
   runtime.activeInstanceKeys?.add(path);
   instance.hookIndex = 0;
   instance.dirty = false;
+  instance.disposed = false;
+  delete instance.contextDependencies;
   instance.devToolsHooks = [];
   instance.devToolsHookTypes = [];
   instance.devToolsHookSuppressionDepth = 0;
-  currentRuntime = runtime;
-  currentInstance = instance;
+  hookRenderState.currentRuntime = runtime;
+  hookRenderState.currentInstance = instance;
 
   try {
-    return render();
+    return withContextReadObserver((context, value) => {
+      (instance.contextDependencies ??= new Map()).set(context, value);
+    }, render);
   } finally {
-    currentRuntime = previousRuntime;
-    currentInstance = previousInstance;
+    hookRenderState.currentRuntime = previousRuntime;
+    hookRenderState.currentInstance = previousInstance;
+  }
+}
+
+export function hasChangedContextDependency(
+  runtime: RootRuntime,
+  keys: readonly string[],
+): boolean {
+  for (const key of keys) {
+    const dependencies = runtime.instances.get(key)?.contextDependencies;
+
+    if (dependencies === undefined) {
+      continue;
+    }
+
+    for (const [context, value] of dependencies) {
+      if (!Object.is(readContextValue(context), value)) {
+        return true;
+      }
+    }
   }
+
+  return false;
+}
+
+export function hasContextDependency(
+  runtime: RootRuntime,
+  keys: readonly string[],
+): boolean {
+  return keys.some((key) => runtime.instances.get(key)?.contextDependencies !== undefined);
 }
 
 export function getDevToolsHookState(
@@ -426,10 +568,54 @@ export function renderWithStrictMode<T>(
   }
 }
 
+export function renderWithStrictModeMemoCapture<T>(
+  runtime: RootRuntime,
+  render: () => T,
+): { result: T; memoValues: readonly unknown[]; memoValuesByHook: ReadonlyMap<string, unknown> } {
+  const previousCapture = runtime.strictMemoCapture;
+  const previousCaptureByHook = runtime.strictMemoCaptureByHook;
+  runtime.strictMemoCapture = [];
+  runtime.strictMemoCaptureByHook = new Map();
+
+  try {
+    const result = renderWithStrictMode(runtime, render);
+    return {
+      result,
+      memoValues: runtime.strictMemoCapture,
+      memoValuesByHook: runtime.strictMemoCaptureByHook,
+    };
+  } finally {
+    runtime.strictMemoCapture = previousCapture;
+    runtime.strictMemoCaptureByHook = previousCaptureByHook;
+  }
+}
+
+export function renderStrictModeReplay<T>(
+  runtime: RootRuntime,
+  memoValues: readonly unknown[],
+  memoValuesByHook: ReadonlyMap<string, unknown>,
+  render: () => T,
+): T {
+  const previousReplay = runtime.strictMemoReplay;
+  const previousReplayByHook = runtime.strictMemoReplayByHook;
+  runtime.strictReplayDepth += 1;
+  runtime.strictMemoReplay = { values: memoValues, index: 0 };
+  runtime.strictMemoReplayByHook = memoValuesByHook;
+
+  try {
+    return render();
+  } finally {
+    runtime.strictMemoReplay = previousReplay;
+    runtime.strictMemoReplayByHook = previousReplayByHook;
+    runtime.strictReplayDepth -= 1;
+  }
+}
+
 export function takeRuntimeSnapshot(runtime: RootRuntime): RuntimeSnapshot {
   return {
     instanceKeys: new Set(runtime.instances.keys()),
     portalContainers: new Set(runtime.portalContainers),
+    portalNodes: clonePortalNodes(runtime.portalNodes),
     pendingInsertionEffectsLength: runtime.pendingInsertionEffects.length,
     pendingLayoutEffectsLength: runtime.pendingLayoutEffects.length,
     pendingEffectsLength: runtime.pendingEffects.length,
@@ -439,6 +625,11 @@ export function takeRuntimeSnapshot(runtime: RootRuntime): RuntimeSnapshot {
     identifierPrefix: runtime.identifierPrefix,
     idMode: runtime.idMode,
     strictModeDepth: runtime.strictModeDepth,
+    strictReplayDepth: runtime.strictReplayDepth,
+    strictMemoCapture: runtime.strictMemoCapture,
+    strictMemoCaptureByHook: runtime.strictMemoCaptureByHook,
+    strictMemoReplay: runtime.strictMemoReplay,
+    strictMemoReplayByHook: runtime.strictMemoReplayByHook,
     profilerFlushDepth: runtime.profilerFlushDepth,
   };
 }
@@ -456,6 +647,11 @@ export function restoreRuntimeSnapshot(
   runtime.identifierPrefix = snapshot.identifierPrefix;
   runtime.idMode = snapshot.idMode;
   runtime.strictModeDepth = snapshot.strictModeDepth;
+  runtime.strictReplayDepth = snapshot.strictReplayDepth;
+  runtime.strictMemoCapture = snapshot.strictMemoCapture;
+  runtime.strictMemoCaptureByHook = snapshot.strictMemoCaptureByHook;
+  runtime.strictMemoReplay = snapshot.strictMemoReplay;
+  runtime.strictMemoReplayByHook = snapshot.strictMemoReplayByHook;
   runtime.profilerFlushDepth = snapshot.profilerFlushDepth;
 
   for (const key of runtime.instances.keys()) {
@@ -464,16 +660,48 @@ export function restoreRuntimeSnapshot(
     }
   }
 
-  for (const container of runtime.portalContainers) {
-    if (!snapshot.portalContainers.has(container)) {
-      container.replaceChildren();
+  clearRuntimePortalNodesExcept(runtime, snapshot.portalNodes);
+  runtime.portalContainers.clear();
+  for (const container of snapshot.portalContainers) {
+    runtime.portalContainers.add(container);
+  }
+  runtime.portalNodes = clonePortalNodes(snapshot.portalNodes);
+}
+
+export function clearRuntimePortalNodes(runtime: RootRuntime): void {
+  for (const [container, nodes] of runtime.portalNodes) {
+    for (const node of nodes) {
+      removeChildIfPresent(container, node);
     }
   }
 
+  runtime.portalNodes.clear();
   runtime.portalContainers.clear();
-  for (const container of snapshot.portalContainers) {
-    runtime.portalContainers.add(container);
+}
+
+function clearRuntimePortalNodesExcept(
+  runtime: RootRuntime,
+  preserved: Map<Element, Set<Node>>,
+): void {
+  for (const [container, nodes] of runtime.portalNodes) {
+    const preservedNodes = preserved.get(container);
+
+    for (const node of nodes) {
+      if (preservedNodes?.has(node) !== true) {
+        removeChildIfPresent(container, node);
+      }
+    }
+  }
+}
+
+function clonePortalNodes(source: Map<Element, Set<Node>>): Map<Element, Set<Node>> {
+  const clone = new Map<Element, Set<Node>>();
+
+  for (const [container, nodes] of source) {
+    clone.set(container, new Set(nodes));
   }
+
+  return clone;
 }
 
 export function useState<T>(
@@ -499,6 +727,7 @@ export function useState<T>(
   }
 
   const setState = (value: T | ((previous: T) => T)): void => {
+    const previousValue = slot.value;
     const nextValue =
       typeof value === "function"
         ? (value as (previous: T) => T)(slot.value as T)
@@ -508,7 +737,17 @@ export function useState<T>(
       return;
     }
 
+    if (hookRenderState.hostCommitDepth > 0 && !Object.hasOwn(slot, "hostCommitValue")) {
+      slot.hostCommitValue = previousValue;
+    }
+
     slot.value = nextValue;
+    if (hookRenderState.hostCommitDepth > 0) {
+      updateHostCommitDirtyState(instance);
+      hookRenderState.queuedHostCommitRerenders.add(runtime);
+      return;
+    }
+
     scheduleInstanceUpdate(runtime, instance);
   };
 
@@ -616,6 +855,7 @@ export function useImperativeHandle<T>(
 }
 
 export function useMemo<T>(factory: () => T, deps?: readonly unknown[]): T {
+  const runtime = requireRuntime();
   const instance = requireInstance();
   const index = instance.hookIndex;
   instance.hookIndex += 1;
@@ -626,25 +866,82 @@ export function useMemo<T>(factory: () => T, deps?: readonly unknown[]): T {
     throw new Error("Hook order changed between renders.");
   }
 
-  if (
+  let value: unknown;
+  const shouldRecompute =
     slot === undefined ||
     deps === undefined ||
     slot.deps === undefined ||
-    !areHookInputsEqual(deps, slot.deps)
-  ) {
-    const value = factory();
+    !areHookInputsEqual(deps, slot.deps);
+
+  if (runtime.strictReplayDepth > 0) {
+    const replayValue = factory();
+    if (slot === undefined) {
+      slot =
+        deps === undefined
+          ? { kind: "memo", value: replayValue }
+          : { kind: "memo", value: replayValue, deps };
+      instance.hooks[index] = slot;
+    }
+    const hookKey = getStrictMemoHookKey(instance, index);
+    const replayByHook = runtime.strictMemoReplayByHook;
+    const replay = runtime.strictMemoReplay;
+    value = replayByHook?.has(hookKey) === true
+      ? replayByHook.get(hookKey)
+      : replay === undefined || replay.index >= replay.values.length
+        ? slot.value
+        : replay.values[replay.index++];
+  } else if (shouldRecompute) {
+    value = factory();
     slot =
       deps === undefined
         ? { kind: "memo", value }
         : { kind: "memo", value, deps };
     instance.hooks[index] = slot;
+  } else {
+    value = slot!.value;
   }
 
-  recordDevToolsHook("useMemo", slot.deps === undefined
-    ? { kind: "memo", value: slot.value }
-    : { kind: "memo", value: slot.value, deps: slot.deps });
+  if (runtime.strictModeDepth > 0 && runtime.strictReplayDepth === 0) {
+    runtime.strictMemoCapture?.push(value);
+    runtime.strictMemoCaptureByHook?.set(getStrictMemoHookKey(instance, index), value);
+  }
 
-  return slot.value as T;
+  const memoSlot = slot;
+  if (memoSlot === undefined) {
+    throw new Error("Hook order changed between renders.");
+  }
+
+  recordDevToolsHook("useMemo", memoSlot.deps === undefined
+    ? { kind: "memo", value }
+    : { kind: "memo", value, deps: memoSlot.deps });
+
+  return value as T;
+}
+
+function getStrictMemoHookKey(
+  instance: ComponentInstance,
+  index: number,
+): string {
+  return `${instance.path}:${getStrictMemoOwnerId(instance.owner)}:${index}`;
+}
+
+function getStrictMemoOwnerId(owner: unknown): number {
+  if ((typeof owner === "object" && owner !== null) || typeof owner === "function") {
+    const objectOwner = owner as object;
+    let ownerId = strictMemoObjectOwnerIds.get(objectOwner);
+    if (ownerId === undefined) {
+      ownerId = strictMemoOwnerId++;
+      strictMemoObjectOwnerIds.set(objectOwner, ownerId);
+    }
+    return ownerId;
+  }
+
+  let ownerId = strictMemoPrimitiveOwnerIds.get(owner);
+  if (ownerId === undefined) {
+    ownerId = strictMemoOwnerId++;
+    strictMemoPrimitiveOwnerIds.set(owner, ownerId);
+  }
+  return ownerId;
 }
 
 function assignRef<T>(ref: unknown, value: T | null): void {
@@ -659,7 +956,7 @@ function assignRef<T>(ref: unknown, value: T | null): void {
 }
 
 function recordDevToolsHook(type: string, value: DevToolsHookValue): void {
-  const instance = currentInstance;
+  const instance = hookRenderState.currentInstance;
 
   if (instance === undefined || instance.devToolsHookSuppressionDepth > 0) {
     return;
@@ -797,16 +1094,32 @@ export function useSyncExternalStore<T>(
 
   runWithoutDevToolsHookTracking(() => useEffect(() => {
     const checkForUpdates = (): void => {
+      if (instance.disposed === true) {
+        return;
+      }
+
       const nextSnapshot = getSnapshot();
 
       if (!Object.is(slot.value, nextSnapshot)) {
         slot.value = nextSnapshot;
+        instance.dirty = true;
+        runtime.externalStoreUpdate = true;
+        if (runtime.profilerFlushDepth > 0) {
+          hookRenderState.queuedEffectFlushRerenders.add(runtime);
+          return;
+        }
         runtime.rerender("sync");
       }
     };
 
-    checkForUpdates();
-    return subscribe(checkForUpdates);
+    if (slot.hasMounted !== true) {
+      checkForUpdates();
+    }
+    const unsubscribe = subscribe(checkForUpdates);
+    slot.hasMounted = true;
+    return () => {
+      unsubscribe();
+    };
   }, [subscribe, getSnapshot]));
 
   recordDevToolsHook("useSyncExternalStore", {
@@ -981,418 +1294,6 @@ export function hasStableExternalStores(
   );
 }
 
-export function renderToString<TProps>(
-  component:
-    | ((props: TProps) => ReactCompatNode)
-    | (new (props: TProps) => { render(): ReactCompatNode }),
-  props?: TProps,
-  options: RootRuntimeOptions = {},
-): string {
-  const runtime = createRootRuntime(() => undefined, {
-    ...options,
-    idMode: "server",
-  });
-
-  return runWithCacheScope(createCacheScope(), () => {
-    try {
-      const rendered = renderWithRootRuntime(runtime, "0", () => {
-        if (isClassComponentType(component)) {
-          const instance = new component(props as Record<string, unknown>);
-          return instance.render();
-        }
-
-        return (component as (props: TProps) => ReactCompatNode)(props as TProps);
-      });
-      return typeof rendered === "string"
-        ? rendered
-        : renderNodeToString(rendered, runtime, "0");
-    } finally {
-      runtime.dispose();
-    }
-  });
-}
-
-function renderNodeToString(
-  node: ReactCompatNode,
-  runtime: RootRuntime,
-  path: string,
-): string {
-  if (node === null || node === undefined || typeof node === "boolean") {
-    return "";
-  }
-
-  if (typeof node === "string" || typeof node === "number") {
-    return escapeHtml(node);
-  }
-
-  if (Array.isArray(node)) {
-    return node.map((child, index) => renderNodeToString(child, runtime, `${path}.${index}`)).join("");
-  }
-
-  if (!isReactCompatElement(node)) {
-    return "";
-  }
-
-  return renderElementToString(node, runtime, path);
-}
-
-function renderElementToString(
-  element: ReactCompatElement,
-  runtime: RootRuntime,
-  path: string,
-): string {
-  if (typeof element.type === "string") {
-    if (element.type === "textarea") {
-      return renderTextareaToString(element, runtime, path);
-    }
-
-    if (element.type === "select") {
-      return renderSelectToString(element, runtime, path);
-    }
-
-    const attributes = element.type === "input"
-      ? renderInputAttributesToString(element.props)
-      : Object.entries(element.props)
-          .map(([name, value]) => renderHtmlAttribute(name, value))
-          .filter((attribute) => attribute !== "")
-          .join("");
-    if (voidHtmlElements.has(element.type)) {
-      return `<${element.type}${attributes}/>`;
-    }
-
-    return `<${element.type}${attributes}>${renderNodeToString(element.props.children, runtime, `${path}.children`)}</${element.type}>`;
-  }
-
-  if (element.type === Fragment) {
-    return renderNodeToString(element.props.children, runtime, `${path}.fragment`);
-  }
-
-  if (element.type === Activity) {
-    if ((element.props as { mode?: unknown }).mode === "hidden") {
-      return "";
-    }
-
-    return `<!--&-->${renderNodeToString(element.props.children, runtime, `${path}.activity`)}<!--/&-->`;
-  }
-
-  if (element.type === Profiler) {
-    return renderNodeToString(element.props.children, runtime, `${path}.profiler`);
-  }
-
-  if (isReactCompatProvider(element.type)) {
-    return renderWithContextProvider(
-      element.type,
-      (element.props as { value?: unknown }).value,
-      () => renderNodeToString(element.props.children, runtime, `${path}.provider`),
-    );
-  }
-
-  if (isReactCompatConsumer(element.type)) {
-    const children = element.props.children;
-
-    if (typeof children === "function") {
-      return renderNodeToString(
-        (children as (value: unknown) => ReactCompatNode)(useContext(element.type.context)),
-        runtime,
-        `${path}.consumer`,
-      );
-    }
-
-    return "";
-  }
-
-  if (isForwardRefType(element.type)) {
-    const forwardRefType = element.type;
-    return renderNodeToString(
-      renderWithRootRuntime(runtime, `${path}.forwardRef`, () =>
-        forwardRefType.render(element.props, element.ref),
-      ),
-      runtime,
-      `${path}.forwardRef`,
-    );
-  }
-
-  if (isMemoType(element.type)) {
-    return renderNodeToString(
-      {
-        ...element,
-        type: element.type.type,
-      },
-      runtime,
-      `${path}.memo`,
-    );
-  }
-
-  if (isClassComponentType(element.type)) {
-    const instance = new element.type(element.props);
-    return renderNodeToString(
-      renderWithRootRuntime(runtime, path, () => instance.render()),
-      runtime,
-      path,
-    );
-  }
-
-  if (typeof element.type === "function") {
-    const component = element.type as (props: typeof element.props) => ReactCompatNode;
-    return renderNodeToString(
-      renderWithRootRuntime(runtime, path, () => component(element.props)),
-      runtime,
-      path,
-    );
-  }
-
-  return "";
-}
-
-function isClassComponentType(
-  value: unknown,
-): value is new (props: Record<string, unknown>) => { render(): ReactCompatNode } {
-  return (
-    typeof value === "function" &&
-    typeof (value as { prototype?: { render?: unknown } }).prototype?.render === "function"
-  );
-}
-
-function renderTextareaToString(
-  element: ReactCompatElement,
-  runtime: RootRuntime,
-  path: string,
-): string {
-  const value =
-    (element.props as { value?: unknown; defaultValue?: unknown }).value ??
-    (element.props as { value?: unknown; defaultValue?: unknown }).defaultValue ??
-    element.props.children;
-  const attributes = Object.entries(element.props)
-    .filter(([name]) => name !== "value" && name !== "defaultValue")
-    .map(([name, child]) => renderHtmlAttribute(name, child))
-    .filter((attribute) => attribute !== "")
-    .join("");
-
-  return `<textarea${attributes}>${renderNodeToString(value as ReactCompatNode, runtime, `${path}.textarea`)}</textarea>`;
-}
-
-function renderSelectToString(
-  element: ReactCompatElement,
-  runtime: RootRuntime,
-  path: string,
-): string {
-  const selectedValue =
-    (element.props as { value?: unknown; defaultValue?: unknown }).value ??
-    (element.props as { value?: unknown; defaultValue?: unknown }).defaultValue;
-  const attributes = Object.entries(element.props)
-    .filter(([name]) => name !== "value" && name !== "defaultValue")
-    .map(([name, child]) => renderHtmlAttribute(name, child))
-    .filter((attribute) => attribute !== "")
-    .join("");
-
-  return `<select${attributes}>${renderSelectChildrenToString(
-    element.props.children,
-    selectedValue,
-    runtime,
-    `${path}.select`,
-  )}</select>`;
-}
-
-function renderSelectChildrenToString(
-  children: ReactCompatNode,
-  selectedValue: unknown,
-  runtime: RootRuntime,
-  path: string,
-): string {
-  const childArray = Array.isArray(children) ? children : [children];
-
-  return childArray.map((child, index) => {
-    if (!isReactCompatElement(child) || child.type !== "option") {
-      return renderNodeToString(child, runtime, `${path}.${index}`);
-    }
-
-    const optionValue =
-      (child.props as { value?: unknown }).value ?? child.props.children;
-    const selected =
-      selectedValue !== undefined && String(optionValue) === String(selectedValue);
-    const props = selected
-      ? { ...child.props, selected: true }
-      : child.props;
-
-    return renderElementToString({ ...child, props }, runtime, `${path}.${index}`);
-  }).join("");
-}
-
-function renderInputAttributesToString(props: Record<string, unknown>): string {
-  const hasValue = props.value !== undefined;
-  const hasChecked = props.checked !== undefined;
-
-  return Object.entries(props)
-    .filter(([name]) =>
-      !((name === "defaultValue" && hasValue) || (name === "defaultChecked" && hasChecked))
-    )
-    .sort(([leftName], [rightName]) =>
-      Number(isInputValueAttribute(leftName)) - Number(isInputValueAttribute(rightName))
-    )
-    .map(([name, value]) => renderHtmlAttribute(toInputHtmlAttributeName(name), value))
-    .filter((attribute) => attribute !== "")
-    .join("");
-}
-
-function renderHtmlAttribute(name: string, value: unknown): string {
-  if (
-    name === "children" ||
-    name === "key" ||
-    name === "ref" ||
-    /^on[A-Z]/.test(name) ||
-    value === null ||
-    value === undefined ||
-    value === false ||
-    typeof value === "function"
-  ) {
-    return "";
-  }
-
-  if (name === "style") {
-    const style = renderStyleAttribute(value);
-    return style === "" ? "" : ` style="${escapeHtml(style)}"`;
-  }
-
-  const attributeName = toHtmlAttributeName(name);
-  if (isDangerousHtmlAttribute(attributeName)) {
-    return isDangerousHtmlOptIn(value)
-      ? ` ${attributeName}="${escapeHtml(value.__html)}"`
-      : "";
-  }
-
-  if (typeof value === "object") {
-    return "";
-  }
-
-  if (value === true) {
-    return ` ${attributeName}=""`;
-  }
-
-  return ` ${attributeName}="${escapeHtml(value)}"`;
-}
-
-function isInputValueAttribute(name: string): boolean {
-  return name === "value" || name === "defaultValue";
-}
-
-function toInputHtmlAttributeName(name: string): string {
-  if (name === "defaultValue") {
-    return "value";
-  }
-
-  if (name === "defaultChecked") {
-    return "checked";
-  }
-
-  return name;
-}
-
-function toHtmlAttributeName(name: string): string {
-  return HTML_ATTRIBUTE_ALIASES[name] ?? name;
-}
-
-const HTML_ATTRIBUTE_ALIASES: Record<string, string> = {
-  acceptCharset: "accept-charset",
-  autoFocus: "autofocus",
-  autoPlay: "autoplay",
-  charSet: "charset",
-  className: "class",
-  colSpan: "colspan",
-  contentEditable: "contenteditable",
-  crossOrigin: "crossorigin",
-  encType: "enctype",
-  formAction: "formaction",
-  frameBorder: "frameborder",
-  htmlFor: "for",
-  httpEquiv: "http-equiv",
-  maxLength: "maxlength",
-  minLength: "minlength",
-  noValidate: "novalidate",
-  playsInline: "playsinline",
-  readOnly: "readOnly",
-  rowSpan: "rowspan",
-  spellCheck: "spellcheck",
-  srcDoc: "srcdoc",
-  srcSet: "srcset",
-  tabIndex: "tabindex",
-  useMap: "usemap",
-};
-
-function renderStyleAttribute(value: unknown): string {
-  if (typeof value !== "object" || value === null) {
-    return "";
-  }
-
-  return Object.entries(value)
-    .filter(([, propertyValue]) =>
-      propertyValue !== null &&
-      propertyValue !== undefined &&
-      typeof propertyValue !== "boolean" &&
-      propertyValue !== "",
-    )
-    .map(([name, propertyValue]) =>
-      `${toKebabCase(name)}:${renderCssValue(name, propertyValue)}`,
-    )
-    .join(";");
-}
-
-function renderCssValue(name: string, value: unknown): string {
-  if (typeof value !== "number" || value === 0 || isUnitlessCssProperty(name)) {
-    return String(value);
-  }
-
-  return `${value}px`;
-}
-
-function toKebabCase(value: string): string {
-  return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
-
-function isUnitlessCssProperty(name: string): boolean {
-  return (
-    name === "flex" ||
-    name === "fontWeight" ||
-    name === "lineHeight" ||
-    name === "opacity" ||
-    name === "order" ||
-    name === "zIndex" ||
-    name === "zoom"
-  );
-}
-
-const voidHtmlElements = new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr",
-]);
-
-function isForwardRefType(value: unknown): value is ForwardRefType {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    (value as { $$typeof?: unknown }).$$typeof === FORWARD_REF_TYPE
-  );
-}
-
-function isMemoType(value: unknown): value is MemoType {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    (value as { $$typeof?: unknown }).$$typeof === MEMO_TYPE
-  );
-}
-
 function readThenable<T>(thenable: PromiseLike<T>): T {
   const record = thenable as PromiseLike<T> & {
     status?: "pending" | "fulfilled" | "rejected";
@@ -1482,6 +1383,15 @@ export function flushSyncUpdates<T>(callback: () => T): T {
   }
 }
 
+export function runWithHostCommit<T>(callback: () => T): T {
+  hookRenderState.hostCommitDepth += 1;
+  try {
+    return callback();
+  } finally {
+    hookRenderState.hostCommitDepth -= 1;
+  }
+}
+
 export function useTransition(): [boolean, StartTransition] {
   const [pending, setPending] = runWithoutDevToolsHookTracking(() => useState(false));
   const startTransitionWithPending: StartTransition = (scope) => {
@@ -1640,6 +1550,7 @@ function useEffectImpl(
 
   const shouldRun =
     slot === undefined ||
+    slot.mounted !== true ||
     deps === undefined ||
     slot.deps === undefined ||
     !areHookInputsEqual(deps, slot.deps);
@@ -1663,7 +1574,8 @@ function useEffectImpl(
   }
 
   slot.strictReplay =
-    runtime.strictModeDepth > 0 && effectKind !== "insertion";
+    (runtime.strictModeDepth > 0 || runtime.strictReplayDepth > 0) &&
+    effectKind !== "insertion";
 
   if (shouldRun) {
     const queue =
@@ -1680,7 +1592,7 @@ function recordExternalStoreCheck<T>(
   getSnapshot: () => T,
   value: T,
 ): void {
-  currentRuntime?.externalStoreChecks.push({ getSnapshot, value });
+  hookRenderState.currentRuntime?.externalStoreChecks.push({ getSnapshot, value });
 }
 
 function flushPendingEffects(queue: PendingEffect[]): PendingEffect[] {
@@ -1701,6 +1613,7 @@ function flushPendingEffects(queue: PendingEffect[]): PendingEffect[] {
     } else {
       delete slot.cleanup;
     }
+    slot.mounted = true;
 
     if (shouldReplay) {
       strictReplay.push({ slot });
@@ -1795,9 +1708,21 @@ function scheduleInstanceUpdate(
   runtime: RootRuntime,
   instance: ComponentInstance,
 ): void {
+  if (instance.disposed === true) {
+    return;
+  }
+
   instance.dirty = true;
   if (transitionDepth === 0) {
     syncVersion += 1;
+    if (hookRenderState.hostCommitDepth > 0) {
+      hookRenderState.queuedHostCommitRerenders.add(runtime);
+      return;
+    }
+    if (runtime.effectFlushPhase !== undefined) {
+      hookRenderState.queuedEffectFlushRerenders.add(runtime);
+      return;
+    }
     if (eventBatchDepth > 0) {
       queueEventRerender(runtime);
       return;
@@ -1811,6 +1736,82 @@ function scheduleInstanceUpdate(
   }
 }
 
+function flushHostCommitRerenders(): void {
+  if (
+    hookRenderState.hostCommitDepth > 0 ||
+    hookRenderState.queuedHostCommitRerenders.size === 0
+  ) {
+    return;
+  }
+
+  const runtimes = [...hookRenderState.queuedHostCommitRerenders];
+  hookRenderState.queuedHostCommitRerenders.clear();
+  for (const runtime of runtimes) {
+    const hasDirtyInstance = Array.from(runtime.instances.values()).some(
+      (instance) => instance.dirty,
+    );
+    clearHostCommitStateBaselines(runtime);
+
+    if (hasDirtyInstance) {
+      runtime.rerender("sync");
+    }
+  }
+}
+
+function flushEffectFlushRerenders(): void {
+  if (
+    effectFlushRerenderDepth > 0 ||
+    hookRenderState.queuedEffectFlushRerenders.size === 0
+  ) {
+    return;
+  }
+
+  effectFlushRerenderDepth += 1;
+  try {
+    for (
+      let attempt = 0;
+      attempt < 3 && hookRenderState.queuedEffectFlushRerenders.size > 0;
+      attempt += 1
+    ) {
+      const runtimes = [...hookRenderState.queuedEffectFlushRerenders];
+      hookRenderState.queuedEffectFlushRerenders.clear();
+      for (const runtime of runtimes) {
+        const hasDirtyInstance = Array.from(runtime.instances.values()).some(
+          (instance) => instance.dirty,
+        );
+
+        if (hasDirtyInstance) {
+          runtime.rerender("sync");
+        }
+      }
+    }
+    hookRenderState.queuedEffectFlushRerenders.clear();
+  } finally {
+    effectFlushRerenderDepth -= 1;
+  }
+}
+
+function updateHostCommitDirtyState(
+  instance: ComponentInstance,
+): void {
+  instance.dirty = instance.hooks.some(
+    (slot) =>
+      slot.kind === "state" &&
+      Object.hasOwn(slot, "hostCommitValue") &&
+      !Object.is(slot.hostCommitValue, slot.value),
+  );
+}
+
+function clearHostCommitStateBaselines(runtime: RootRuntime): void {
+  for (const instance of runtime.instances.values()) {
+    for (const slot of instance.hooks) {
+      if (slot.kind === "state") {
+        delete slot.hostCommitValue;
+      }
+    }
+  }
+}
+
 function getCacheLeaf(
   scope: CacheScope,
   callback: (...args: never[]) => unknown,
@@ -1861,7 +1862,7 @@ function createCacheTrieNode(): CacheTrieNode {
 }
 
 function getCurrentCacheScope(): CacheScope | undefined {
-  return currentCacheScope ?? getGlobalCacheScope();
+  return hookRenderState.currentCacheScope ?? getGlobalCacheScope();
 }
 
 function getGlobalCacheScope(): CacheScope | undefined {
@@ -1901,9 +1902,11 @@ function cleanupInactiveInstances(runtime: RootRuntime): void {
 }
 
 function cleanupInstance(instance: ComponentInstance): void {
+  instance.disposed = true;
   for (const slot of instance.hooks) {
     if (slot?.kind === "effect") {
       slot.disposed = true;
+      slot.mounted = false;
       slot.cleanup?.();
       delete slot.cleanup;
     }
@@ -1911,19 +1914,19 @@ function cleanupInstance(instance: ComponentInstance): void {
 }
 
 function requireRuntime(): RootRuntime {
-  if (currentRuntime === undefined) {
+  if (hookRenderState.currentRuntime === undefined) {
     throw new Error("Hooks can only be called while rendering.");
   }
 
-  return currentRuntime;
+  return hookRenderState.currentRuntime;
 }
 
 function requireInstance(): ComponentInstance {
-  if (currentInstance === undefined) {
+  if (hookRenderState.currentInstance === undefined) {
     throw new Error("Hooks can only be called while rendering.");
   }
 
-  return currentInstance;
+  return hookRenderState.currentInstance;
 }
 
 function areHookInputsEqual(