@lynx-js/react 0.109.2 → 0.110.1

package/runtime/src/lynx/tt.ts

@@ -4,6 +4,7 @@
 import { render } from 'preact';
 
 import { LifecycleConstant, NativeUpdateDataType } from '../lifecycleConstant.js';
+import type { FirstScreenData } from '../lifecycleConstant.js';
 import {
   PerformanceTimingFlags,
   PerformanceTimingKeys,
@@ -18,17 +19,18 @@ import { delayedEvents, delayedPublishEvent } from '../lifecycle/event/delayEven
 import { delayLifecycleEvent, delayedLifecycleEvents } from '../lifecycle/event/delayLifecycleEvents.js';
 import { commitPatchUpdate, genCommitTaskId, globalCommitTaskMap } from '../lifecycle/patch/commit.js';
 import type { PatchList } from '../lifecycle/patch/commit.js';
+import { removeCtxNotFoundEventListener } from '../lifecycle/patch/error.js';
+import { runDelayedUiOps } from '../lifecycle/ref/delay.js';
 import { reloadBackground } from '../lifecycle/reload.js';
 import { CHILDREN } from '../renderToOpcodes/constants.js';
 import { __root } from '../root.js';
-import { globalRefsToSet, updateBackgroundRefs } from '../snapshot/ref.js';
 import { backgroundSnapshotInstanceManager } from '../snapshot.js';
+import type { SerializedSnapshotInstance } from '../snapshot.js';
 import { destroyWorklet } from '../worklet/destroy.js';
 
 export { runWithForce };
 
 function injectTt(): void {
-  // @ts-ignore
   const tt = lynxCoreInject.tt;
   tt.OnLifecycleEvent = onLifecycleEvent;
   tt.publishEvent = delayedPublishEvent;
@@ -36,6 +38,7 @@ function injectTt(): void {
   tt.callDestroyLifetimeFun = () => {
     destroyWorklet();
     destroyBackground();
+    removeCtxNotFoundEventListener();
   };
   tt.updateGlobalProps = updateGlobalProps;
   tt.updateCardData = updateCardData;
@@ -45,7 +48,7 @@ function injectTt(): void {
   };
 }
 
-function onLifecycleEvent([type, data]: [string, any]) {
+function onLifecycleEvent([type, data]: [LifecycleConstant, unknown]) {
   const hasRootRendered = CHILDREN in __root;
   // never called `render(<App/>, __root)`
   // happens if user call `root.render()` async
@@ -69,16 +72,16 @@ function onLifecycleEvent([type, data]: [string, any]) {
   }
 }
 
-function onLifecycleEventImpl(type: string, data: any): void {
+function onLifecycleEventImpl(type: LifecycleConstant, data: unknown): void {
   switch (type) {
     case LifecycleConstant.firstScreen: {
-      const { root: lepusSide, refPatch, jsReadyEventIdSwap } = data;
+      const { root: lepusSide, jsReadyEventIdSwap } = data as FirstScreenData;
       if (__PROFILE__) {
         console.profile('hydrate');
       }
       beginPipeline(true, PipelineOrigins.reactLynxHydrate, PerformanceTimingFlags.reactLynxHydrate);
       markTiming(PerformanceTimingKeys.hydrateParseSnapshotStart);
-      const before = JSON.parse(lepusSide);
+      const before = JSON.parse(lepusSide) as SerializedSnapshotInstance;
       markTiming(PerformanceTimingKeys.hydrateParseSnapshotEnd);
       markTiming(PerformanceTimingKeys.diffVdomStart);
       const snapshotPatch = hydrate(
@@ -95,8 +98,9 @@ function onLifecycleEventImpl(type: string, data: any): void {
       if (delayedEvents) {
         delayedEvents.forEach((args) => {
           const [handlerName, data] = args;
+          // eslint-disable-next-line prefer-const
           let [idStr, ...rest] = handlerName.split(':');
-          while (jsReadyEventIdSwap[idStr!]) idStr = jsReadyEventIdSwap[idStr!];
+          while (jsReadyEventIdSwap[idStr!]) idStr = jsReadyEventIdSwap[idStr!]?.toString();
           try {
             publishEvent([idStr, ...rest].join(':'), data);
           } catch (e) {
@@ -109,16 +113,6 @@ function onLifecycleEventImpl(type: string, data: any): void {
       lynxCoreInject.tt.publishEvent = publishEvent;
       lynxCoreInject.tt.publicComponentEvent = publicComponentEvent;
 
-      if (__PROFILE__) {
-        console.profile('patchRef');
-      }
-      if (refPatch) {
-        globalRefsToSet.set(0, JSON.parse(refPatch));
-        updateBackgroundRefs(0);
-      }
-      if (__PROFILE__) {
-        console.profileEnd();
-      }
       // console.debug("********** After hydration:");
       // printSnapshotInstance(__root as BackgroundSnapshotInstance);
       if (__PROFILE__) {
@@ -131,7 +125,6 @@ function onLifecycleEventImpl(type: string, data: any): void {
       const obj = commitPatchUpdate(patchList, { isHydration: true });
 
       lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, () => {
-        updateBackgroundRefs(commitTaskId);
         globalCommitTaskMap.forEach((commitTask, id) => {
           if (id > commitTaskId) {
             return;
@@ -140,23 +133,14 @@ function onLifecycleEventImpl(type: string, data: any): void {
           globalCommitTaskMap.delete(id);
         });
       });
+      runDelayedUiOps();
       break;
     }
     case LifecycleConstant.globalEventFromLepus: {
-      const [eventName, params] = data;
+      const [eventName, params] = data as [string, Record<string, any>];
       lynx.getJSModule('GlobalEventEmitter').trigger(eventName, params);
       break;
     }
-    case LifecycleConstant.ref: {
-      const { refPatch, commitTaskId } = data;
-      if (commitTaskId) {
-        globalRefsToSet.set(commitTaskId, JSON.parse(refPatch));
-      } else {
-        globalRefsToSet.set(0, JSON.parse(refPatch));
-        updateBackgroundRefs(0);
-      }
-      break;
-    }
   }
 }
 
@@ -175,14 +159,13 @@ function flushDelayedLifecycleEvents(): void {
 }
 
 function publishEvent(handlerName: string, data: unknown) {
-  // TODO: delay js events until js ready
   lynxCoreInject.tt.callBeforePublishEvent?.(data);
   const eventHandler = backgroundSnapshotInstanceManager.getValueBySign(
     handlerName,
   );
   if (eventHandler) {
     try {
-      (eventHandler as Function)(data);
+      (eventHandler as (...args: unknown[]) => void)(data);
     } catch (e) {
       lynx.reportError(e as Error);
     }
@@ -204,10 +187,11 @@ function updateGlobalProps(newData: Record<string, any>): void {
   // can be batched with updateFromRoot
   // This is already done because updateFromRoot will consume all dirty flags marked by
   // the setState, and setState's flush will be a noop. No extra diffs will be needed.
-  Promise.resolve().then(() => {
+  void Promise.resolve().then(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     runWithForce(() => render(__root.__jsx, __root as any));
   });
-  lynxCoreInject.tt.GlobalEventEmitter.emit('onGlobalPropsChanged');
+  lynxCoreInject.tt.GlobalEventEmitter.emit('onGlobalPropsChanged', undefined);
 }
 
 function updateCardData(newData: Record<string, any>, options?: Record<string, any>): void {
@@ -219,16 +203,14 @@ function updateCardData(newData: Record<string, any>, options?: Record<string, a
       ),
     );
   }
-  const { type = NativeUpdateDataType.UPDATE } = options || {};
+  const { type = NativeUpdateDataType.UPDATE } = options ?? {};
   if (type == NativeUpdateDataType.RESET) {
-    // @ts-ignore
     lynx.__initData = {};
   }
 
   // COW when modify `lynx.__initData` to make sure Provider & Consumer works
-  // @ts-ignore
   lynx.__initData = Object.assign({}, lynx.__initData, restNewData);
-  lynxCoreInject.tt.GlobalEventEmitter.emit('onDataChanged');
+  lynxCoreInject.tt.GlobalEventEmitter.emit('onDataChanged', undefined);
 }
 
 export { injectTt, flushDelayedLifecycleEvents };

package/runtime/src/lynx-api.ts

@@ -86,6 +86,7 @@ export const root: Root = {
       __root.__jsx = jsx;
     } else {
       __root.__jsx = jsx;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       render(jsx, __root as any);
       if (__FIRST_SCREEN_SYNC_TIMING__ === 'immediately') {
         // This is for cases where `root.render()` is called asynchronously,
@@ -107,7 +108,7 @@ const _InitData = /* @__PURE__ */ factory<InitData>(
     useState,
     createElement,
     useLynxGlobalEventListener,
-  } as any,
+  },
   '__initData',
   'onDataChanged',
 );
@@ -137,6 +138,7 @@ const _InitData = /* @__PURE__ */ factory<InitData>(
  *
  * @public
  */
+// @ts-expect-error make preact and react types work
 export const InitDataProvider: FC<{ children?: ReactNode | undefined }> = /* @__PURE__ */ _InitData.Provider();
 /**
  * The {@link https://react.dev/reference/react/createContext#consumer | Consumer} Component that provide `initData`.
@@ -144,6 +146,7 @@ export const InitDataProvider: FC<{ children?: ReactNode | undefined }> = /* @__
  * @group Components
  * @public
  */
+// @ts-expect-error make preact and react types work
 export const InitDataConsumer: Consumer<InitData> = /* @__PURE__ */ _InitData.Consumer();
 /**
  * A React Hooks for you to get `initData`.
@@ -235,7 +238,7 @@ export interface DataProcessorDefinition {
    *
    * @public
    */
-  dataProcessors?: Record<string, Function>;
+  dataProcessors?: Record<string, ((rawInitData: InitDataRaw) => InitData)>;
 }
 
 /**

package/runtime/src/lynx.ts

@@ -7,14 +7,15 @@ import './hooks/react.js';
 
 import { initProfileHook } from './debug/profile.js';
 import { document, setupBackgroundDocument } from './document.js';
-import { initDelayUnmount } from './lifecycle/delayUnmount.js';
-import { replaceCommitHook, replaceRequestAnimationFrame } from './lifecycle/patch/commit.js';
+import { replaceCommitHook } from './lifecycle/patch/commit.js';
+import { addCtxNotFoundEventListener } from './lifecycle/patch/error.js';
 import { injectUpdateMainThread } from './lifecycle/patch/updateMainThread.js';
 import { injectCalledByNative } from './lynx/calledByNative.js';
-import { setupLynxTestingEnv } from './lynx/env.js';
+import { setupLynxEnv } from './lynx/env.js';
 import { injectLepusMethods } from './lynx/injectLepusMethods.js';
 import { initTimingAPI } from './lynx/performance.js';
 import { injectTt } from './lynx/tt.js';
+
 export { runWithForce } from './lynx/runWithForce.js';
 
 // @ts-expect-error Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature
@@ -41,17 +42,17 @@ if (__PROFILE__) {
 
 if (__BACKGROUND__) {
   // Trick Preact and TypeScript to accept our custom document adapter.
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   options.document = document as any;
   setupBackgroundDocument();
   injectTt();
+  addCtxNotFoundEventListener();
 
   if (process.env['NODE_ENV'] === 'test') {}
   else {
     replaceCommitHook();
-    replaceRequestAnimationFrame();
     initTimingAPI();
-    initDelayUnmount();
   }
 }
 
-setupLynxTestingEnv();
+setupLynxEnv();

package/runtime/src/opcodes.ts

@@ -1,6 +1,7 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
+import { hydrate } from './hydrate.js';
 import { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from './list.js';
 import { CHILDREN } from './renderToOpcodes/constants.js';
 import { SnapshotInstance } from './snapshot.js';
@@ -52,7 +53,7 @@ export function ssrHydrateByOpcodes(
           const signMap = gSignMap[listElementUniqueID] = new Map();
           gRecycleMap[listElementUniqueID] = new Map();
           const enqueueFunc = enqueueComponentFactory();
-          const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(top.childNodes);
+          const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(top.childNodes, hydrate);
           for (const child of top.childNodes) {
             if (child.__element_root) {
               const childElementUniqueID = __GetElementUniqueID(child.__element_root);

package/runtime/src/pendingListUpdates.ts

@@ -0,0 +1,18 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import type { ListUpdateInfo } from './listUpdateInfo.js';
+
+export const __pendingListUpdates = {
+  values: {} as Record<number, ListUpdateInfo>,
+  clear(): void {
+    this.values = {};
+  },
+  flush(): void {
+    Object.values(this.values).forEach(update => {
+      update.flush();
+    });
+    this.clear();
+  },
+};

package/runtime/src/renderToOpcodes/index.ts

@@ -97,9 +97,9 @@ export const __OpText = 3;
  * @param {Record<string, unknown>} context
  */
 function renderClassComponent(vnode, context) {
-  let type = /** @type {import("preact").ComponentClass<typeof vnode.props>} */ (vnode.type);
+  const type = /** @type {import("preact").ComponentClass<typeof vnode.props>} */ (vnode.type);
 
-  let c = new type(vnode.props, context);
+  const c = new type(vnode.props, context);
 
   vnode[COMPONENT] = c;
   c[VNODE] = vnode;
@@ -162,7 +162,7 @@ function _renderToString(
   if (isArray(vnode)) {
     parent[CHILDREN] = vnode;
     for (let i = 0; i < vnode.length; i++) {
-      let child = vnode[i];
+      const child = vnode[i];
       if (child == null || typeof child === 'boolean') continue;
 
       _renderToString(child, context, isSvgMode, selectValue, parent, opcodes);
@@ -190,7 +190,7 @@ function _renderToString(
     } else {
       contextType = type.contextType;
       if (contextType != null) {
-        let provider = context[contextType.__c];
+        const provider = context[contextType.__c];
         cctx = provider ? provider.props.value : contextType.__;
       }
 
@@ -236,7 +236,7 @@ function _renderToString(
 
     // When a component returns a Fragment node we flatten it in core, so we
     // need to mirror that logic here too
-    let isTopLevelFragment = rendered != null && rendered.type === Fragment
+    const isTopLevelFragment = rendered != null && rendered.type === Fragment
       && rendered.key == null;
     rendered = isTopLevelFragment ? rendered.props.children : rendered;
 
@@ -254,8 +254,8 @@ function _renderToString(
 
   opcodes.push(__OpBegin, vnode);
 
-  for (let name in props) {
-    let v = props[name];
+  for (const name in props) {
+    const v = props[name];
 
     switch (name) {
       case 'children':

package/runtime/src/snapshot/dynamicPartType.ts

@@ -0,0 +1,16 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+/**
+ * Types of dynamic parts that can be updated in a snapshot
+ * These are determined at compile time through static analysis
+ */
+export const enum DynamicPartType {
+  Attr = 0, // Regular attribute updates
+  Spread, // Spread operator in JSX
+  Slot, // Slot for component children
+  Children, // Regular children updates
+  ListChildren, // List/array children updates
+  MultiChildren, // Multiple children updates (compat layer)
+}

package/runtime/src/snapshot/gesture.ts

@@ -1,3 +1,6 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
 import { processGesture } from '../gesture/processGesture.js';
 import type { GestureKind } from '../gesture/types.js';
 import { isMainThreadHydrationFinished } from '../lifecycle/patch/isMainThreadHydrationFinished.js';

package/runtime/src/snapshot/list.ts

@@ -0,0 +1,36 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { hydrate } from '../hydrate.js';
+import { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from '../list.js';
+import type { SnapshotInstance } from '../snapshot.js';
+
+export function snapshotCreateList(
+  pageId: number,
+  _ctx: SnapshotInstance,
+  _expIndex: number,
+): FiberElement {
+  const signMap = new Map<number, SnapshotInstance>();
+  const recycleMap = new Map<string, Map<number, SnapshotInstance>>();
+  const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory([], hydrate);
+  const list = __CreateList(
+    pageId,
+    componentAtIndex,
+    enqueueComponentFactory(),
+    {},
+    componentAtIndexes,
+  );
+  const listID = __GetElementUniqueID(list);
+  gSignMap[listID] = signMap;
+  gRecycleMap[listID] = recycleMap;
+  return list;
+}
+
+export function snapshotDestroyList(si: SnapshotInstance): void {
+  const [, elementIndex] = si.__snapshot_def.slot[0]!;
+  const list = si.__elements![elementIndex]!;
+  const listID = __GetElementUniqueID(list);
+  delete gSignMap[listID];
+  delete gRecycleMap[listID];
+}

package/runtime/src/snapshot/platformInfo.ts

@@ -1,4 +1,8 @@
-import { __pendingListUpdates, ListUpdateInfoRecording } from '../list.js';
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { ListUpdateInfoRecording } from '../listUpdateInfo.js';
+import { __pendingListUpdates } from '../pendingListUpdates.js';
 import { SnapshotInstance } from '../snapshot.js';
 
 const platformInfoVirtualAttributes: Set<string> = /* @__PURE__ */ new Set<string>(['reuse-identifier']);
@@ -13,16 +17,26 @@ const platformInfoAttributes: Set<string> = /* @__PURE__ */ new Set<string>([
   'estimated-main-axis-size-px',
 ]);
 
+export interface PlatformInfo {
+  'reuse-identifier'?: string;
+  'full-span'?: boolean;
+  'item-key'?: string;
+  'sticky-top'?: boolean;
+  'sticky-bottom'?: boolean;
+  'estimated-height'?: number;
+  'estimated-height-px'?: number;
+  'estimated-main-axis-size-px'?: number;
+}
+
 function updateListItemPlatformInfo(
   ctx: SnapshotInstance,
   index: number,
   oldValue: any,
   elementIndex: number,
 ): void {
-  const newValue = ctx.__listItemPlatformInfo = ctx.__values![index];
+  const newValue = ctx.__listItemPlatformInfo = ctx.__values![index] as PlatformInfo;
 
-  // @ts-ignore
-  const list = ctx.__parent;
+  const list = ctx.parentNode;
   if (list?.__snapshot_def.isListHolder) {
     (__pendingListUpdates.values[list.__id] ??= new ListUpdateInfoRecording(list)).onSetAttribute(
       ctx,
@@ -35,7 +49,7 @@ function updateListItemPlatformInfo(
   // No adding / removing keys.
   if (ctx.__elements) {
     const e = ctx.__elements[elementIndex]!;
-    const value = ctx.__values![index];
+    const value = ctx.__values![index] as Record<string, unknown>;
     for (const k in value) {
       if (platformInfoVirtualAttributes.has(k)) {
         continue;

package/runtime/src/snapshot/ref.ts

@@ -3,21 +3,19 @@
 // LICENSE file in the root directory of this source tree.
 import type { Element, Worklet, WorkletRefImpl } from '@lynx-js/react/worklet-runtime/bindings';
 
-import { nextCommitTaskId } from '../lifecycle/patch/commit.js';
-import { SnapshotInstance, backgroundSnapshotInstanceManager } from '../snapshot.js';
+import type { SnapshotInstance } from '../snapshot.js';
 import { workletUnRef } from './workletRef.js';
+import { RefProxy } from '../lifecycle/ref/delay.js';
 
-let globalRefPatch: Record<string, number | null> = {};
-const globalRefsToRemove: Map</* commitId */ number, Map</* sign */ string, /* ref */ any>> = /* @__PURE__ */ new Map();
-const globalRefsToSet: Map</* commitId */ number, Record<string, number>> = /* @__PURE__ */ new Map();
-let nextRefId = 1;
+const refsToClear: Ref[] = [];
+const refsToApply: (Ref | [snapshotInstanceId: number, expIndex: number])[] = [];
 
-function unref(snapshot: SnapshotInstance, recursive: boolean): void {
-  snapshot.__ref_set?.forEach(v => {
-    globalRefPatch[v] = null;
-  });
-  snapshot.__ref_set?.clear();
+type Ref = (((ref: RefProxy) => () => void) | { current: RefProxy | null }) & {
+  _unmount?: () => void;
+  __ref?: { value: number };
+};
 
+function unref(snapshot: SnapshotInstance, recursive: boolean): void {
   snapshot.__worklet_ref_set?.forEach(v => {
     if (v) {
       workletUnRef(v as Worklet | WorkletRefImpl<Element>);
@@ -32,91 +30,65 @@ function unref(snapshot: SnapshotInstance, recursive: boolean): void {
   }
 }
 
-function applyRef(ref: any, value: any) {
-  // TODO: ref: exceptions thrown in user functions should be able to be caught by an Error Boundary
-  if (typeof ref == 'function') {
-    const hasRefUnmount = typeof ref._unmount == 'function';
-    if (hasRefUnmount) {
-      // @ts-ignore TS doesn't like moving narrowing checks into variables
-      ref._unmount();
-    }
+// This function is modified from preact source code.
+function applyRef(ref: Ref, value: null | [snapshotInstanceId: number, expIndex: number]): void {
+  const newRef = value && new RefProxy(value);
 
-    if (!hasRefUnmount || value != null) {
-      // Store the cleanup function on the function
-      // instance object itself to avoid shape
-      // transitioning vnode
-      ref._unmount = ref(value);
-    }
-  } else ref.current = value;
-}
+  try {
+    if (typeof ref == 'function') {
+      const hasRefUnmount = typeof ref._unmount == 'function';
+      if (hasRefUnmount) {
+        ref._unmount!();
+      }
 
-function updateBackgroundRefs(commitId: number): void {
-  const oldRefMap = globalRefsToRemove.get(commitId);
-  if (oldRefMap) {
-    globalRefsToRemove.delete(commitId);
-    for (const ref of oldRefMap.values()) {
-      applyRef(ref, null);
-    }
-  }
-  const newRefMap = globalRefsToSet.get(commitId);
-  if (newRefMap) {
-    globalRefsToSet.delete(commitId);
-    for (const sign in newRefMap) {
-      const ref = backgroundSnapshotInstanceManager.getValueBySign(sign);
-      if (ref) {
-        // TODO: ref: support __REF_FIRE_IMMEDIATELY__
-        const v = newRefMap[sign] && lynx.createSelectorQuery().selectUniqueID(newRefMap[sign]);
-        applyRef(ref, v);
+      if (!hasRefUnmount || newRef != null) {
+        // Store the cleanup function on the function
+        // instance object itself to avoid shape
+        // transitioning vnode
+        ref._unmount = ref(newRef!);
       }
-    }
+    } else ref.current = newRef;
+    /* v8 ignore start */
+  } catch (e) {
+    lynx.reportError(e as Error);
   }
+  /* v8 ignore stop */
 }
 
 function updateRef(
   snapshot: SnapshotInstance,
   expIndex: number,
-  oldValue: any,
+  oldValue: string | null,
   elementIndex: number,
-  spreadKey: string,
 ): void {
-  const value = snapshot.__values![expIndex];
+  const value: unknown = snapshot.__values![expIndex];
   let ref;
-  if (!value) {
-    ref = undefined;
-  } else if (typeof value === 'string') {
+  if (typeof value === 'string') {
     ref = value;
   } else {
-    ref = `${snapshot.__id}:${expIndex}:${spreadKey}`;
+    ref = `react-ref-${snapshot.__id}-${expIndex}`;
   }
 
   snapshot.__values![expIndex] = ref;
-  if (snapshot.__elements && ref) {
-    __SetAttribute(snapshot.__elements[elementIndex]!, 'has-react-ref', true);
-    const uid = __GetElementUniqueID(snapshot.__elements[elementIndex]!);
-    globalRefPatch[ref] = uid;
-    snapshot.__ref_set ??= new Set();
-    snapshot.__ref_set.add(ref);
-  }
-  if (oldValue !== ref) {
-    snapshot.__ref_set?.delete(oldValue);
+  if (snapshot.__elements && oldValue !== ref) {
+    if (oldValue) {
+      __SetAttribute(snapshot.__elements[elementIndex]!, oldValue, undefined);
+    }
+    if (ref) {
+      __SetAttribute(snapshot.__elements[elementIndex]!, ref, 1);
+    }
   }
 }
 
-function takeGlobalRefPatchMap(): Record<string, number | null> {
-  const patch = globalRefPatch;
-  globalRefPatch = {};
-  return patch;
-}
-
-function transformRef(ref: unknown): Function | (object & Record<'current', unknown>) | null | undefined {
+function transformRef(ref: unknown): Ref | null | undefined {
   if (ref === undefined || ref === null) {
     return ref;
   }
   if (typeof ref === 'function' || (typeof ref === 'object' && 'current' in ref)) {
     if ('__ref' in ref) {
-      return ref;
+      return ref as Ref;
     }
-    return Object.defineProperty(ref, '__ref', { value: nextRefId++ });
+    return Object.defineProperty(ref, '__ref', { value: 1 }) as Ref;
   }
   throw new Error(
     `Elements' "ref" property should be a function, or an object created `
@@ -124,25 +96,44 @@ function transformRef(ref: unknown): Function | (object & Record<'current', unkn
   );
 }
 
-function markRefToRemove(sign: string, ref: unknown): void {
-  if (!ref) {
+function applyQueuedRefs(): void {
+  try {
+    for (const ref of refsToClear) {
+      applyRef(ref, null);
+    }
+    for (let i = 0; i < refsToApply.length; i += 2) {
+      const ref = refsToApply[i] as Ref;
+      const value = refsToApply[i + 1] as [snapshotInstanceId: number, expIndex: number] | null;
+      applyRef(ref, value);
+    }
+  } finally {
+    clearQueuedRefs();
+  }
+}
+
+function queueRefAttrUpdate(
+  oldRef: Ref | null | undefined,
+  newRef: Ref | null | undefined,
+  snapshotInstanceId: number,
+  expIndex: number,
+): void {
+  if (oldRef === newRef) {
     return;
   }
-  let oldRefs = globalRefsToRemove.get(nextCommitTaskId);
-  if (!oldRefs) {
-    oldRefs = new Map();
-    globalRefsToRemove.set(nextCommitTaskId, oldRefs);
+  if (oldRef) {
+    refsToClear.push(oldRef);
+  }
+  if (newRef) {
+    refsToApply.push(newRef, [snapshotInstanceId, expIndex]);
   }
-  oldRefs.set(sign, ref);
 }
 
-export {
-  globalRefsToRemove,
-  globalRefsToSet,
-  markRefToRemove,
-  takeGlobalRefPatchMap,
-  transformRef,
-  unref,
-  updateBackgroundRefs,
-  updateRef,
-};
+function clearQueuedRefs(): void {
+  refsToClear.length = 0;
+  refsToApply.length = 0;
+}
+
+/**
+ * @internal
+ */
+export { queueRefAttrUpdate, updateRef, unref, transformRef, applyRef, applyQueuedRefs, clearQueuedRefs, type Ref };