feat(runtime): add synchronization for direct hook assignments in reactive context

- Implemented a test to ensure that direct hook assignments are synchronized with cached callbacks in the reactive runtime.
- Updated `effect` and `resource` APIs to use `registerWatcherCleanup` instead of `registerEffectCleanup` for better clarity and consistency.
- Introduced new propagation logic in the reactivity system to handle branching and once propagation more efficiently.
- Added performance tests for various propagation strategies, including branching and tree structures, to evaluate efficiency.
- Refactored propagation utilities and watchers to improve performance and maintainability.

Author: volynetstyle

packages/@reflex/runtime/rollup.perf.config.ts

@@ -33,5 +33,6 @@ export default [
   createPerfDomain("tests/perf/tracking-connect.jit.mjs", "dist/tracking-connect.jit.js"),
   createPerfDomain("tests/perf/tracking-lifecycle.jit.mjs", "dist/tracking-lifecycle.jit.js"),
   createPerfDomain("tests/perf/tracking-policies.jit.mjs", "dist/tracking-policies.jit.js"),
+  createPerfDomain("tests/perf/propagate-stack-compare.jit.mjs", "dist/propagate-stack-compare.jit.js"),
   createPerfDomain("tests/perf/walkers.jit.mjs", "dist/walkers.jit.js"),
 ];

packages/@reflex/runtime/src/api/watcher.ts

@@ -11,7 +11,7 @@ import {
 } from "../reactivity/shape";
 import { disposeNode } from "../reactivity/shape/methods/connect";
 import { executeNodeComputation } from "../reactivity/engine/execute";
