@reckona/mreact-compat 0.0.91 → 0.0.92

package/src/host-reconciler.ts

@@ -3,6 +3,7 @@ import {
   ERROR_BOUNDARY_TYPE,
   FORWARD_REF_TYPE,
   Fragment,
+  HOST_OWN_PROPS_META,
   LAZY_TYPE,
   MEMO_TYPE,
   Profiler,
@@ -16,22 +17,36 @@ import {
   type ReactCompatNode,
 } from "./element.js";
 import {
+  consumerContext,
   isReactCompatConsumer,
   isReactCompatProvider,
   renderWithContextProvider,
   useContext,
 } from "./context.js";
 import { applyPostChildFormProps, applyProps } from "./dom-props.js";
-import { syncChildNodes, syncScopedChildNodes } from "./dom-children.js";
+import { syncChildNodes, syncOwnedChildNodes, syncScopedChildNodes } from "./dom-children.js";
 import { setLogicalEventParent } from "./host-event-binder.js";
+import { NoFlags, Placement, Update } from "./fiber-flags.js";
+import {
+  createHostElement,
+  hostElementMatches,
+  isHostElement,
+  namespaceForHostChildren,
+  namespaceForHostElement,
+  type HostNamespace,
+} from "./dom-host-rules.js";
 import { createFiber, createWorkInProgress, type Fiber, type FiberRoot } from "./fiber.js";
 import {
   renderWithRootRuntime,
   renderWithProfiler,
-  renderWithStrictMode,
+  renderWithStrictModeMemoCapture,
+  renderStrictModeReplay,
+  runWithHostCommit,
   restoreRuntimeSnapshot,
   takeRuntimeSnapshot,
   getDevToolsHookState,
+  hasContextDependency,
+  hasChangedContextDependency,
   type RootRuntime,
 } from "./hooks.js";
 import { isThenable } from "./thenable.js";
@@ -40,7 +55,7 @@ import {
   recoverClassComponentError,
   renderClassComponentWithRuntime,
 } from "./class-component.js";
-import { areMemoPropsEqual, getPendingProps } from "./prop-comparison.js";
+import { areMemoPropsEqual, getPendingProps, shallowEqual } from "./prop-comparison.js";
 import {
   reportElementTextMismatch,
   reportExtraHydrationNodes,
@@ -58,16 +73,30 @@ interface MemoFiberState {
   instanceKeys: string[];
 }
 
+interface FunctionFiberState {
+  element: ReactCompatElement;
+  props: Record<string, unknown>;
+  instanceKeys: string[];
+  hasContextDependencies: boolean;
+}
+
 interface SuspenseFiberState {
   didSuspend: boolean;
 }
 
+const committedPortalContainers = new Set<Element>();
+
 interface FiberHydrationOptions extends RenderOptions {
   previousNodes?: readonly Node[];
   resumeId?: string;
   consumeResumeMarkers?: boolean;
+  namespace?: HostNamespace;
+  documentRef?: Document;
 }
 
+const SKIP_COMMIT_PATH = "\0";
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
 interface FiberReconcileResult {
   fiber: Fiber | undefined;
   consumed: number;
@@ -166,16 +195,18 @@ export function renderHostFiberRoot(
   options: FiberHydrationOptions = {},
 ): Fiber {
   const workInProgress = createWorkInProgress(root.current, { children: element });
+  const rootDocument = root.container.ownerDocument;
   const result = reconcileHostChild(
     workInProgress,
     root.current.child,
     element,
     runtime,
     options.previousNodes === undefined ? "0" : "",
-    options,
+    { ...options, documentRef: options.documentRef ?? rootDocument },
   );
   workInProgress.child = result.fiber;
   workInProgress.memoizedProps = { children: element };
+  root.refCleanupKnown = true;
   return workInProgress;
 }
 
@@ -204,8 +235,29 @@ export function commitHostFiberRoot(
   finishedWork: Fiber,
   options: RenderOptions = {},
 ): void {
-  const nodes = commitHostChildren(finishedWork.child, root.container, root.container, "0", options);
-  syncChildNodes(root.container, nodes);
+  runWithHostCommit(() => {
+    try {
+      committedPortalContainers.clear();
+      const commitPath = getRootCommitPath(options);
+      if (!hasChildListMutation(finishedWork)) {
+        commitHostDirtyChildren(finishedWork.child, root.container, root.container, commitPath, options);
+        return;
+      }
+
+      if (
+        !finishedWork.childListChanged &&
+        finishedWork.subtreeChildListChanged &&
+        commitHostKeyedChildListMutation(finishedWork.child, root.container, root.container, commitPath, options)
+      ) {
+        return;
+      }
+
+      const nodes = commitHostChildren(finishedWork.child, root.container, root.container, commitPath, options);
+      syncChildNodes(root.container, nodes);
+    } finally {
+      committedPortalContainers.clear();
+    }
+  });
 }
 
 export function commitHydratingHostFiberRoot(
@@ -214,9 +266,16 @@ export function commitHydratingHostFiberRoot(
   scope: HydrationScope,
   options: FiberHydrationOptions = {},
 ): void {
-  const eventRoot = root.container;
-  const nodes = commitHostChildren(finishedWork.child, scope.parent, eventRoot, "", options);
-  syncScopedChildNodes(scope.parent, scope.before, scope.after, nodes);
+  runWithHostCommit(() => {
+    try {
+      committedPortalContainers.clear();
+      const eventRoot = root.container;
+      const nodes = commitHostChildren(finishedWork.child, scope.parent, eventRoot, "", options);
+      syncScopedChildNodes(scope.parent, scope.before, scope.after, nodes);
+    } finally {
+      committedPortalContainers.clear();
+    }
+  });
 
   if (options.consumeResumeMarkers === true) {
     scope.before?.parentNode?.removeChild(scope.before);
@@ -232,17 +291,70 @@ function reconcileHostChild(
   path: string,
   options: FiberHydrationOptions = {},
 ): FiberReconcileResult {
-  const children = normalizeChildren(node);
-  const existingByKey = collectExistingKeyedFibers(currentFirstChild);
+  resetFiberRefSubtree(parent);
+  parent.subtreeFlags = NoFlags;
+  parent.childListChanged = false;
+  parent.subtreeChildListChanged = false;
+
+  if (node === null || node === undefined || typeof node === "boolean") {
+    parent.childListChanged = currentFirstChild !== undefined;
+    return { fiber: undefined, consumed: 0 };
+  }
+
+  const children = Array.isArray(node) ? node : undefined;
+  const rowResult =
+    children === undefined
+      ? undefined
+      : reconcileKeyedRowHostChildren(parent, currentFirstChild, children, options);
+  if (rowResult !== undefined) {
+    return rowResult;
+  }
+
+  const childCount = children === undefined ? 1 : children.length;
+  const hasKeyedChildren = children !== undefined && hasKeyedChild(children);
+  let existingByKey: Map<string, Fiber> | undefined;
+  let currentKeyed: Fiber | undefined = currentFirstChild;
   let currentUnkeyed = currentFirstChild;
   let first: Fiber | undefined;
   let previous: Fiber | undefined;
   let consumed = 0;
+  let skipRemainingKeyedLookup = false;
 
-  children.forEach((child, index) => {
+  for (let index = 0; index < childCount; index += 1) {
+    const child = children === undefined ? node : children[index];
     const key = getNodeKey(child);
-    const matchedCurrent =
-      key === undefined ? currentUnkeyed : existingByKey.get(key);
+    let matchedCurrent: Fiber | undefined;
+
+    if (key === undefined) {
+      matchedCurrent = currentUnkeyed;
+    } else if (skipRemainingKeyedLookup) {
+      matchedCurrent = undefined;
+    } else if (existingByKey !== undefined) {
+      matchedCurrent = existingByKey.get(key);
+    } else if (currentKeyed?.key === key) {
+      matchedCurrent = currentKeyed;
+      currentKeyed = currentKeyed.sibling;
+    } else if (
+      children !== undefined &&
+      currentKeyed?.sibling?.key === key &&
+      canSkipSingleDeletedKeyedFiber(children, index, currentKeyed.sibling)
+    ) {
+      matchedCurrent = currentKeyed.sibling;
+      currentKeyed = currentKeyed.sibling.sibling;
+    } else {
+      if (
+        children !== undefined &&
+        hasKeyedChildren &&
+        canSkipRemainingKeyedLookup(currentKeyed, children, index)
+      ) {
+        skipRemainingKeyedLookup = true;
+        currentKeyed = undefined;
+      } else if (hasKeyedChildren) {
+        existingByKey = collectExistingKeyedFibers(currentKeyed);
+        matchedCurrent = existingByKey.get(key);
+      }
+    }
+
     const previousNodes =
       options.previousNodes === undefined
         ? undefined
@@ -253,13 +365,13 @@ function reconcileHostChild(
       child,
       key,
       runtime,
-      joinPath(path, getNodePathSegment(child, index)),
+      getReconcileChildPath(path, child, index, options),
       previousNodes === undefined ? options : { ...options, previousNodes },
     );
     const fiber = result.fiber;
 
     if (fiber === undefined) {
-      return;
+      continue;
     }
 
     if (key === undefined) {
@@ -275,7 +387,7 @@ function reconcileHostChild(
 
     fiber.return = parent;
     fiber.sibling = undefined;
-    fiber.pendingProps = getPendingProps(child);
+    bubbleHostChild(parent, fiber);
     if (
       fiber.tag !== "memo" &&
       fiber.tag !== "function-component" &&
@@ -288,11 +400,479 @@ function reconcileHostChild(
       fiber.memoizedState = index;
     }
     previous = fiber;
-  });
+  }
+
+  parent.childListChanged = childFiberListShapeChanged(currentFirstChild, first);
 
   return { fiber: first, consumed };
 }
 
+function reconcileKeyedRowHostChildren(
+  parent: Fiber,
+  currentFirstChild: Fiber | undefined,
+  children: readonly ReactCompatNode[],
+  options: FiberHydrationOptions,
+): FiberReconcileResult | undefined {
+  if (
+    children.length === 0 ||
+    currentFirstChild === undefined ||
+    options.previousNodes !== undefined ||
+    !shouldUseDirectHostTextChild()
+  ) {
+    return undefined;
+  }
+
+  let currentKeyed: Fiber | undefined = currentFirstChild;
+  let first: Fiber | undefined;
+  let previous: Fiber | undefined;
+  let listShapeChanged = currentFirstChild === undefined;
+  let skipRemainingKeyedLookup = false;
+  let subtreeFlags = NoFlags;
+  let subtreeChildListChanged = false;
+  let hasRefSubtree = false;
+  const currentSiblingCount = countFiberSiblings(currentFirstChild);
+  const canReuseUnchangedRows =
+    currentSiblingCount === children.length ||
+    isKeyedAppendOnly(currentFirstChild, children, currentSiblingCount);
+  const row = createKeyedRowHostElementScratch();
+
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index];
+
+    if (!readKeyedRowHostElement(child, row)) {
+      return undefined;
+    }
+
+    let matchedCurrent: Fiber | undefined;
+
+    if (skipRemainingKeyedLookup) {
+      matchedCurrent = undefined;
+    } else if (currentKeyed === undefined) {
+      listShapeChanged = true;
+      skipRemainingKeyedLookup = true;
+      matchedCurrent = undefined;
+    } else if (currentKeyed?.key === row.key) {
+      matchedCurrent = currentKeyed;
+      currentKeyed = currentKeyed.sibling;
+    } else if (
+      currentKeyed?.sibling?.key === row.key &&
+      canSkipSingleDeletedKeyedFiber(children, index, currentKeyed.sibling)
+    ) {
+      listShapeChanged = true;
+      matchedCurrent = currentKeyed.sibling;
+      currentKeyed = currentKeyed.sibling.sibling;
+    } else if (canSkipRemainingKeyedLookup(currentKeyed, children, index)) {
+      listShapeChanged = true;
+      skipRemainingKeyedLookup = true;
+      currentKeyed = undefined;
+      matchedCurrent = undefined;
+    } else {
+      return undefined;
+    }
+
+    const fiber =
+      matchedCurrent === undefined
+        ? createKeyedRowHostFiber(parent, undefined, row, options)
+        : (canReuseUnchangedRows ? getReusableKeyedRowHostFiber(matchedCurrent, row) : undefined) ??
+          createKeyedRowHostFiber(parent, matchedCurrent, row, options);
+
+    if (first === undefined) {
+      first = fiber;
+    } else if (previous !== undefined) {
+      previous.sibling = fiber;
+    }
+
+    fiber.return = parent;
+    fiber.sibling = undefined;
+    if (fiber.hasRefSubtree) {
+      hasRefSubtree = true;
+    }
+    subtreeFlags |= fiber.flags | fiber.subtreeFlags;
+    subtreeChildListChanged =
+      subtreeChildListChanged ||
+      fiber.childListChanged ||
+      fiber.subtreeChildListChanged;
+    if (fiber.memoizedState === undefined) {
+      fiber.memoizedState = index;
+    }
+    previous = fiber;
+  }
+
+  if (currentKeyed !== undefined) {
+    listShapeChanged = true;
+  }
+
+  parent.hasRefSubtree = hasRefSubtree;
+  parent.subtreeFlags = subtreeFlags;
+  parent.subtreeChildListChanged = subtreeChildListChanged;
+  parent.childListChanged = listShapeChanged;
+  return { fiber: first, consumed: 0 };
+}
+
+function countFiberSiblings(first: Fiber): number {
+  let count = 0;
+  let cursor: Fiber | undefined = first;
+
+  while (cursor !== undefined) {
+    count += 1;
+    cursor = cursor.sibling;
+  }
+
+  return count;
+}
+
+function isKeyedAppendOnly(
+  currentFirstChild: Fiber,
+  children: readonly ReactCompatNode[],
+  currentSiblingCount: number,
+): boolean {
+  if (children.length <= currentSiblingCount) {
+    return false;
+  }
+
+  let current: Fiber | undefined = currentFirstChild;
+
+  for (let index = 0; index < currentSiblingCount; index += 1) {
+    if (current === undefined || current.key !== getNodeKey(children[index])) {
+      return false;
+    }
+    current = current.sibling;
+  }
+
+  return current === undefined;
+}
+
+function getReusableKeyedRowHostFiber(
+  current: Fiber,
+  row: KeyedRowHostElement,
+): Fiber | undefined {
+  if (
+    current.tag !== "host-component" ||
+    current.type !== row.type ||
+    current.hydrateExisting ||
+    current.child !== undefined ||
+    !isHostElement(current.stateNode)
+  ) {
+    return undefined;
+  }
+
+  const previousProps = current.memoizedProps ?? current.pendingProps;
+
+  if (typeof previousProps !== "object" || previousProps === null) {
+    return undefined;
+  }
+
+  const previousRecord = previousProps as Record<string, unknown>;
+
+  if (
+    getHostOwnPropsMeta(previousRecord) !== row.meta ||
+    getDirectHostTextChild(previousRecord.children) !== row.text
+  ) {
+    return undefined;
+  }
+
+  current.pendingProps = row.element.props;
+  current.flags = NoFlags;
+  current.subtreeFlags = NoFlags;
+  current.childListChanged = false;
+  current.subtreeChildListChanged = false;
+  current.hostChildListChanged = false;
+  current.hasRefSubtree = false;
+  return current;
+}
+
+interface KeyedRowHostElement {
+  element: ReactCompatElement;
+  key: string;
+  type: string;
+  meta: number;
+  text: string;
+}
+
+function createKeyedRowHostElementScratch(): KeyedRowHostElement {
+  return {
+    element: undefined as unknown as ReactCompatElement,
+    key: "",
+    type: "",
+    meta: 0,
+    text: "",
+  };
+}
+
+function readKeyedRowHostElement(
+  node: ReactCompatNode,
+  row: KeyedRowHostElement,
+): boolean {
+  if (
+    !isReactCompatElement(node) ||
+    typeof node.type !== "string" ||
+    node.key === null ||
+    node.ref !== null
+  ) {
+    return false;
+  }
+
+  const props = node.props as Record<string, unknown>;
+  const meta = getHostOwnPropsMeta(props);
+  const text = meta === undefined ? undefined : getDirectHostTextChild(props.children);
+
+  if (meta === undefined || text === undefined) {
+    return false;
+  }
+
+  row.element = node;
+  row.key = node.key;
+  row.type = node.type;
+  row.meta = meta;
+  row.text = text;
+  return true;
+}
+
+function createKeyedRowHostFiber(
+  parent: Fiber,
+  current: Fiber | undefined,
+  row: KeyedRowHostElement,
+  options: FiberHydrationOptions,
+): Fiber {
+  const node = row.element;
+  const elementNamespace = namespaceForHostElement(options.namespace ?? "html", row.type);
+  const fiber =
+    current?.tag === "host-component" && current.type === row.type
+      ? createWorkInProgress(current, node.props)
+      : createFiber("host-component", node.props, row.key);
+
+  fiber.type = row.type;
+  fiber.stateNode =
+    current?.tag === "host-component" &&
+    current.type === row.type &&
+    isHostElement(current.stateNode) &&
+    hostElementMatches(current.stateNode, row.type, elementNamespace)
+      ? current.stateNode
+      : createHostElement(getDocumentRef(options), row.type, options.namespace ?? "html");
+  fiber.child = undefined;
+  fiber.pendingProps = node.props;
+  fiber.hostChildListChanged = false;
+  fiber.hasRefSubtree = false;
+
+  if (current === undefined || fiber.alternate !== current) {
+    fiber.flags |= Placement;
+    fiber.hostChildListChanged = true;
+    return fiber;
+  }
+
+  const previousProps = current.memoizedProps ?? current.pendingProps;
+  const previousMeta =
+    typeof previousProps === "object" && previousProps !== null
+      ? getHostOwnPropsMeta(previousProps as Record<string, unknown>)
+      : undefined;
+  const previousText = getDirectHostTextChild(hostFiberChildrenProp(previousProps));
+
+  if (previousMeta !== row.meta || previousText !== row.text) {
+    fiber.flags |= Update;
+  }
+
+  return fiber;
+}
+
+function canReuseStaticHostSubtree(fiber: Fiber | undefined): boolean {
+  let cursor = fiber;
+
+  while (cursor !== undefined) {
+    if (
+      cursor.tag !== "host-component" &&
+      cursor.tag !== "host-text" &&
+      cursor.tag !== "fragment" &&
+      cursor.tag !== "strict-mode"
+    ) {
+      return false;
+    }
+
+    if (cursor.child !== undefined && !canReuseStaticHostSubtree(cursor.child)) {
+      return false;
+    }
+
+    cursor = cursor.sibling;
+  }
+
+  return true;
+}
+
+function canSkipSingleDeletedKeyedFiber(
+  children: readonly ReactCompatNode[],
+  index: number,
+  matched: Fiber,
+): boolean {
+  const nextKey = index + 1 < children.length ? getNodeKey(children[index + 1]) : undefined;
+  const afterMatched = matched.sibling;
+
+  return nextKey === undefined ? afterMatched === undefined : afterMatched?.key === nextKey;
+}
+
+function canSkipRemainingKeyedLookup(
+  current: Fiber | undefined,
+  children: readonly ReactCompatNode[],
+  startIndex: number,
+): boolean {
+  const currentRange = readContiguousNumericFiberKeyRange(current);
+
+  if (currentRange === undefined) {
+    return false;
+  }
+
+  const nextRange = readContiguousNumericNodeKeyRange(children, startIndex);
+
+  if (nextRange === undefined) {
+    return false;
+  }
+
+  return (
+    currentRange.end < nextRange.start ||
+    nextRange.end < currentRange.start
+  );
+}
+
+function readContiguousNumericFiberKeyRange(
+  fiber: Fiber | undefined,
+): { start: number; end: number } | undefined {
+  let cursor = fiber;
+  let start: number | undefined;
+  let previous: number | undefined;
+
+  while (cursor !== undefined) {
+    const value = parseNumericKey(cursor.key);
+
+    if (value === undefined || (previous !== undefined && value !== previous + 1)) {
+      return undefined;
+    }
+
+    start ??= value;
+    previous = value;
+    cursor = cursor.sibling;
+  }
+
+  return start === undefined || previous === undefined
+    ? undefined
+    : { start, end: previous };
+}
+
+function readContiguousNumericNodeKeyRange(
+  children: readonly ReactCompatNode[],
+  startIndex: number,
+): { start: number; end: number } | undefined {
+  let start: number | undefined;
+  let previous: number | undefined;
+
+  for (let index = startIndex; index < children.length; index += 1) {
+    const value = parseNumericKey(getNodeKey(children[index]));
+
+    if (value === undefined || (previous !== undefined && value !== previous + 1)) {
+      return undefined;
+    }
+
+    start ??= value;
+    previous = value;
+  }
+
+  return start === undefined || previous === undefined
+    ? undefined
+    : { start, end: previous };
+}
+
+function parseNumericKey(key: string | undefined): number | undefined {
+  if (key === undefined || key.length === 0) {
+    return undefined;
+  }
+
+  const value = Number(key);
+
+  return Number.isSafeInteger(value) && String(value) === key ? value : undefined;
+}
+
+function childFiberListShapeChanged(
+  current: Fiber | undefined,
+  next: Fiber | undefined,
+): boolean {
+  let currentCursor = current;
+  let nextCursor = next;
+
+  while (currentCursor !== undefined && nextCursor !== undefined) {
+    const isSameSlot =
+      nextCursor === currentCursor ||
+      nextCursor.alternate === currentCursor;
+
+    if (
+      !isSameSlot ||
+      currentCursor.tag !== nextCursor.tag ||
+      currentCursor.type !== nextCursor.type ||
+      currentCursor.key !== nextCursor.key
+    ) {
+      return true;
+    }
+
+    currentCursor = currentCursor.sibling;
+    nextCursor = nextCursor.sibling;
+  }
+
+  return currentCursor !== undefined || nextCursor !== undefined;
+}
+
+function bubbleHostChild(parent: Fiber, child: Fiber): void {
+  if (child.hasRefSubtree) {
+    parent.hasRefSubtree = true;
+  }
+  parent.subtreeFlags |= child.flags | child.subtreeFlags;
+  parent.subtreeChildListChanged =
+    parent.subtreeChildListChanged ||
+    child.childListChanged ||
+    child.subtreeChildListChanged;
+}
+
+function resetFiberRefSubtree(fiber: Fiber): void {
+  fiber.hasRefSubtree = false;
+}
+
+function includeNodeRef(fiber: Fiber, node: ReactCompatNode): void {
+  fiber.hasRefSubtree =
+    fiber.hasRefSubtree ||
+    (isReactCompatElement(node) && node.ref !== null);
+}
+
+function markHostFiberEffects(
+  fiber: Fiber,
+  current: Fiber | undefined,
+  node: ReactCompatNode,
+): void {
+  if (current === undefined || fiber.alternate !== current) {
+    fiber.flags |= Placement;
+    fiber.hostChildListChanged = true;
+    return;
+  }
+
+  if (fiber.tag === "host-text") {
+    if (!Object.is(current.memoizedProps ?? current.pendingProps, fiber.pendingProps)) {
+      fiber.flags |= Update;
+    }
+    return;
+  }
+
+  if (fiber.tag !== "host-component") {
+    return;
+  }
+
+  const previousProps = current.memoizedProps ?? current.pendingProps;
+  const nextProps = fiber.pendingProps as Record<string, unknown>;
+
+  fiber.hostChildListChanged = hostChildListChanged(previousProps, nextProps);
+
+  if (!hostOwnPropsEqual(previousProps, nextProps) || hostDirectTextChildChanged(previousProps, nextProps)) {
+    fiber.flags |= Update;
+  }
+
+  if (isReactCompatElement(node) && node.ref !== null) {
+    fiber.flags |= Update;
+  }
+}
+
 function createHostFiber(
   parent: Fiber,
   current: Fiber | undefined,
@@ -301,6 +881,48 @@ function createHostFiber(
   runtime: RootRuntime | undefined,
   path: string,
   options: FiberHydrationOptions = {},
+): FiberReconcileResult {
+  const result = createHostFiberImpl(parent, current, node, key, runtime, path, options);
+
+  if (result.fiber !== undefined) {
+    if (canFinalizeNewHostFiber(result.fiber, current, node, options)) {
+      result.fiber.flags |= Placement;
+      result.fiber.hostChildListChanged = true;
+      return result;
+    }
+
+    result.fiber.pendingProps = getPendingProps(node);
+    includeNodeRef(result.fiber, node);
+    markHostFiberEffects(result.fiber, current, node);
+  }
+
+  return result;
+}
+
+function canFinalizeNewHostFiber(
+  fiber: Fiber,
+  current: Fiber | undefined,
+  node: ReactCompatNode,
+  options: FiberHydrationOptions,
+): boolean {
+  return (
+    current === undefined &&
+    options.previousNodes === undefined &&
+    fiber.tag === "host-component" &&
+    isReactCompatElement(node) &&
+    node.ref === null &&
+    typeof node.type === "string"
+  );
+}
+
+function createHostFiberImpl(
+  parent: Fiber,
+  current: Fiber | undefined,
+  node: ReactCompatNode,
+  key: string | undefined,
+  runtime: RootRuntime | undefined,
+  path: string,
+  options: FiberHydrationOptions = {},
 ): FiberReconcileResult {
   if (node === null || node === undefined || typeof node === "boolean") {
     return { fiber: undefined, consumed: 0 };
@@ -322,7 +944,7 @@ function createHostFiber(
         ? existing
         : current?.tag === "host-text" && current.stateNode instanceof Text
           ? current.stateNode
-          : document.createTextNode("");
+          : getDocumentRef(options).createTextNode("");
 
     if (existing instanceof Text && existing.data !== String(node)) {
       reportRecoverable(
@@ -522,7 +1144,7 @@ function createHostFiber(
     const childResult = reconcileHostChild(
       fiber,
       current?.tag === "context-consumer" ? current.child : undefined,
-      render(useContext(node.type.context)),
+      render(useContext(consumerContext(node.type))),
       runtime,
       `${path}.consumer`,
       options,
@@ -544,6 +1166,7 @@ function createHostFiber(
     fiber.type = forwardRefType;
     const rendered = renderWithRootRuntime(runtime, path, () =>
       forwardRefType.render(node.props, node.ref),
+      forwardRefType,
     );
     fiber.memoizedState = getDevToolsHookState(runtime, path);
     const childOptions = withHydrationComponentStack(
@@ -582,6 +1205,7 @@ function createHostFiber(
     if (
       previousMemoState !== undefined &&
       !hasDirtyInstance(runtime, previousMemoState.instanceKeys) &&
+      !hasUnflushedMountEffectInstance(runtime, previousMemoState.instanceKeys) &&
       areMemoPropsEqual(memoType, previousMemoState.props, node.props)
     ) {
       markActiveInstanceKeys(runtime, previousMemoState.instanceKeys);
@@ -604,6 +1228,11 @@ function createHostFiber(
       options,
     );
     fiber.child = childResult.fiber;
+    if (fiber.child !== undefined) {
+      fiber.child.return = fiber;
+      fiber.child.sibling = undefined;
+      bubbleHostChild(fiber, fiber.child);
+    }
     fiber.memoizedState = {
       props: { ...node.props },
       instanceKeys: collectInstanceKeys(runtime, memoPath),
@@ -638,6 +1267,11 @@ function createHostFiber(
         options,
       );
       fiber.child = childResult.fiber;
+      if (fiber.child !== undefined) {
+        fiber.child.return = fiber;
+        fiber.child.sibling = undefined;
+        bubbleHostChild(fiber, fiber.child);
+      }
       return { fiber, consumed: childResult.consumed };
     }
 
@@ -680,11 +1314,13 @@ function createHostFiber(
         ? createWorkInProgress(current, node.props)
         : createFiber("class-component", node.props, key);
     fiber.type = classType;
+    const previousClassChildKeys = collectInstanceKeys(runtime, `${path}.class`);
     const rendered = renderClassComponentWithRuntime(
       classType,
       node.props,
       runtime,
       path,
+      { hasDirtyDescendant: hasDirtyInstance(runtime, previousClassChildKeys) },
     );
     applyRef(node.ref, rendered.kind === "skip" ? current?.stateNode : rendered.instance);
 
@@ -738,13 +1374,44 @@ function createHostFiber(
       return { fiber: undefined, consumed: 0 };
     }
 
+    const previousFunctionState =
+      current?.tag === "function-component"
+        ? (current.stateNode as FunctionFiberState | undefined)
+        : undefined;
     const fiber =
       current?.tag === "function-component" && current.type === node.type
         ? createWorkInProgress(current, node.props)
         : createFiber("function-component", node.props, key);
     fiber.type = node.type;
+
+    const canReuseSameElement =
+      previousFunctionState !== undefined &&
+      previousFunctionState.hasContextDependencies !== true &&
+      previousFunctionState.element === node;
+    const canReuseExternalStoreSnapshot =
+      previousFunctionState !== undefined &&
+      runtime.externalStoreUpdate &&
+      shallowEqual(previousFunctionState.props, node.props) &&
+      !hasChangedContextDependency(runtime, previousFunctionState.instanceKeys);
+
+    if (
+      runtime.strictReplayDepth === 0 &&
+      previousFunctionState !== undefined &&
+      (canReuseSameElement || canReuseExternalStoreSnapshot) &&
+      !hasDirtyInstance(runtime, previousFunctionState.instanceKeys) &&
+      !hasUnflushedMountEffectInstance(runtime, previousFunctionState.instanceKeys) &&
+      !hasPendingAsyncChild(current?.child)
+    ) {
+      markActiveInstanceKeys(runtime, previousFunctionState.instanceKeys);
+      fiber.child = current?.child;
+      fiber.memoizedState = current?.memoizedState;
+      fiber.stateNode = previousFunctionState;
+      return { fiber, consumed: options.previousNodes?.length ?? 0 };
+    }
+
     const rendered = renderWithRootRuntime(runtime, path, () =>
       (node.type as (props: Record<string, unknown>) => ReactCompatNode)(node.props),
+      node.type,
     );
     fiber.memoizedState = getDevToolsHookState(runtime, path);
     const childOptions = withHydrationComponentStack(
@@ -760,6 +1427,13 @@ function createHostFiber(
       childOptions,
     );
     fiber.child = childResult.fiber;
+    const instanceKeys = collectInstanceKeys(runtime, path);
+    fiber.stateNode = {
+      element: node,
+      props: { ...node.props },
+      instanceKeys,
+      hasContextDependencies: hasContextDependency(runtime, instanceKeys),
+    } satisfies FunctionFiberState;
     return { fiber, consumed: childResult.consumed };
   }
 
@@ -767,19 +1441,21 @@ function createHostFiber(
     return { fiber: undefined, consumed: 0 };
   }
 
+  const elementNamespace = namespaceForHostElement(options.namespace ?? "html", node.type);
+  const childNamespace = namespaceForHostChildren(elementNamespace, node.type);
   const fiber =
     current?.tag === "host-component" && current.type === node.type
       ? createWorkInProgress(current, node.props)
       : createFiber("host-component", node.props, key);
   const existing = options.previousNodes?.[0];
-  const existingElement = existing instanceof HTMLElement ? existing : undefined;
+  const existingElement = isHostElement(existing) ? existing : undefined;
   const tagMatches =
     existingElement !== undefined &&
-    existingElement.tagName.toLowerCase() === node.type;
+    hostElementMatches(existingElement, node.type, elementNamespace);
 
   if (existing === undefined && options.previousNodes !== undefined) {
     reportMissingHydrationNode(options, path);
-  } else if (existing !== undefined && !(existing instanceof HTMLElement)) {
+  } else if (existing !== undefined && !isHostElement(existing)) {
     reportHydrationNodeTypeMismatch(options, path, `<${node.type}>`, existing);
   }
 
@@ -801,62 +1477,474 @@ function createHostFiber(
       ? existingElement
       : current?.tag === "host-component" &&
           current.type === node.type &&
-          current.stateNode instanceof HTMLElement
+          isHostElement(current.stateNode) &&
+          hostElementMatches(current.stateNode, node.type, elementNamespace)
         ? current.stateNode
-        : document.createElement(node.type);
+        : createHostElement(getDocumentRef(options), node.type, options.namespace ?? "html");
   fiber.hydrateExisting = tagMatches && options.previousNodes !== undefined;
   const previousChildNodes =
     tagMatches && existingElement !== undefined
       ? Array.from(existingElement.childNodes)
       : undefined;
+  const directTextChild =
+    shouldUseDirectHostTextChild() && previousChildNodes === undefined
+      ? getDirectHostTextChild(node.props.children)
+      : undefined;
+  if (
+    previousChildNodes === undefined &&
+    current?.tag === "host-component" &&
+    current.type === node.type &&
+    Object.is(hostFiberChildrenProp(current.memoizedProps), node.props.children) &&
+    canReuseStaticHostSubtree(current.child)
+  ) {
+    fiber.child = current.child;
+    if (fiber.child !== undefined) {
+      fiber.child.return = fiber;
+    }
+    parent.child ??= fiber;
+    return { fiber, consumed: existing === undefined ? 0 : 1 };
+  }
+
+  if (directTextChild !== undefined) {
+    fiber.child = undefined;
+    parent.child ??= fiber;
+    return { fiber, consumed: existing === undefined ? 0 : 1 };
+  }
+
   const childResult = reconcileHostChild(
     fiber,
     current?.tag === "host-component" ? current.child : undefined,
     node.props.children as ReactCompatNode,
     runtime,
     `${path}.c`,
-    previousChildNodes === undefined
-      ? options
-      : { ...options, previousNodes: previousChildNodes },
+    {
+      ...options,
+      namespace: childNamespace,
+      ...(previousChildNodes === undefined ? {} : { previousNodes: previousChildNodes }),
+    },
   );
   fiber.child = childResult.fiber;
   if (previousChildNodes !== undefined) {
     reportExtraHydrationNodes(options, `${path}.c`, previousChildNodes, childResult.consumed);
   }
-  parent.child ??= fiber;
-  return { fiber, consumed: existing === undefined ? 0 : 1 };
+  parent.child ??= fiber;
+  return { fiber, consumed: existing === undefined ? 0 : 1 };
+}
+
+function isFunctionComponentType(value: unknown): value is (
+  props: Record<string, unknown>,
+) => ReactCompatNode {
+  return (
+    typeof value === "function" &&
+    typeof (value as { prototype?: { render?: unknown } }).prototype?.render !==
+      "function"
+  );
+}
+
+function commitHostChildren(
+  fiber: Fiber | undefined,
+  parent: ParentNode,
+  eventRoot: Element,
+  path: string,
+  options: RenderOptions = {},
+): Node[] {
+  const nodes: Node[] = [];
+  let cursor = fiber;
+  let index = 0;
+
+  while (cursor !== undefined) {
+    for (const node of commitHostFiber(cursor, parent, eventRoot, joinCommitPath(path, String(index)), options)) {
+      nodes.push(node);
+    }
+    cursor = cursor.sibling;
+    index += 1;
+  }
+
+  return nodes;
+}
+
+function commitHostDirtyChildren(
+  fiber: Fiber | undefined,
+  parent: ParentNode,
+  eventRoot: Element,
+  path: string,
+  options: RenderOptions = {},
+): void {
+  let cursor = fiber;
+  let index = 0;
+
+  while (cursor !== undefined) {
+    if (hasHostCommitWork(cursor)) {
+      commitHostDirtyFiber(cursor, parent, eventRoot, joinCommitPath(path, String(index)), options);
+    }
+    cursor = cursor.sibling;
+    index += 1;
+  }
+}
+
+function commitHostDirtyFiber(
+  fiber: Fiber,
+  parent: ParentNode,
+  eventRoot: Element,
+  path: string,
+  options: RenderOptions = {},
+): void {
+  if (fiber.tag === "host-text") {
+    commitHostFiber(fiber, parent, eventRoot, path, options);
+    return;
+  }
+
+  if (fiber.tag === "host-component") {
+    const element = fiber.stateNode;
+
+    if (!isHostElement(element)) {
+      finishCommittedFiber(fiber);
+      return;
+    }
+
+    const props = fiber.pendingProps as Record<string, unknown>;
+    const propsAreUnchanged =
+      fiber.hydrateExisting !== true &&
+      hostPropsEqual(fiber.memoizedProps, props);
+    const propsAreChildrenOnly =
+      fiber.hydrateExisting !== true &&
+      hostPropsAreChildrenOnly(fiber.memoizedProps) &&
+      hostPropsAreChildrenOnly(props);
+    const textOnlyRowUpdate =
+      fiber.hydrateExisting !== true &&
+      isRowTextOnlyUpdate(fiber.memoizedProps, props);
+
+    if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+      applyProps(element, props, path, {
+        ...options,
+        eventRoot,
+        preserveHydrationAttributes: fiber.hydrateExisting,
+      });
+      applyRef(props.ref, element);
+    }
+
+    const directTextChild =
+      fiber.child === undefined && fiber.hydrateExisting !== true
+        ? getDirectHostTextChild(props.children)
+        : undefined;
+
+    if (directTextChild !== undefined) {
+      syncDirectHostTextChild(element, directTextChild);
+    } else if (fiber.subtreeFlags !== NoFlags) {
+      commitHostDirtyChildren(fiber.child, element, eventRoot, `${path}.c`, options);
+    }
+
+    if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+      applyPostChildFormProps(element, props);
+    }
+    fiber.memoizedProps = props;
+    finishCommittedFiber(fiber);
+    return;
+  }
+
+  if (fiber.tag === "portal") {
+    const container = fiber.stateNode;
+
+    if (container instanceof Element) {
+      setLogicalEventParent(container, parent);
+      commitHostDirtyChildren(fiber.child, container, container, `${path}.portal`, options);
+    }
+    fiber.memoizedProps = fiber.pendingProps;
+    finishCommittedFiber(fiber);
+    return;
+  }
+
+  if (fiber.subtreeFlags !== NoFlags) {
+    commitHostDirtyChildren(fiber.child, parent, eventRoot, path, options);
+  }
+  fiber.memoizedProps = fiber.pendingProps;
+  finishCommittedFiber(fiber);
+}
+
+function hasHostCommitWork(fiber: Fiber): boolean {
+  return (
+    fiber.flags !== NoFlags ||
+    fiber.subtreeFlags !== NoFlags ||
+    fiber.hostChildListChanged ||
+    fiber.childListChanged ||
+    fiber.subtreeChildListChanged ||
+    fiber.hydrateExisting
+  );
+}
+
+function commitHostKeyedChildListMutation(
+  fiber: Fiber | undefined,
+  parent: ParentNode,
+  eventRoot: Element,
+  path: string,
+  options: RenderOptions = {},
+): boolean {
+  let cursor = fiber;
+  let index = 0;
+  let committed = false;
+
+  while (cursor !== undefined) {
+    if (!hasHostCommitWork(cursor)) {
+      cursor = cursor.sibling;
+      index += 1;
+      continue;
+    }
+
+    const childPath = joinCommitPath(path, String(index));
+    const didCommit = commitHostKeyedChildListMutationFiber(
+      cursor,
+      parent,
+      eventRoot,
+      childPath,
+      options,
+    );
+
+    if (!didCommit) {
+      return false;
+    }
+
+    committed = true;
+    cursor = cursor.sibling;
+    index += 1;
+  }
+
+  return committed;
+}
+
+function commitHostKeyedChildListMutationFiber(
+  fiber: Fiber,
+  parent: ParentNode,
+  eventRoot: Element,
+  path: string,
+  options: RenderOptions = {},
+): boolean {
+  if (fiber.childListChanged) {
+    const mutationParent =
+      fiber.tag === "host-component" && isHostElement(fiber.stateNode)
+        ? fiber.stateNode
+        : parent;
+
+    if (fiber.tag === "host-component" && !isHostElement(fiber.stateNode)) {
+      return false;
+    }
+
+    if (commitHostAppendSuffix(fiber, mutationParent, eventRoot, path, options)) {
+      finishHostPassthroughFiber(fiber);
+      return true;
+    }
+
+    if (commitHostSingleRemoval(fiber, mutationParent)) {
+      finishHostPassthroughFiber(fiber);
+      return true;
+    }
+
+    return false;
+  }
+
+  if (fiber.subtreeChildListChanged) {
+    if (fiber.tag === "host-component") {
+      const element = fiber.stateNode;
+
+      if (!isHostElement(element)) {
+        return false;
+      }
+
+      if (!commitHostKeyedChildListMutation(fiber.child, element, eventRoot, `${path}.c`, options)) {
+        return false;
+      }
+      finishHostPassthroughFiber(fiber);
+      return true;
+    }
+
+    if (!commitHostKeyedChildListMutation(fiber.child, parent, eventRoot, path, options)) {
+      return false;
+    }
+    finishHostPassthroughFiber(fiber);
+    return true;
+  }
+
+  commitHostDirtyFiber(fiber, parent, eventRoot, path, options);
+  return true;
+}
+
+function commitHostAppendSuffix(
+  fiber: Fiber,
+  parent: ParentNode,
+  eventRoot: Element,
+  path: string,
+  options: RenderOptions,
+): boolean {
+  const append = getPlacementAppendSuffix(fiber.child) ?? getAppendSuffix(fiber.alternate?.child, fiber.child);
+
+  if (append === undefined) {
+    return false;
+  }
+
+  let cursor: Fiber | undefined = append.fiber;
+  let index = append.index;
+
+  while (cursor !== undefined) {
+    for (const node of commitHostFiber(cursor, parent, eventRoot, joinCommitPath(path, String(index)), options)) {
+      parent.appendChild(node);
+    }
+    cursor = cursor.sibling;
+    index += 1;
+  }
+
+  return true;
+}
+
+function getPlacementAppendSuffix(next: Fiber | undefined): { fiber: Fiber; index: number } | undefined {
+  let nextCursor = next;
+  let index = 0;
+
+  while (nextCursor !== undefined) {
+    if ((nextCursor.flags & Placement) !== NoFlags) {
+      if (index === 0) {
+        return undefined;
+      }
+
+      let appendCursor: Fiber | undefined = nextCursor;
+
+      while (appendCursor !== undefined) {
+        if ((appendCursor.flags & Placement) === NoFlags) {
+          return undefined;
+        }
+        appendCursor = appendCursor.sibling;
+      }
+
+      return { fiber: nextCursor, index };
+    }
+
+    if (hasHostCommitWork(nextCursor)) {
+      return undefined;
+    }
+
+    nextCursor = nextCursor.sibling;
+    index += 1;
+  }
+
+  return undefined;
+}
+
+function commitHostSingleRemoval(fiber: Fiber, parent: ParentNode): boolean {
+  const removed = getSingleRemovedFiber(fiber.alternate?.child, fiber.child);
+
+  if (removed === undefined) {
+    return false;
+  }
+
+  let removedAny = false;
+
+  for (const node of collectCommittedHostNodes(removed)) {
+    if (node.parentNode !== parent) {
+      return false;
+    }
+
+    parent.removeChild(node);
+    removedAny = true;
+  }
+
+  return removedAny;
+}
+
+function getAppendSuffix(
+  current: Fiber | undefined,
+  next: Fiber | undefined,
+): { fiber: Fiber; index: number } | undefined {
+  let currentCursor = current;
+  let nextCursor = next;
+  let index = 0;
+
+  while (currentCursor !== undefined && nextCursor !== undefined) {
+    if (!isSameFiberSlot(currentCursor, nextCursor) || hasHostCommitWork(nextCursor)) {
+      return undefined;
+    }
+
+    currentCursor = currentCursor.sibling;
+    nextCursor = nextCursor.sibling;
+    index += 1;
+  }
+
+  if (currentCursor !== undefined || nextCursor === undefined) {
+    return undefined;
+  }
+
+  return { fiber: nextCursor, index };
+}
+
+function getSingleRemovedFiber(
+  current: Fiber | undefined,
+  next: Fiber | undefined,
+): Fiber | undefined {
+  let currentCursor = current;
+  let nextCursor = next;
+
+  while (currentCursor !== undefined && nextCursor !== undefined) {
+    if (!isSameFiberSlot(currentCursor, nextCursor)) {
+      break;
+    }
+
+    if (hasHostCommitWork(nextCursor)) {
+      return undefined;
+    }
+
+    currentCursor = currentCursor.sibling;
+    nextCursor = nextCursor.sibling;
+  }
+
+  if (currentCursor === undefined) {
+    return undefined;
+  }
+
+  const removed = currentCursor;
+  currentCursor = currentCursor.sibling;
+
+  while (currentCursor !== undefined && nextCursor !== undefined) {
+    if (!isSameFiberSlot(currentCursor, nextCursor) || hasHostCommitWork(nextCursor)) {
+      return undefined;
+    }
+
+    currentCursor = currentCursor.sibling;
+    nextCursor = nextCursor.sibling;
+  }
+
+  return currentCursor === undefined && nextCursor === undefined ? removed : undefined;
 }
 
-function isFunctionComponentType(value: unknown): value is (
-  props: Record<string, unknown>,
-) => ReactCompatNode {
+function isSameFiberSlot(current: Fiber, next: Fiber): boolean {
   return (
-    typeof value === "function" &&
-    typeof (value as { prototype?: { render?: unknown } }).prototype?.render !==
-      "function"
+    (next === current || next.alternate === current) &&
+    current.tag === next.tag &&
+    current.type === next.type &&
+    current.key === next.key
   );
 }
 
-function commitHostChildren(
-  fiber: Fiber | undefined,
-  parent: ParentNode,
-  eventRoot: Element,
-  path: string,
-  options: RenderOptions = {},
-): Node[] {
+function collectCommittedHostNodes(fiber: Fiber): Node[] {
+  if (
+    (fiber.tag === "host-component" || fiber.tag === "host-text") &&
+    fiber.stateNode instanceof Node
+  ) {
+    return [fiber.stateNode];
+  }
+
   const nodes: Node[] = [];
-  let cursor = fiber;
-  let index = 0;
+  let child = fiber.child;
 
-  while (cursor !== undefined) {
-    nodes.push(...commitHostFiber(cursor, parent, eventRoot, joinPath(path, String(index)), options));
-    cursor = cursor.sibling;
-    index += 1;
+  while (child !== undefined) {
+    nodes.push(...collectCommittedHostNodes(child));
+    child = child.sibling;
   }
 
   return nodes;
 }
 
+function finishHostPassthroughFiber(fiber: Fiber): void {
+  fiber.memoizedProps = fiber.pendingProps;
+  finishCommittedFiber(fiber);
+}
+
 function commitHostFiber(
   fiber: Fiber,
   parent: ParentNode,
@@ -868,92 +1956,171 @@ function commitHostFiber(
     const text = fiber.stateNode;
 
     if (!(text instanceof Text)) {
+      finishCommittedFiber(fiber);
       return [];
     }
 
-    text.data = String(fiber.pendingProps);
+    const nextText = String(fiber.pendingProps);
+    if (text.data !== nextText) {
+      text.data = nextText;
+    }
     fiber.memoizedProps = fiber.pendingProps;
+    finishCommittedFiber(fiber);
     return [text];
   }
 
   if (fiber.tag === "host-component") {
     const element = fiber.stateNode;
 
-    if (!(element instanceof HTMLElement)) {
+    if (!isHostElement(element)) {
+      finishCommittedFiber(fiber);
       return [];
     }
 
-    applyProps(element, fiber.pendingProps as Record<string, unknown>, path, {
-      ...options,
-      eventRoot,
-      preserveHydrationAttributes: fiber.hydrateExisting,
-    });
-    applyRef((fiber.pendingProps as { ref?: unknown }).ref, element);
-    const childNodes = commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
-    syncChildNodes(element, childNodes);
-    applyPostChildFormProps(element, fiber.pendingProps as Record<string, unknown>);
-    fiber.memoizedProps = fiber.pendingProps;
+    if (
+      fiber.hydrateExisting !== true &&
+      fiber.flags === NoFlags &&
+      fiber.subtreeFlags === NoFlags &&
+      fiber.hostChildListChanged !== true
+    ) {
+      fiber.memoizedProps = fiber.pendingProps;
+      return [element];
+    }
+
+    const props = fiber.pendingProps as Record<string, unknown>;
+    const propsAreUnchanged =
+      fiber.hydrateExisting !== true &&
+      hostPropsEqual(fiber.memoizedProps, props);
+    const propsAreChildrenOnly =
+      fiber.hydrateExisting !== true &&
+      hostPropsAreChildrenOnly(fiber.memoizedProps) &&
+      hostPropsAreChildrenOnly(props);
+    const textOnlyRowUpdate =
+      fiber.hydrateExisting !== true &&
+      isRowTextOnlyUpdate(fiber.memoizedProps, props);
+
+    if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+      applyProps(element, props, path, {
+        ...options,
+        eventRoot,
+        preserveHydrationAttributes: fiber.hydrateExisting,
+      });
+      applyRef(props.ref, element);
+    }
+    const directTextChild =
+      fiber.child === undefined && fiber.hydrateExisting !== true
+        ? getDirectHostTextChild(props.children)
+        : undefined;
+
+    if (directTextChild !== undefined) {
+      syncDirectHostTextChild(element, directTextChild);
+    } else if (
+      fiber.hostChildListChanged ||
+      fiber.childListChanged ||
+      fiber.hydrateExisting === true ||
+      (fiber.subtreeFlags & Placement) !== NoFlags
+    ) {
+      const childNodes = commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
+      if (
+        !(childNodes.length === 0 && committedPortalContainers.has(element)) &&
+        !shouldPreserveContentEditableChildren(element, props, childNodes)
+      ) {
+        syncChildNodes(element, childNodes);
+      }
+    } else if (fiber.subtreeFlags !== NoFlags) {
+      commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
+    }
+
+    if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+      applyPostChildFormProps(element, props);
+    }
+    fiber.memoizedProps = props;
+    finishCommittedFiber(fiber);
     return [element];
   }
 
   if (fiber.tag === "fragment") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.f`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.f`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "profiler") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.profiler`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.profiler`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "strict-mode") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.strict`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.strict`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "suspense") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.s`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.s`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "suspense-list") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.sl`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.sl`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "context-provider" || fiber.tag === "context-consumer") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.ctx`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.ctx`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "function-component") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.fc`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.fc`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "forward-ref") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.fr`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.fr`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "memo") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.memo`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.memo`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "lazy") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.lazy`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.lazy`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "error-boundary") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.eb`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.eb`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "class-component") {
     fiber.memoizedProps = fiber.pendingProps;
-    return commitHostChildren(fiber.child, parent, eventRoot, `${path}.class`, options);
+    const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.class`, options);
+    finishCommittedFiber(fiber);
+    return nodes;
   }
 
   if (fiber.tag === "portal") {
@@ -964,21 +2131,281 @@ function commitHostFiber(
     }
 
     setLogicalEventParent(container, parent);
+    committedPortalContainers.add(container);
+    const portalEventRoot =
+      eventRoot !== container && eventRoot.contains(container) ? eventRoot : container;
     const childNodes = commitHostChildren(
       fiber.child,
       container,
-      container,
+      portalEventRoot,
       `${path}.portal`,
       options,
     );
-    syncChildNodes(container, childNodes);
+    const previousNodes = Array.isArray(fiber.alternate?.memoizedState)
+      ? fiber.alternate.memoizedState.filter((node): node is Node => node instanceof Node)
+      : [];
+    syncOwnedChildNodes(container, previousNodes, childNodes);
+    fiber.memoizedState = childNodes;
     fiber.memoizedProps = fiber.pendingProps;
+    finishCommittedFiber(fiber);
     return [];
   }
 
+  finishCommittedFiber(fiber);
   return [];
 }
 
+function finishCommittedFiber(fiber: Fiber): void {
+  fiber.flags = NoFlags;
+  fiber.subtreeFlags = NoFlags;
+  fiber.childListChanged = false;
+  fiber.subtreeChildListChanged = false;
+  fiber.hostChildListChanged = false;
+}
+
+function hasChildListMutation(fiber: Fiber): boolean {
+  return fiber.childListChanged || fiber.subtreeChildListChanged;
+}
+
+function hostPropsEqual(previous: unknown, next: Record<string, unknown>): boolean {
+  if (previous === next) {
+    return true;
+  }
+
+  if (typeof previous !== "object" || previous === null) {
+    return false;
+  }
+
+  const previousProps = previous as Record<string, unknown>;
+  let previousCount = 0;
+  let nextCount = 0;
+
+  for (const key in previousProps) {
+    if (!hasOwnProperty.call(previousProps, key)) {
+      continue;
+    }
+    previousCount += 1;
+    if (!hasOwnProperty.call(next, key)) {
+      return false;
+    }
+
+    if (!Object.is(previousProps[key], next[key])) {
+      return false;
+    }
+  }
+
+  for (const key in next) {
+    if (hasOwnProperty.call(next, key)) {
+      nextCount += 1;
+    }
+  }
+
+  return previousCount === nextCount;
+}
+
+function hostOwnPropsEqual(previous: unknown, next: Record<string, unknown>): boolean {
+  if (previous === next) {
+    return true;
+  }
+
+  if (typeof previous !== "object" || previous === null) {
+    return false;
+  }
+
+  const previousProps = previous as Record<string, unknown>;
+  const previousMeta = getHostOwnPropsMeta(previousProps);
+  const nextMeta = getHostOwnPropsMeta(next);
+
+  if (previousMeta !== undefined && nextMeta !== undefined) {
+    return previousMeta === nextMeta;
+  }
+
+  let previousCount = 0;
+  let nextCount = 0;
+
+  for (const key in previousProps) {
+    if (!hasOwnProperty.call(previousProps, key) || key === "children") {
+      continue;
+    }
+    previousCount += 1;
+    if (!hasOwnProperty.call(next, key)) {
+      return false;
+    }
+
+    if (!Object.is(previousProps[key], next[key])) {
+      return false;
+    }
+  }
+
+  for (const key in next) {
+    if (hasOwnProperty.call(next, key) && key !== "children") {
+      nextCount += 1;
+    }
+  }
+
+  return previousCount === nextCount;
+}
+
+function getHostOwnPropsMeta(props: Record<string, unknown>): number | undefined {
+  return (props as { [HOST_OWN_PROPS_META]?: number })[HOST_OWN_PROPS_META];
+}
+
+function hostDirectTextChildChanged(previous: unknown, next: Record<string, unknown>): boolean {
+  const previousText = getDirectHostTextChild(hostFiberChildrenProp(previous));
+  const nextText = getDirectHostTextChild(next.children);
+
+  return (previousText !== undefined || nextText !== undefined) && previousText !== nextText;
+}
+
+function hostChildListChanged(previous: unknown, next: Record<string, unknown>): boolean {
+  const previousChildren = hostFiberChildrenProp(previous);
+  const nextChildren = next.children;
+
+  if (Object.is(previousChildren, nextChildren)) {
+    return false;
+  }
+
+  if (
+    getDirectHostTextChild(previousChildren) !== undefined ||
+    getDirectHostTextChild(nextChildren) !== undefined
+  ) {
+    return false;
+  }
+
+  if (sameSingleHostChild(previousChildren, nextChildren)) {
+    return false;
+  }
+
+  if (sameHostChildList(previousChildren, nextChildren)) {
+    return false;
+  }
+
+  return true;
+}
+
+function sameSingleHostChild(previous: unknown, next: unknown): boolean {
+  return (
+    isReactCompatElement(previous) &&
+    isReactCompatElement(next) &&
+    previous.key === next.key &&
+    previous.type === next.type
+  );
+}
+
+function sameHostChildList(previous: unknown, next: unknown): boolean {
+  if (!Array.isArray(previous) || !Array.isArray(next) || previous.length !== next.length) {
+    return false;
+  }
+
+  for (let index = 0; index < previous.length; index += 1) {
+    const previousChild = previous[index];
+    const nextChild = next[index];
+
+    if (Object.is(previousChild, nextChild)) {
+      continue;
+    }
+
+    if (!sameSingleHostChild(previousChild, nextChild)) {
+      return false;
+    }
+  }
+
+  return (
+    previous.length > 0 ||
+    (Array.isArray(previous) && Array.isArray(next))
+  );
+}
+
+function hostPropsAreChildrenOnly(props: unknown): boolean {
+  if (typeof props !== "object" || props === null) {
+    return false;
+  }
+
+  for (const key in props) {
+    if (
+      Object.prototype.hasOwnProperty.call(props, key) &&
+      key !== "children"
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function isRowTextOnlyUpdate(previous: unknown, next: Record<string, unknown>): boolean {
+  if (typeof previous !== "object" || previous === null) {
+    return false;
+  }
+
+  const previousProps = previous as Record<string, unknown>;
+  const previousMeta = getHostOwnPropsMeta(previousProps);
+  const nextMeta = getHostOwnPropsMeta(next);
+
+  if (previousMeta === undefined || previousMeta !== nextMeta) {
+    return false;
+  }
+
+  const previousText = getDirectHostTextChild(previousProps.children);
+  const nextText = getDirectHostTextChild(next.children);
+
+  return previousText !== undefined && nextText !== undefined && previousText !== nextText;
+}
+
+function hostFiberChildrenProp(props: unknown): unknown {
+  return typeof props === "object" && props !== null
+    ? (props as { children?: unknown }).children
+    : undefined;
+}
+
+function getDirectHostTextChild(children: unknown): string | undefined {
+  return typeof children === "string" || typeof children === "number"
+    ? String(children)
+    : undefined;
+}
+
+function shouldUseDirectHostTextChild(): boolean {
+  const globalProcess = (globalThis as { process?: { env?: Record<string, string | undefined> } })
+    .process;
+  return globalProcess?.env?.NODE_ENV === "production";
+}
+
+function syncDirectHostTextChild(element: Element, text: string): void {
+  const firstChild = element.firstChild;
+
+  if (firstChild instanceof Text && firstChild.nextSibling === null) {
+    if (firstChild.data !== text) {
+      firstChild.data = text;
+    }
+    return;
+  }
+
+  element.textContent = text;
+}
+
+function shouldPreserveContentEditableChildren(
+  element: Element,
+  props: Record<string, unknown>,
+  childNodes: readonly Node[],
+): boolean {
+  void childNodes;
+
+  if (
+    !element.hasAttribute("contenteditable") ||
+    element.getAttribute("contenteditable") === "false"
+  ) {
+    return false;
+  }
+
+  const children = props.children;
+  return (
+    children === undefined ||
+    children === null ||
+    children === false ||
+    (Array.isArray(children) && children.length === 0)
+  );
+}
+
 function createSuspenseFiber(
   current: Fiber | undefined,
   element: ReactCompatElement,
@@ -1078,25 +2505,8 @@ function createStrictModeFiber(
       ? createWorkInProgress(current, element.props)
       : createFiber("strict-mode", element.props, key);
   fiber.type = element.type;
-  const snapshot = takeRuntimeSnapshot(runtime);
-
-  try {
-    createHostFiber(
-      fiber,
-      undefined,
-      element.props.children as ReactCompatNode,
-      undefined,
-      runtime,
-      `${path}.strict.preview`,
-      options.previousNodes === undefined
-        ? options
-        : { ...options, previousNodes: [] },
-    );
-  } finally {
-    restoreRuntimeSnapshot(runtime, snapshot);
-  }
 
-  const childResult = renderWithStrictMode(
+  const { result: childResult, memoValues, memoValuesByHook } = renderWithStrictModeMemoCapture(
     runtime,
     () =>
       reconcileHostChild(
@@ -1109,6 +2519,29 @@ function createStrictModeFiber(
       ),
   );
   fiber.child = childResult.fiber;
+
+  const snapshot = takeRuntimeSnapshot(runtime);
+  try {
+    renderStrictModeReplay(
+      runtime,
+      memoValues,
+      memoValuesByHook,
+      () =>
+        reconcileHostChild(
+          fiber,
+          childResult.fiber,
+          element.props.children as ReactCompatNode,
+          runtime,
+          `${path}.strict`,
+          options.previousNodes === undefined
+            ? options
+            : { ...options, previousNodes: [] },
+        ),
+    );
+  } finally {
+    restoreRuntimeSnapshot(runtime, snapshot);
+  }
+
   return { fiber, consumed: childResult.consumed };
 }
 
@@ -1220,6 +2653,7 @@ function reconcileSuspenseListForwards(
 
     fiber.return = parent;
     fiber.sibling = undefined;
+    bubbleHostChild(parent, fiber);
 
     if (first === undefined) {
       first = fiber;
@@ -1272,6 +2706,7 @@ function reconcileSuspenseListBackwards(
 
     fiber.return = parent;
     fiber.sibling = undefined;
+    bubbleHostChild(parent, fiber);
     fibers.unshift(fiber);
 
     if (isSuspendedSuspenseFiber(fiber)) {
@@ -1309,6 +2744,32 @@ function hasSuspendedChild(fiber: Fiber | undefined): boolean {
   return false;
 }
 
+function hasPendingAsyncChild(fiber: Fiber | undefined): boolean {
+  let cursor = fiber;
+
+  while (cursor !== undefined) {
+    if (isPendingLazyFiber(cursor) || isSuspendedSuspenseFiber(cursor)) {
+      return true;
+    }
+
+    if (cursor.child !== undefined && hasPendingAsyncChild(cursor.child)) {
+      return true;
+    }
+
+    cursor = cursor.sibling;
+  }
+
+  return false;
+}
+
+function isPendingLazyFiber(fiber: Fiber): boolean {
+  if (fiber.tag !== "lazy" || !isLazyType(fiber.type)) {
+    return false;
+  }
+
+  return fiber.type.status !== "resolved" || fiber.child === undefined;
+}
+
 function isSuspendedSuspenseFiber(fiber: Fiber): boolean {
   return (
     fiber.tag === "suspense" &&
@@ -1437,7 +2898,7 @@ function createPortalFiber(
     portal.children,
     runtime,
     `${path}.portal`,
-    options,
+    { ...options, documentRef: portal.container.ownerDocument },
   );
   fiber.child = childResult.fiber;
   fiber.return = parent;
@@ -1452,6 +2913,10 @@ function normalizeChildren(node: ReactCompatNode): ReactCompatNode[] {
   return Array.isArray(node) ? node : [node];
 }
 
+function getDocumentRef(options: FiberHydrationOptions): Document {
+  return options.documentRef ?? document;
+}
+
 function collectExistingKeyedFibers(
   firstChild: Fiber | undefined,
 ): Map<string, Fiber> {
@@ -1473,11 +2938,65 @@ function getNodeKey(node: ReactCompatNode): string | undefined {
   return isReactCompatElement(node) && node.key !== null ? node.key : undefined;
 }
 
+function hasKeyedChild(children: readonly ReactCompatNode[]): boolean {
+  for (const child of children) {
+    if (getNodeKey(child) !== undefined) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 function getNodePathSegment(node: ReactCompatNode, index: number): string {
   const key = getNodeKey(node);
   return key === undefined ? String(index) : `k:${key}`;
 }
 
+function getReconcileChildPath(
+  path: string,
+  node: ReactCompatNode,
+  index: number,
+  options: FiberHydrationOptions,
+): string {
+  if (!shouldTrackReconcilePath(node, options)) {
+    return "";
+  }
+
+  return joinPath(path, getNodePathSegment(node, index));
+}
+
+function shouldTrackReconcilePath(
+  node: ReactCompatNode,
+  options: FiberHydrationOptions,
+): boolean {
+  if (
+    options.previousNodes !== undefined ||
+    options.hydration?.onRecoverableError !== undefined ||
+    options.resumeId !== undefined
+  ) {
+    return true;
+  }
+
+  return !isHostElementWithDirectTextChild(node);
+}
+
+function isHostElementWithDirectTextChild(node: ReactCompatNode): boolean {
+  return (
+    isReactCompatElement(node) &&
+    typeof node.type === "string" &&
+    getDirectHostTextChild(node.props.children) !== undefined
+  );
+}
+
+function getRootCommitPath(options: RenderOptions): string {
+  return options.hydration?.onRecoverableError === undefined ? SKIP_COMMIT_PATH : "0";
+}
+
+function joinCommitPath(path: string, segment: string): string {
+  return path === SKIP_COMMIT_PATH ? "" : joinPath(path, segment);
+}
+
 function getComponentName(component: Function): string {
   return component.name === "" ? "Anonymous" : component.name;
 }
@@ -1552,6 +3071,21 @@ function hasDirtyInstance(runtime: RootRuntime, keys: readonly string[]): boolea
   );
 }
 
+function hasUnflushedMountEffectInstance(runtime: RootRuntime, keys: readonly string[]): boolean {
+  return keys.some((key) => {
+    const instance = runtime.instances.get(key) as
+      | { hooks?: readonly ({ kind?: string; mounted?: boolean; disposed?: boolean } | undefined)[] }
+      | undefined;
+
+    return instance?.hooks?.some(
+      (slot) =>
+        slot?.kind === "effect" &&
+        slot.disposed !== true &&
+        slot.mounted !== true,
+    ) === true;
+  });
+}
+
 function applyRef(ref: unknown, node: unknown): void {
   if (typeof ref === "function") {
     ref(node);