onejs-react 0.1.27 → 0.1.29

package/README.md

@@ -98,6 +98,12 @@ import { render, RenderContainer } from "onejs-react"
 render(<App />, __root)
 ```
 
+### Unmounting & hot-reload teardown
+
+`unmount(container)` tears a root down **synchronously** (`updateContainerSync` + `flushSyncWork` + `flushPassiveEffects`), so `useEffect`/`useLayoutEffect` cleanup functions fire immediately instead of on a later scheduler tick. `unmountAll()` does the same for every active root.
+
+The first `render()` call registers `unmountAll` as a runtime teardown hook (`globalThis.__onTeardown`). The OneJS runtime invokes it right before destroying the JS context on hot reload / stop, so component cleanups run while the context is still alive. Without this, cleanups would be skipped on hot reload and stale C# subscriptions (e.g. from `useEventSync`) would leak across reloads.
+
 ### Type Hierarchy
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "React 19 renderer for OneJS (Unity UI Toolkit)",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/__tests__/mocks.ts

@@ -60,6 +60,7 @@ export class MockVisualElement {
 
     // Child management
     private _children: MockVisualElement[] = [];
+    private _parent: MockVisualElement | null = null;
 
     // Style object (simulates IStyle)
     style: Record<string, unknown> = {};
@@ -85,6 +86,7 @@ export class MockVisualElement {
     Add(child: MockVisualElement): void {
         if (child && !this._children.includes(child)) {
             this._children.push(child);
+            child._parent = this;
         }
     }
 
@@ -96,6 +98,7 @@ export class MockVisualElement {
                 this._children.splice(existingIndex, 1);
             }
             this._children.splice(index, 0, child);
+            child._parent = this;
         }
     }
 
@@ -103,20 +106,29 @@ export class MockVisualElement {
         const index = this._children.indexOf(child);
         if (index >= 0) {
             this._children.splice(index, 1);
+            child._parent = null;
         }
     }
 
     RemoveAt(index: number): void {
         if (index >= 0 && index < this._children.length) {
-            this._children.splice(index, 1);
+            const [child] = this._children.splice(index, 1);
+            if (child) child._parent = null;
         }
     }
 
+    // Mirrors UnityEngine.UIElements.VisualElement.RemoveFromHierarchy(): detach from
+    // the current parent, a no-op when already detached.
+    RemoveFromHierarchy(): void {
+        this._parent?.Remove(this);
+    }
+
     IndexOf(child: MockVisualElement): number {
         return this._children.indexOf(child);
     }
 
     Clear(): void {
+        for (const child of this._children) child._parent = null;
         this._children = [];
     }
 
@@ -356,6 +368,23 @@ export function createMockCS() {
                     }
                 },
             },
+            // Mirrors the real CS.OneJS.NodeBridge: resolve element handles and
+            // delegate to the same tree ops the slow path would have called.
+            NodeBridge: {
+                Add: (parentHandle: number, childHandle: number) => {
+                    const parent = findElementByHandle(parentHandle);
+                    const child = findElementByHandle(childHandle);
+                    if (parent && child) parent.Add(child);
+                },
+                Insert: (parentHandle: number, index: number, childHandle: number) => {
+                    const parent = findElementByHandle(parentHandle);
+                    const child = findElementByHandle(childHandle);
+                    if (parent && child) parent.Insert(index, child);
+                },
+                RemoveFromHierarchy: (childHandle: number) => {
+                    findElementByHandle(childHandle)?.RemoveFromHierarchy();
+                },
+            },
         },
     };
 }

package/src/__tests__/painter.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, vi } from "vitest"
+import { Painter, batchedVisualContent } from "../painter"
+
+// Opcodes mirrored from painter.ts / PainterBridge.cs. These assertions are the
+// guard that the JS recorder and the C# replay engine stay in sync.
+const OP = {
+    BeginPath: 1, ClosePath: 2, MoveTo: 3, LineTo: 4, Arc: 5, ArcTo: 6,
+    Bezier: 7, Quad: 8, Fill: 9, Stroke: 10, LineWidth: 11, FillColor: 12,
+    StrokeColor: 13, LineCap: 14, LineJoin: 15, MiterLimit: 16,
+    DashOffset: 17, DashPattern: 18,
+}
+
+describe("Painter command buffer", () => {
+    let lastBuffer: Float32Array | null
+    let executeSpy: ReturnType<typeof vi.fn>
+    const mgc = {} as never
+
+    beforeEach(() => {
+        lastBuffer = null
+        executeSpy = vi.fn((_mgc: unknown, buffer: Float32Array) => {
+            lastBuffer = buffer
+        })
+        // setup.ts installs a fresh mock CS each test; augment it with PainterBridge.
+        ;(globalThis as any).CS.OneJS.PainterBridge = { Execute: executeSpy }
+    })
+
+    it("flushes recorded ops as a Float32Array and resets", () => {
+        const p = new Painter()
+        p.beginPath()
+        p.moveTo(10, 20)
+        p.lineTo(30, 40)
+        p.fill()
+
+        expect(p.length).toBe(9)
+        p.flush(mgc)
+
+        expect(executeSpy).toHaveBeenCalledTimes(1)
+        expect(lastBuffer).toBeInstanceOf(Float32Array)
+        expect(Array.from(lastBuffer!)).toEqual([
+            OP.BeginPath,
+            OP.MoveTo, 10, 20,
+            OP.LineTo, 30, 40,
+            OP.Fill, 0, // default rule = NonZero
+        ])
+        // Buffer is reset after flush so the next repaint starts clean.
+        expect(p.length).toBe(0)
+    })
+
+    it("applies defaults: arc direction Clockwise (0) and color alpha 1", () => {
+        const p = new Painter()
+        p.fillColor(0.5, 0.25, 0.125)
+        p.arc(100, 100, 80, 0, 0.5)
+        p.flush(mgc)
+
+        expect(Array.from(lastBuffer!)).toEqual([
+            OP.FillColor, 0.5, 0.25, 0.125, 1,
+            OP.Arc, 100, 100, 80, 0, 0.5, 0, // dir default = Clockwise
+        ])
+    })
+
+    it("honors explicit enum options", () => {
+        const p = new Painter()
+        p.lineCap(Painter.LineCap.Round)
+        p.lineJoin(Painter.LineJoin.Bevel)
+        p.fill(Painter.FillRule.OddEven)
+        p.flush(mgc)
+
+        expect(Array.from(lastBuffer!)).toEqual([
+            OP.LineCap, 1,
+            OP.LineJoin, 1,
+            OP.Fill, 1,
+        ])
+    })
+
+    it("flush is a no-op when nothing was recorded", () => {
+        new Painter().flush(mgc)
+        expect(executeSpy).not.toHaveBeenCalled()
+    })
+
+    it("methods are chainable", () => {
+        const p = new Painter()
+        const ret = p.beginPath().moveTo(0, 0).lineTo(1, 1)
+        expect(ret).toBe(p)
+    })
+
+    it("batchedVisualContent reuses one buffer and does not accumulate across repaints", () => {
+        const draw = (p: Painter) => {
+            p.beginPath()
+            p.moveTo(1, 2)
+        }
+        const callback = batchedVisualContent(draw)
+
+        callback(mgc)
+        const first = Array.from(lastBuffer!)
+        callback(mgc)
+        const second = Array.from(lastBuffer!)
+
+        expect(executeSpy).toHaveBeenCalledTimes(2)
+        expect(first).toEqual([OP.BeginPath, OP.MoveTo, 1, 2])
+        // Second repaint is identical, not double-length - the painter cleared.
+        expect(second).toEqual(first)
+    })
+})

package/src/__tests__/renderer.test.tsx

@@ -10,7 +10,7 @@
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import React, { useState, useEffect } from 'react';
-import { render, unmount, createPortal, getRoot } from '../renderer';
+import { render, unmount, unmountAll, createPortal, getRoot } from '../renderer';
 import { View, Label, Button } from '../components';
 import { MockVisualElement, MockLength, MockColor, createMockContainer, flushMicrotasks, getEventAPI } from './mocks';
 
@@ -402,6 +402,56 @@ describe('renderer', () => {
 
             expect(cleanupFn).toHaveBeenCalled();
         });
+
+        it('fires effect cleanup synchronously on unmount (no tick needed)', async () => {
+            // On hot-reload teardown the JS context is destroyed immediately after
+            // unmount, so cleanups must run synchronously rather than on a later tick.
+            const container = createMockContainer();
+            const cleanupFn = vi.fn();
+
+            function CleanupComponent() {
+                useEffect(() => cleanupFn, []);
+                return <ojs-view />;
+            }
+
+            render(<CleanupComponent />, container as any);
+            await flushMicrotasks();
+            expect(cleanupFn).not.toHaveBeenCalled();
+
+            unmount(container as any);
+            // No flushMicrotasks: cleanup must already have run.
+            expect(cleanupFn).toHaveBeenCalledTimes(1);
+            expect(getRoot(container as any)).toBeUndefined();
+        });
+
+        it('unmountAll tears down every root and fires cleanups (hot reload)', async () => {
+            // unmountAll is what the runtime teardown hook (__runTeardown) invokes
+            // before destroying the context on hot reload / stop.
+            const containerA = createMockContainer();
+            const containerB = createMockContainer();
+            const cleanupA = vi.fn();
+            const cleanupB = vi.fn();
+
+            function CompA() {
+                useEffect(() => cleanupA, []);
+                return <ojs-view />;
+            }
+            function CompB() {
+                useEffect(() => cleanupB, []);
+                return <ojs-view />;
+            }
+
+            render(<CompA />, containerA as any);
+            render(<CompB />, containerB as any);
+            await flushMicrotasks();
+
+            unmountAll();
+
+            expect(cleanupA).toHaveBeenCalledTimes(1);
+            expect(cleanupB).toHaveBeenCalledTimes(1);
+            expect(getRoot(containerA as any)).toBeUndefined();
+            expect(getRoot(containerB as any)).toBeUndefined();
+        });
     });
 
     describe('conditional rendering', () => {

package/src/host-config.ts

@@ -75,6 +75,11 @@ declare const CS: {
             ApplyStyles: (element: CSObject, styles: Record<string, unknown>) => void;
             AddClassesBatch: (element: CSObject, classes: string[]) => void;
         };
+        NodeBridge: {
+            Add: (parentHandle: number, childHandle: number) => void;
+            Insert: (parentHandle: number, index: number, childHandle: number) => void;
+            RemoveFromHierarchy: (childHandle: number) => void;
+        };
     };
 };
 
@@ -571,6 +576,35 @@ function untrackParent(child: CSObject) {
     }
 }
 
+// Tree wiring routes through CS.OneJS.NodeBridge, a zero-alloc fast path, instead
+// of the per-element VisualElement.Add/Insert/RemoveFromHierarchy reflection calls.
+// Handles are read from the proxy's __csHandle (a JS-side field, no crossing).
+// Falls back to the direct proxy call when a handle isn't available (e.g. a
+// container that isn't a handle-tracked element).
+function elementHandle(el: CSObject): number {
+    return (el as unknown as { __csHandle?: number }).__csHandle ?? -1;
+}
+
+function nodeAdd(parentEl: CSObject, childEl: CSObject) {
+    const ph = elementHandle(parentEl);
+    const ch = elementHandle(childEl);
+    if (ph > 0 && ch > 0) CS.OneJS.NodeBridge.Add(ph, ch);
+    else parentEl.Add(childEl);
+}
+
+function nodeInsert(parentEl: CSObject, index: number, childEl: CSObject) {
+    const ph = elementHandle(parentEl);
+    const ch = elementHandle(childEl);
+    if (ph > 0 && ch > 0) CS.OneJS.NodeBridge.Insert(ph, index, ch);
+    else parentEl.Insert(index, childEl);
+}
+
+function nodeRemoveFromHierarchy(childEl: CSObject) {
+    const ch = elementHandle(childEl);
+    if (ch > 0) CS.OneJS.NodeBridge.RemoveFromHierarchy(ch);
+    else childEl.RemoveFromHierarchy();
+}
+
 
 // Apply event handlers
 function applyEvents(instance: Instance, props: BaseProps) {
@@ -655,7 +689,7 @@ function unmergTextChildren(parentInstance: Instance) {
     // Add each merged text child as an actual visual child
     for (const child of children) {
         child.mergedInto = undefined;
-        parentInstance.element.Add(child.element);
+        nodeAdd(parentInstance.element, child.element);
     }
 
     // Clear the merged children list
@@ -727,12 +761,12 @@ function insertElementBefore(parentEl: CSObject, childEl: CSObject, beforeChildE
     if (beforeIndex < 0) {
         // beforeChild isn't actually in the parent (should not normally happen).
         // Fall back to appending, preserving the previous fallback behavior.
-        parentEl.Add(childEl);
+        nodeAdd(parentEl, childEl);
         return;
     }
     const childIndex = parentEl.IndexOf(childEl);
     const target = childIndex >= 0 && childIndex < beforeIndex ? beforeIndex - 1 : beforeIndex;
-    parentEl.Insert(target, childEl);
+    nodeInsert(parentEl, target, childEl);
 }
 
 // MARK: Component-specific prop handlers
@@ -1092,7 +1126,7 @@ export const hostConfig = {
             appendMergedTextChild(parentInstance, child);
         } else {
             handleNonTextChild(parentInstance);
-            parentInstance.element.Add(child.element);
+            nodeAdd(parentInstance.element, child.element);
         }
         trackParent(child.element, parentInstance.element);
     },
@@ -1102,13 +1136,13 @@ export const hostConfig = {
             appendMergedTextChild(parentInstance, child);
         } else {
             handleNonTextChild(parentInstance);
-            parentInstance.element.Add(child.element);
+            nodeAdd(parentInstance.element, child.element);
         }
         trackParent(child.element, parentInstance.element);
     },
 
     appendChildToContainer(container: Container, child: Instance) {
-        container.Add(child.element);
+        nodeAdd(container, child.element);
         // Container is the root - no parent to track
     },
 
@@ -1132,14 +1166,20 @@ export const hostConfig = {
             removeMergedTextChild(parentInstance, child);
         } else {
             __eventAPI.removeAllEventListeners(child.element);
-            parentInstance.element.Remove(child.element);
+            // RemoveFromHierarchy() detaches the element from its current parent and
+            // is a safe no-op if it's already detached. Using it instead of
+            // parentInstance.element.Remove(child.element) keeps unmount from throwing
+            // when the root was cleared before React tore the tree down (hot reload).
+            nodeRemoveFromHierarchy(child.element);
         }
         untrackParent(child.element);
     },
 
     removeChildFromContainer(container: Container, child: Instance) {
         __eventAPI.removeAllEventListeners(child.element);
-        container.Remove(child.element);
+        // See removeChild: tolerant of an already-detached element so a hot-reload
+        // teardown (which clears the root first) can still unmount cleanly.
+        nodeRemoveFromHierarchy(child.element);
         untrackParent(child.element);
     },
 

package/src/index.ts

@@ -19,7 +19,7 @@ export {
 export { registerElement } from './host-config';
 
 // Renderer
-export { render, unmount, createPortal, flushSync, batchedUpdates, getDebugInfo } from './renderer';
+export { render, unmount, unmountAll, createPortal, flushSync, batchedUpdates, getDebugInfo } from './renderer';
 
 // Portals
 export { Portal } from './portal';
@@ -48,6 +48,9 @@ export type {
 // Vector Drawing
 export { Transform2D, useVectorContent } from './vector';
 
+// Batched vector drawing - single-crossing command buffer (see painter.ts)
+export { Painter, batchedVisualContent, useBatchedVectorContent } from './painter';
+
 // Sync Hooks & C# Interop Utilities
 export { useFrameSync, useFrameSyncWith, useThrottledSync, useEventSync, toArray } from './hooks';
 export type { EventSource } from './hooks';

package/src/painter.ts

@@ -0,0 +1,212 @@
+/**
+ * Batched vector drawing for OneJS.
+ *
+ * A Painter records drawing ops into a flat numeric buffer and flushes them to
+ * C# in a single crossing via CS.OneJS.PainterBridge.Execute, instead of making
+ * one reflection crossing per Painter2D call (and per `new Vector2`/`new Color`)
+ * the way raw mgc.painter2D usage does. On the QuickJS interpreter those
+ * per-op crossings are the dominant cost of custom vector drawing.
+ *
+ * For the common case, wrap your draw function with batchedVisualContent so the
+ * flush is automatic:
+ *
+ *     import { batchedVisualContent } from "onejs-react"
+ *
+ *     <View
+ *         style={{ width: 200, height: 200 }}
+ *         onGenerateVisualContent={batchedVisualContent((p) => {
+ *             p.fillColor(1, 0, 0, 1)
+ *             p.beginPath()
+ *             p.arc(100, 100, 80, 0, Math.PI * 2)
+ *             p.fill()
+ *         })}
+ *     />
+ *
+ * Gradients, textures, and DrawText are not part of the buffer; for those keep
+ * using the raw mgc.painter2D / mgc API.
+ */
+
+import { useRef, useEffect, type DependencyList, type RefObject } from "react"
+import type { VisualElement, MeshGenerationContext, GenerateVisualContentCallback } from "./types"
+
+declare const CS: {
+    OneJS: {
+        PainterBridge: {
+            Execute: (mgc: MeshGenerationContext, buffer: Float32Array) => void
+        }
+    }
+}
+
+// Opcode contract - must match Assets/Singtaa/OneJS/Runtime/PainterBridge.cs.
+const OP_BEGIN_PATH = 1
+const OP_CLOSE_PATH = 2
+const OP_MOVE_TO = 3
+const OP_LINE_TO = 4
+const OP_ARC = 5
+const OP_ARC_TO = 6
+const OP_BEZIER_CURVE_TO = 7
+const OP_QUADRATIC_CURVE_TO = 8
+const OP_FILL = 9
+const OP_STROKE = 10
+const OP_LINE_WIDTH = 11
+const OP_FILL_COLOR = 12
+const OP_STROKE_COLOR = 13
+const OP_LINE_CAP = 14
+const OP_LINE_JOIN = 15
+const OP_MITER_LIMIT = 16
+const OP_DASH_OFFSET = 17
+const OP_DASH_PATTERN = 18
+
+/**
+ * Records Painter2D drawing ops into a numeric buffer for batched playback.
+ *
+ * Methods are chainable. Coordinates and colors are plain numbers (no CS object
+ * construction), which is the whole point - the buffer crosses to C# once and
+ * the structs are built C#-side.
+ *
+ * Enum-like options live as statics so they do not collide with the CS enum
+ * type aliases (ArcDirection, FillRule, ...) re-exported from the package root:
+ *   p.arc(..., Painter.ArcDirection.CounterClockwise)
+ *   p.fill(Painter.FillRule.OddEven)
+ */
+export class Painter {
+    /** Stroke cap style. Values are the buffer contract, not Unity enum values. */
+    static readonly LineCap = { Butt: 0, Round: 1 } as const
+    /** Stroke join style. */
+    static readonly LineJoin = { Miter: 0, Bevel: 1, Round: 2 } as const
+    /** Fill rule for self-intersecting paths. */
+    static readonly FillRule = { NonZero: 0, OddEven: 1 } as const
+    /** Arc sweep direction. */
+    static readonly ArcDirection = { Clockwise: 0, CounterClockwise: 1 } as const
+
+    private _buf: number[] = []
+
+    /** Discard all recorded ops, keeping allocated capacity for reuse. */
+    clear(): this {
+        this._buf.length = 0
+        return this
+    }
+
+    /** Number of recorded floats. Useful for diagnostics and tests. */
+    get length(): number {
+        return this._buf.length
+    }
+
+    beginPath(): this { this._buf.push(OP_BEGIN_PATH); return this }
+    closePath(): this { this._buf.push(OP_CLOSE_PATH); return this }
+    moveTo(x: number, y: number): this { this._buf.push(OP_MOVE_TO, x, y); return this }
+    lineTo(x: number, y: number): this { this._buf.push(OP_LINE_TO, x, y); return this }
+
+    /** Arc with center (cx, cy). Angles in radians. dir uses Painter.ArcDirection. */
+    arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, dir: number = 0 /* Clockwise */): this {
+        this._buf.push(OP_ARC, cx, cy, radius, startAngle, endAngle, dir)
+        return this
+    }
+
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this {
+        this._buf.push(OP_ARC_TO, x1, y1, x2, y2, radius)
+        return this
+    }
+
+    bezierCurveTo(c1x: number, c1y: number, c2x: number, c2y: number, x: number, y: number): this {
+        this._buf.push(OP_BEZIER_CURVE_TO, c1x, c1y, c2x, c2y, x, y)
+        return this
+    }
+
+    quadraticCurveTo(cx: number, cy: number, x: number, y: number): this {
+        this._buf.push(OP_QUADRATIC_CURVE_TO, cx, cy, x, y)
+        return this
+    }
+
+    /** Fill the current path. rule uses Painter.FillRule (default NonZero). */
+    fill(rule: number = 0 /* NonZero */): this { this._buf.push(OP_FILL, rule); return this }
+    stroke(): this { this._buf.push(OP_STROKE); return this }
+
+    lineWidth(w: number): this { this._buf.push(OP_LINE_WIDTH, w); return this }
+    fillColor(r: number, g: number, b: number, a: number = 1): this { this._buf.push(OP_FILL_COLOR, r, g, b, a); return this }
+    strokeColor(r: number, g: number, b: number, a: number = 1): this { this._buf.push(OP_STROKE_COLOR, r, g, b, a); return this }
+    lineCap(cap: number): this { this._buf.push(OP_LINE_CAP, cap); return this }
+    lineJoin(join: number): this { this._buf.push(OP_LINE_JOIN, join); return this }
+    miterLimit(limit: number): this { this._buf.push(OP_MITER_LIMIT, limit); return this }
+    dashOffset(offset: number): this { this._buf.push(OP_DASH_OFFSET, offset); return this }
+    dashPattern(dash: number, gap: number): this { this._buf.push(OP_DASH_PATTERN, dash, gap); return this }
+
+    /**
+     * Send all recorded ops to C# in one crossing, then reset the buffer.
+     * No-op when nothing was recorded.
+     */
+    flush(mgc: MeshGenerationContext): void {
+        if (this._buf.length === 0) return
+        CS.OneJS.PainterBridge.Execute(mgc, Float32Array.from(this._buf))
+        this._buf.length = 0
+    }
+}
+
+/**
+ * Wrap a draw function so it records into a reused Painter and auto-flushes in
+ * one crossing after each repaint. The recommended entry point for batched
+ * drawing - assign the result straight to onGenerateVisualContent.
+ */
+export function batchedVisualContent(draw: (p: Painter) => void): GenerateVisualContentCallback {
+    const painter = new Painter()
+    return (mgc: MeshGenerationContext) => {
+        painter.clear()
+        draw(painter)
+        painter.flush(mgc)
+    }
+}
+
+/**
+ * Batched counterpart to useVectorContent. Returns a ref to attach to a
+ * VisualElement; the draw callback records into a reused Painter that flushes in
+ * a single crossing. Repaints automatically when deps change.
+ *
+ * @example
+ * const ref = useBatchedVectorContent((p) => {
+ *     p.fillColor(1, 0, 0, 1)
+ *     p.beginPath()
+ *     p.arc(100, 100, radius, 0, Math.PI * 2)
+ *     p.fill()
+ * }, [radius])
+ * return <View ref={ref} style={{ width: 200, height: 200 }} />
+ */
+export function useBatchedVectorContent(
+    draw: (p: Painter) => void,
+    deps: DependencyList = []
+): RefObject<VisualElement | null> {
+    const ref = useRef<VisualElement | null>(null)
+    const drawRef = useRef(draw)
+    drawRef.current = draw
+
+    useEffect(() => {
+        const element = ref.current
+        if (!element) return
+
+        const painter = new Painter()
+        const callback: GenerateVisualContentCallback = (mgc) => {
+            painter.clear()
+            drawRef.current(painter)
+            painter.flush(mgc)
+        }
+
+        const el = element as unknown as { generateVisualContent: GenerateVisualContentCallback | null }
+        el.generateVisualContent = callback
+        element.MarkDirtyRepaint()
+
+        return () => {
+            el.generateVisualContent = null
+        }
+    }, [])
+
+    const isFirstRender = useRef(true)
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false
+            return
+        }
+        const element = ref.current
+        if (element) element.MarkDirtyRepaint()
+    }, deps)
+
+    return ref
+}

package/src/renderer.ts

@@ -19,7 +19,24 @@ reconciler.injectIntoDevTools({
 // Track roots for hot reload / re-render
 const roots = new Map<RenderContainer, ReturnType<typeof reconciler.createContainer>>();
 
+// Register unmountAll as a runtime teardown hook exactly once. The OneJS runtime
+// (QuickJSUIBridge.Dispose) invokes __runTeardown() right before destroying the JS
+// context on hot reload / stop. Unmounting here fires useEffect/useLayoutEffect
+// cleanups while the context is still alive; otherwise they never run and stale
+// C# subscriptions (e.g. from useEventSync) leak across reloads.
+let teardownHookRegistered = false;
+function ensureTeardownHook(): void {
+  if (teardownHookRegistered) return;
+  const g = globalThis as any;
+  if (typeof g !== 'undefined' && typeof g.__onTeardown === 'function') {
+    g.__onTeardown(unmountAll);
+    teardownHookRegistered = true;
+  }
+}
+
 export function render(element: ReactNode, container: RenderContainer): void {
+  ensureTeardownHook();
+
   let root = roots.get(container);
 
   if (!root) {
@@ -52,9 +69,33 @@ export function render(element: ReactNode, container: RenderContainer): void {
 
 export function unmount(container: RenderContainer): void {
   const root = roots.get(container);
-  if (root) {
+  if (!root) return;
+  roots.delete(container);
+
+  const r = reconciler as any;
+  // Tear the tree down synchronously. updateContainer(null, ...) only *schedules*
+  // the unmount, which never gets a scheduler tick during a hot-reload teardown
+  // (the context is destroyed immediately after). updateContainerSync + flushSyncWork
+  // runs the commit now, firing useLayoutEffect cleanups during it.
+  if (typeof r.updateContainerSync === 'function') {
+    r.updateContainerSync(null, root, null, null);
+    if (typeof r.flushSyncWork === 'function') r.flushSyncWork();
+  } else {
     reconciler.updateContainer(null, root, null, () => {});
-    roots.delete(container);
+  }
+  // useEffect (passive) cleanups are queued by the unmount commit, not run by it.
+  // Flush them now so they also fire before the context goes away.
+  if (typeof r.flushPassiveEffects === 'function') r.flushPassiveEffects();
+}
+
+/**
+ * Unmount every active root. Invoked by the OneJS runtime teardown hook before the
+ * JS context is destroyed (hot reload / stop) so component cleanups run.
+ */
+export function unmountAll(): void {
+  // Snapshot keys first: unmount() mutates the roots map.
+  for (const container of Array.from(roots.keys())) {
+    unmount(container);
   }
 }
 

package/src/types.ts

@@ -675,6 +675,7 @@ export interface VisualElement extends RenderContainer {
   Insert: (index: number, child: VisualElement) => void;
   Remove: (child: VisualElement) => void;
   RemoveAt: (index: number) => void;
+  RemoveFromHierarchy: () => void;
   Clear: () => void;
   IndexOf: (child: VisualElement) => number;
   childCount: number;