-import { shouldRecompute } from "../reactivity/walkers/shouldRecompute";
+import { shouldRecompute } from "../reactivity";
 import { getDefaultContext } from "../reactivity/context";
 
 export function runWatcher(

packages/@reflex/runtime/src/reactivity/context.ts

@@ -8,6 +8,22 @@ export interface EngineHooks {
 
 export type CleanupRegistrar = (cleanup: () => void) => void;
 
+type OnEffectInvalidatedHook = EngineHooks["onEffectInvalidated"];
+type OnReactiveSettledHook = EngineHooks["onReactiveSettled"];
+
+const EFFECT_INVALIDATED_HOOK = 1;
+const REACTIVE_SETTLED_HOOK = 1 << 1;
+
+function normalizeOwnHook<T extends keyof EngineHooks>(
+  hooks: EngineHooks,
+  key: T,
+): EngineHooks[T] | undefined {
+  if (!Object.hasOwn(hooks, key)) return undefined;
+
+  const hook = hooks[key];
+  return typeof hook === "function" ? hook : undefined;
+}
+
 /**
  * ExecutionContext управляет состоянием вычисления и уведомлениями host'у.
  * 
@@ -26,30 +42,57 @@ export class ExecutionContext {
   propagationDepth = 0;
   cleanupRegistrar: CleanupRegistrar | null = null;
   readonly hooks: EngineHooks;
+  onEffectInvalidatedHook: OnEffectInvalidatedHook = undefined;
+  onReactiveSettledHook: OnReactiveSettledHook = undefined;
+  private hookMask = 0;
 
   constructor(hooks: EngineHooks = {}) {
     this.hooks = {};
+    // Keep the public hook snapshot and the hot-path caches synchronized.
+    Object.defineProperties(this.hooks, {
+      onEffectInvalidated: {
+        enumerable: true,
+        get: () => this.onEffectInvalidatedHook,
+        set: (hook: OnEffectInvalidatedHook) => {
+          this.setOnEffectInvalidatedHook(hook);
+        },
+      },
+      onReactiveSettled: {
+        enumerable: true,
+        get: () => this.onReactiveSettledHook,
+        set: (hook: OnReactiveSettledHook) => {
+          this.setOnReactiveSettledHook(hook);
+        },
+      },
+    });
     this.setHooks(hooks);
   }
 
   dispatchWatcherEvent(node: ReactiveNode): void {
+    const hook = this.onEffectInvalidatedHook;
+
     if (__DEV__) {
       recordDebugEvent(this, "watcher:invalidated", {
         node,
       });
+    } else if (hook === undefined) {
+      return;
     }
 
-    this.hooks.onEffectInvalidated?.(node);
+    hook?.(node);
   }
 
   maybeNotifySettled(): void {
-    if (this.propagationDepth === 0 && this.activeComputed === null) {
-      if (__DEV__) {
-        recordDebugEvent(this, "context:settled");
-      }
+    if (!__DEV__ && (this.hookMask & REACTIVE_SETTLED_HOOK) === 0) return;
+    if (this.propagationDepth !== 0 || this.activeComputed !== null) return;
 
-      this.hooks.onReactiveSettled?.();
+    const hook = this.onReactiveSettledHook;
+
+    if (__DEV__) {
+      recordDebugEvent(this, "context:settled");
     }
+
+    hook?.();
   }
 
   enterPropagation(): void {
@@ -87,38 +130,23 @@ export class ExecutionContext {
   }
 
   setHooks(hooks: EngineHooks = {}): void {
-    const onEffectInvalidated = Object.hasOwn(hooks, "onEffectInvalidated")
-      ? hooks.onEffectInvalidated
-      : undefined;
-    const onReactiveSettled = Object.hasOwn(hooks, "onReactiveSettled")
-      ? hooks.onReactiveSettled
-      : undefined;
-
-    if (typeof onEffectInvalidated === "function") {
-      this.hooks.onEffectInvalidated = onEffectInvalidated;
-    } else {
-      this.hooks.onEffectInvalidated = undefined;
-    }
+    const onEffectInvalidated = normalizeOwnHook(hooks, "onEffectInvalidated");
+    const onReactiveSettled = normalizeOwnHook(hooks, "onReactiveSettled");
 
-    if (typeof onReactiveSettled === "function") {
-      this.hooks.onReactiveSettled = onReactiveSettled;
-    } else {
-      this.hooks.onReactiveSettled = undefined;
-    }
+    this.hooks.onEffectInvalidated = onEffectInvalidated;
+    this.hooks.onReactiveSettled = onReactiveSettled;
 
     if (__DEV__) {
       recordDebugEvent(this, "context:hooks", {
         detail: {
-          hasOnEffectInvalidated:
-            typeof this.hooks.onEffectInvalidated === "function",
-          hasOnReactiveSettled:
-            typeof this.hooks.onReactiveSettled === "function",
+          hasOnEffectInvalidated: this.onEffectInvalidatedHook !== undefined,
+          hasOnReactiveSettled: this.onReactiveSettledHook !== undefined,
         },
       });
     }
   }
 
-  registerEffectCleanup(cleanup: () => void): void {
+  registerWatcherCleanup(cleanup: () => void): void {
     this.cleanupRegistrar?.(cleanup);
   }
 
@@ -135,6 +163,28 @@ export class ExecutionContext {
       this.cleanupRegistrar = previousRegistrar;
     }
   }
+
+  private setOnEffectInvalidatedHook(hook: OnEffectInvalidatedHook): void {
+    this.onEffectInvalidatedHook =
+      typeof hook === "function" ? hook : undefined;
+    this.updateHookMask(
+      EFFECT_INVALIDATED_HOOK,
+      this.onEffectInvalidatedHook !== undefined,
+    );
+  }
+
+  private setOnReactiveSettledHook(hook: OnReactiveSettledHook): void {
+    this.onReactiveSettledHook =
+      typeof hook === "function" ? hook : undefined;
+    this.updateHookMask(
+      REACTIVE_SETTLED_HOOK,
+      this.onReactiveSettledHook !== undefined,
+    );
+  }
+
+  private updateHookMask(bit: number, enabled: boolean): void {
+    this.hookMask = enabled ? this.hookMask | bit : this.hookMask & ~bit;
+  }
 }
 
 /**

packages/@reflex/runtime/src/reactivity/engine/compute.ts

@@ -1,14 +1,8 @@
 import { compare } from "../../api/compare";
 import type { ReactiveNode } from "../shape";
 import type { ExecutionContext } from "../context";
-import {
-  devAssertRecomputeAlive,
-  devRecordRecompute,
-} from "../dev";
-import {
-  clearDirtyState,
-  isDisposedNode,
-} from "../shape";
+import { devAssertRecomputeAlive, devRecordRecompute } from "../dev";
+import { clearDirtyState, isDisposedNode } from "../shape";
 import { executeNodeComputationRaw } from "./execute";
 import { getDefaultContext } from "../context";
 
@@ -26,7 +20,9 @@ export function recompute(
   const prev = node.payload;
   let next: unknown = prev;
   let hasChanged = false;
+
   next = executeNodeComputationRaw(node, context);
+
   if (!isDisposedNode(node)) {
     const changed = !compare(prev, next);
     hasChanged = changed;

packages/@reflex/runtime/src/reactivity/engine/execute.ts

@@ -1,7 +1,6 @@
 import type { ExecutionContext } from "../context";
 import { recordDebugEvent } from "../../debug";
-import type {
-  ReactiveNode} from "../shape";
+import type { ReactiveNode } from "../shape";
 import {
   ReactiveNodeState,
   clearNodeComputing,
@@ -12,6 +11,32 @@ import { getDefaultContext } from "../context";
 
 type CommitComputation<T> = (result: unknown) => T;
 
+function prepareNodeExecution(
+  node: ReactiveNode,
+  context: ExecutionContext,
+): () => void {
+  node.depsTail = null;
+  node.state =
+    (node.state & ~ReactiveNodeState.Visited) | ReactiveNodeState.Tracking;
+  markNodeComputing(node);
+
+  const prevActive = context.activeComputed;
+  context.activeComputed = node;
+  let restored = false;
+
+  if (__DEV__) {
+    recordDebugEvent(context, "compute:start", {
+      node,
+    });
+  }
+
+  return () => {
+    if (restored) return;
+    restored = true;
+    context.activeComputed = prevActive;
+  };
+}
+
 export function executeNodeComputationRaw(
   node: ReactiveNode,
   context: ExecutionContext = getDefaultContext(),
@@ -28,28 +53,12 @@ export function executeNodeComputationRaw(
   }
 
   const compute = node.compute!;
-  node.depsTail = null;
-  node.state =
-    (node.state & ~ReactiveNodeState.Visited) | ReactiveNodeState.Tracking;
-  markNodeComputing(node);
-
-  const prevActive = context.activeComputed;
-  context.activeComputed = node;
+  const restoreActive = prepareNodeExecution(node, context);
   let result: unknown;
 
-  if (__DEV__) {
-    recordDebugEvent(context, "compute:start", {
-      node,
-    });
-  }
-
   try {
-    try {
-      result = compute();
-    } finally {
-      context.activeComputed = prevActive;
-    }
-
+    result = compute();
+    restoreActive();
     cleanupStaleSources(node, context);
 
     if (__DEV__) {
@@ -63,6 +72,8 @@ export function executeNodeComputationRaw(
 
     return result;
   } catch (error) {
+    restoreActive();
+
     if (__DEV__) {
       recordDebugEvent(context, "compute:error", {
         node,
@@ -97,28 +108,12 @@ export function executeNodeComputation<T>(
   }
 
   const compute = node.compute!;
-  node.depsTail = null;
-  node.state =
-    (node.state & ~ReactiveNodeState.Visited) | ReactiveNodeState.Tracking;
-  markNodeComputing(node);
-
-  const prevActive = context.activeComputed;
-  context.activeComputed = node;
+  const restoreActive = prepareNodeExecution(node, context);
   let result: unknown;
 
-  if (__DEV__) {
-    recordDebugEvent(context, "compute:start", {
-      node,
-    });
-  }
-
   try {
-    try {
-      result = compute();
-    } finally {
-      context.activeComputed = prevActive;
-    }
-
+    result = compute();
+    restoreActive();
     cleanupStaleSources(node, context);
     const committed = commit(result);
 
@@ -133,6 +128,8 @@ export function executeNodeComputation<T>(
 
     return committed;
   } catch (error) {
+    restoreActive();
+
     if (__DEV__) {
       recordDebugEvent(context, "compute:error", {
         node,

packages/@reflex/runtime/src/reactivity/walkers/index.ts

@@ -1,2 +1,4 @@
+export * from "./propagate.constants";
+export * from "./propagate.once";
 export * from "./propagate";
-export * from "./shouldRecompute";
+export * from "./recompute";