onejs-react 0.1.18 → 0.1.20

package/package.json

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

package/src/__tests__/hooks.test.tsx

@@ -10,7 +10,7 @@
 
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
 import React from "react"
-import { useFrameSync, useFrameSyncWith, toArray } from "../hooks"
+import { useFrameSync, useFrameSyncWith, useEventSync, toArray } from "../hooks"
 import { render, unmount } from "../renderer"
 import { createMockContainer, flushMicrotasks } from "./mocks"
 
@@ -579,3 +579,435 @@ describe("useFrameSyncWith (deprecated)", () => {
         expect(capturedValue.x).toBe(10)
     })
 })
+
+// ===========================================================================
+// useEventSync
+// ===========================================================================
+
+/**
+ * Creates a mock C# object with event subscription support.
+ * Simulates the bootstrap's add_EventName / remove_EventName proxy mechanism.
+ */
+function createMockCSharpObject(initialValues: Record<string, unknown>) {
+    const listeners = new Map<string, Set<Function>>()
+    const values = { ...initialValues }
+
+    const proxy = new Proxy(values, {
+        get(target, prop) {
+            const propName = String(prop)
+            if (propName.startsWith("add_")) {
+                return (handler: Function) => {
+                    const eventName = propName.slice(4)
+                    if (!listeners.has(eventName)) listeners.set(eventName, new Set())
+                    listeners.get(eventName)!.add(handler)
+                }
+            }
+            if (propName.startsWith("remove_")) {
+                return (handler: Function) => {
+                    const eventName = propName.slice(7)
+                    listeners.get(eventName)?.delete(handler)
+                }
+            }
+            return target[propName]
+        },
+    })
+
+    return {
+        proxy,
+        fire(eventName: string) {
+            listeners.get(eventName)?.forEach(h => (h as any)())
+        },
+        set(prop: string, value: unknown) {
+            (values as any)[prop] = value
+        },
+        listenerCount(eventName: string) {
+            return listeners.get(eventName)?.size ?? 0
+        },
+    }
+}
+
+describe("useEventSync", () => {
+    // -- Convention form --
+
+    describe("convention form", () => {
+        it("reads initial value on mount", async () => {
+            const obj = createMockCSharpObject({ Health: 100 })
+            let capturedValue: unknown
+
+            function TestComponent() {
+                capturedValue = useEventSync(obj.proxy, "Health")
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+
+            expect(capturedValue).toBe(100)
+        })
+
+        it("subscribes to OnPropertyChanged event", async () => {
+            const obj = createMockCSharpObject({ Health: 100 })
+
+            function TestComponent() {
+                useEventSync(obj.proxy, "Health")
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+
+            expect(obj.listenerCount("OnHealthChanged")).toBe(1)
+        })
+
+        it("updates when event fires", async () => {
+            const obj = createMockCSharpObject({ Health: 100 })
+            let capturedValue: unknown
+
+            function TestComponent() {
+                capturedValue = useEventSync(obj.proxy, "Health")
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+            expect(capturedValue).toBe(100)
+
+            obj.set("Health", 75)
+            obj.fire("OnHealthChanged")
+            await flushMicrotasks()
+            expect(capturedValue).toBe(75)
+        })
+
+        it("unsubscribes on unmount", async () => {
+            const obj = createMockCSharpObject({ Health: 100 })
+
+            function TestComponent() {
+                useEventSync(obj.proxy, "Health")
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+            expect(obj.listenerCount("OnHealthChanged")).toBe(1)
+
+            unmount(container)
+            await flushMicrotasks()
+            expect(obj.listenerCount("OnHealthChanged")).toBe(0)
+        })
+
+        it("does not poll via RAF", async () => {
+            const obj = createMockCSharpObject({ Health: 100 })
+
+            function TestComponent() {
+                useEventSync(obj.proxy, "Health")
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+
+            // RAF should not have been called by useEventSync
+            // (useFrameSync calls it, useEventSync should not)
+            const rafCallCount = (globalThis as any).requestAnimationFrame.mock.calls.length
+            // Advance several frames — count should not grow from useEventSync
+            await advanceFrame()
+            await advanceFrame()
+            await advanceFrame()
+            const rafCallCountAfter = (globalThis as any).requestAnimationFrame.mock.calls.length
+            expect(rafCallCountAfter).toBe(rafCallCount)
+        })
+
+        it("handles null source without crashing", async () => {
+            let capturedValue: unknown
+
+            function TestComponent() {
+                capturedValue = useEventSync(null as any, "Health")
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+
+            expect(capturedValue).toBeUndefined()
+        })
+
+        it("re-subscribes when deps change", async () => {
+            const obj1 = createMockCSharpObject({ Health: 100 })
+            const obj2 = createMockCSharpObject({ Health: 200 })
+            let capturedValue: unknown
+            let currentSource = obj1
+
+            function TestComponent({ source }: { source: any }) {
+                capturedValue = useEventSync(source.proxy, "Health", [source.proxy])
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent, { source: currentSource }), container)
+            await flushMicrotasks()
+            expect(capturedValue).toBe(100)
+            expect(obj1.listenerCount("OnHealthChanged")).toBe(1)
+
+            // Switch source
+            currentSource = obj2
+            render(React.createElement(TestComponent, { source: currentSource }), container)
+            await flushMicrotasks()
+            expect(capturedValue).toBe(200)
+            expect(obj1.listenerCount("OnHealthChanged")).toBe(0)
+            expect(obj2.listenerCount("OnHealthChanged")).toBe(1)
+        })
+
+        it("handles multiple rapid events correctly", async () => {
+            const obj = createMockCSharpObject({ Score: 0 })
+            let capturedValue: unknown
+
+            function TestComponent() {
+                capturedValue = useEventSync(obj.proxy, "Score")
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+
+            obj.set("Score", 10)
+            obj.fire("OnScoreChanged")
+            obj.set("Score", 20)
+            obj.fire("OnScoreChanged")
+            obj.set("Score", 30)
+            obj.fire("OnScoreChanged")
+            await flushMicrotasks()
+
+            expect(capturedValue).toBe(30)
+        })
+    })
+
+    // -- Explicit form --
+
+    describe("explicit form", () => {
+        it("reads initial value from custom getter", async () => {
+            const obj = createMockCSharpObject({ Items: { Count: 5 } })
+            let capturedValue: unknown
+
+            function TestComponent() {
+                capturedValue = useEventSync(
+                    () => (obj.proxy as any).Items.Count,
+                    [[obj.proxy, "OnItemsChanged"]]
+                )
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+
+            expect(capturedValue).toBe(5)
+        })
+
+        it("subscribes to multiple events", async () => {
+            const obj = createMockCSharpObject({ Count: 0 })
+
+            function TestComponent() {
+                useEventSync(
+                    () => (obj.proxy as any).Count,
+                    [[obj.proxy, "OnItemAdded"], [obj.proxy, "OnItemRemoved"]]
+                )
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+
+            expect(obj.listenerCount("OnItemAdded")).toBe(1)
+            expect(obj.listenerCount("OnItemRemoved")).toBe(1)
+        })
+
+        it("updates on any subscribed event", async () => {
+            const obj = createMockCSharpObject({ Count: 0 })
+            let capturedValue: unknown
+
+            function TestComponent() {
+                capturedValue = useEventSync(
+                    () => (obj.proxy as any).Count,
+                    [[obj.proxy, "OnItemAdded"], [obj.proxy, "OnItemRemoved"]]
+                )
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+            expect(capturedValue).toBe(0)
+
+            obj.set("Count", 3)
+            obj.fire("OnItemAdded")
+            await flushMicrotasks()
+            expect(capturedValue).toBe(3)
+
+            obj.set("Count", 2)
+            obj.fire("OnItemRemoved")
+            await flushMicrotasks()
+            expect(capturedValue).toBe(2)
+        })
+
+        it("unsubscribes all events on unmount", async () => {
+            const obj = createMockCSharpObject({ Count: 0 })
+
+            function TestComponent() {
+                useEventSync(
+                    () => (obj.proxy as any).Count,
+                    [[obj.proxy, "OnItemAdded"], [obj.proxy, "OnItemRemoved"]]
+                )
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+            expect(obj.listenerCount("OnItemAdded")).toBe(1)
+            expect(obj.listenerCount("OnItemRemoved")).toBe(1)
+
+            unmount(container)
+            await flushMicrotasks()
+            expect(obj.listenerCount("OnItemAdded")).toBe(0)
+            expect(obj.listenerCount("OnItemRemoved")).toBe(0)
+        })
+
+        it("supports events from multiple sources", async () => {
+            const inventory = createMockCSharpObject({ Count: 5 })
+            const player = createMockCSharpObject({ Level: 1 })
+            let capturedValue: unknown
+
+            function TestComponent() {
+                capturedValue = useEventSync(
+                    () => (inventory.proxy as any).Count * (player.proxy as any).Level,
+                    [[inventory.proxy, "OnChanged"], [player.proxy, "OnLevelUp"]]
+                )
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+            expect(capturedValue).toBe(5)
+
+            player.set("Level", 2)
+            player.fire("OnLevelUp")
+            await flushMicrotasks()
+            expect(capturedValue).toBe(10)
+
+            inventory.set("Count", 10)
+            inventory.fire("OnChanged")
+            await flushMicrotasks()
+            expect(capturedValue).toBe(20)
+        })
+
+        it("handles getter that throws", async () => {
+            let shouldThrow = false
+            let capturedValue: unknown
+
+            const obj = createMockCSharpObject({})
+
+            function TestComponent() {
+                capturedValue = useEventSync(
+                    () => {
+                        if (shouldThrow) throw new Error("destroyed")
+                        return 42
+                    },
+                    [[obj.proxy, "OnChanged"]]
+                )
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+            expect(capturedValue).toBe(42)
+
+            shouldThrow = true
+            obj.fire("OnChanged")
+            await flushMicrotasks()
+            // Should not crash — value stays at last good value
+            expect(capturedValue).toBe(42)
+        })
+
+        it("works with static-like event sources", async () => {
+            const staticClass = createMockCSharpObject({ Score: 999 })
+            let capturedValue: unknown
+
+            function TestComponent() {
+                capturedValue = useEventSync(
+                    () => (staticClass.proxy as any).Score,
+                    [[staticClass.proxy, "OnScoreChanged"]]
+                )
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+            expect(capturedValue).toBe(999)
+
+            staticClass.set("Score", 1500)
+            staticClass.fire("OnScoreChanged")
+            await flushMicrotasks()
+            expect(capturedValue).toBe(1500)
+        })
+
+        it("handler still fires when event passes arguments (ignored by design)", async () => {
+            const obj = createMockCSharpObject({ Health: 100 })
+            let capturedValue: unknown
+
+            function TestComponent() {
+                capturedValue = useEventSync(obj.proxy, "Health")
+                return null
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(TestComponent), container)
+            await flushMicrotasks()
+            expect(capturedValue).toBe(100)
+
+            // C# event fires — handler re-reads getter, ignoring event args
+            obj.set("Health", 80)
+            obj.fire("OnHealthChanged")
+            await flushMicrotasks()
+            expect(capturedValue).toBe(80)
+        })
+
+        it("multiple components subscribe to the same event independently", async () => {
+            const obj = createMockCSharpObject({ Health: 100 })
+            let value1: unknown, value2: unknown
+
+            function Component1() { value1 = useEventSync(() => (obj.proxy as any).Health, [[obj.proxy, "OnHealthChanged"]]); return null }
+            function Component2() { value2 = useEventSync(() => (obj.proxy as any).Health, [[obj.proxy, "OnHealthChanged"]]); return null }
+
+            function Parent() {
+                return React.createElement(React.Fragment, null,
+                    React.createElement(Component1),
+                    React.createElement(Component2)
+                )
+            }
+
+            const container = createMockContainer()
+            render(React.createElement(Parent), container)
+            await flushMicrotasks()
+            expect(value1).toBe(100)
+            expect(value2).toBe(100)
+            expect(obj.listenerCount("OnHealthChanged")).toBe(2)
+
+            obj.set("Health", 50)
+            obj.fire("OnHealthChanged")
+            await flushMicrotasks()
+            expect(value1).toBe(50)
+            expect(value2).toBe(50)
+        })
+    })
+})

package/src/__tests__/mocks.ts

@@ -262,6 +262,7 @@ export function createMockCS() {
                 Path: {
                     Combine: (...parts: string[]) => parts.join("/"),
                     GetDirectoryName: (p: string) => p.substring(0, p.lastIndexOf("/")),
+                    IsPathRooted: (p: string) => p.startsWith("/"),
                 },
                 File: {
                     Exists: (path: string) => mockFileSystem.has(path),

package/src/hooks.ts

@@ -376,3 +376,113 @@ export function toArray<T = unknown>(collection: unknown): T[] {
     }
     return result
 }
+
+/**
+ * Event source descriptor for useEventSync: [sourceObject, eventName].
+ * The eventName should NOT include the "add_" / "remove_" prefix.
+ */
+export type EventSource = [source: object, eventName: string]
+
+/**
+ * Syncs a value from C# to React state via event subscription instead of polling.
+ * Zero work when nothing changes — the getter is only called when an event fires.
+ *
+ * Use this instead of `useFrameSync` when C# fires events on state change.
+ * `useFrameSync` polls every frame (causing GC pressure); `useEventSync` does
+ * zero work between events.
+ *
+ * **Convention form**: Derives the getter and event name from a property name.
+ * `useEventSync(source, "Health")` subscribes to `source.add_OnHealthChanged`
+ * and reads `source.Health`. The C# side must have an event named `On{Prop}Changed`.
+ *
+ * **Explicit form**: User-provided getter and event descriptors.
+ * Supports multiple event sources, static events, and derived state.
+ *
+ * If the source object can be null or change over time, pass it in deps:
+ * `useEventSync(player, "Health", [player])`
+ *
+ * Events must fire on Unity's main thread (the normal case for MonoBehaviour methods).
+ *
+ * @example
+ * // Convention: subscribes to player.add_OnHealthChanged, reads player.Health
+ * const health = useEventSync(player, "Health")
+ *
+ * @example
+ * // Convention with deps (required if source can change or start null)
+ * const health = useEventSync(currentPlayer, "Health", [currentPlayer])
+ *
+ * @example
+ * // Explicit: custom getter, multiple events
+ * const itemCount = useEventSync(
+ *     () => inventory.Items.Count,
+ *     [[inventory, "OnItemAdded"], [inventory, "OnItemRemoved"]]
+ * )
+ *
+ * @example
+ * // Explicit: static events
+ * const state = useEventSync(
+ *     () => CS.GameManager.Score,
+ *     [[CS.GameManager, "OnScoreChanged"]]
+ * )
+ */
+export function useEventSync<T>(getter: () => T, events: EventSource[], deps?: readonly unknown[]): T
+export function useEventSync(source: object, propertyName: string, deps?: readonly unknown[]): unknown
+export function useEventSync<T>(
+    sourceOrGetter: object | (() => T),
+    propOrEvents: string | EventSource[],
+    depsOrNothing?: readonly unknown[]
+): T {
+    if (typeof sourceOrGetter === "function") {
+        return useEventSyncImpl(
+            sourceOrGetter as () => T,
+            propOrEvents as EventSource[],
+            depsOrNothing ?? []
+        )
+    }
+
+    const source = sourceOrGetter
+    const propName = propOrEvents as string
+    return useEventSyncImpl(
+        () => source ? (source as any)[propName] : undefined,
+        source ? [[source, `On${propName}Changed`]] : [],
+        depsOrNothing ?? []
+    )
+}
+
+function useEventSyncImpl<T>(
+    getter: () => T,
+    events: EventSource[],
+    deps: readonly unknown[]
+): T {
+    const [value, setValue] = useState<T>(() => {
+        try { return getter() } catch { return undefined as T }
+    })
+    const getterRef = useRef(getter)
+    getterRef.current = getter
+
+    useEffect(() => {
+        try { setValue(getterRef.current()) } catch {}
+
+        const handler = () => {
+            try { setValue(getterRef.current()) } catch {}
+        }
+
+        for (const [source, eventName] of events) {
+            try {
+                const addFn = (source as any)[`add_${eventName}`]
+                if (typeof addFn === "function") addFn(handler)
+            } catch {}
+        }
+
+        return () => {
+            for (const [source, eventName] of events) {
+                try {
+                    const removeFn = (source as any)[`remove_${eventName}`]
+                    if (typeof removeFn === "function") removeFn(handler)
+                } catch {}
+            }
+        }
+    }, deps)
+
+    return value
+}

package/src/host-config.ts

@@ -303,19 +303,39 @@ const CLASS_ESCAPE_MAP: [string, string][] = [
 ];
 
 /**
- * Escape special characters in a class name for USS compatibility
+ * Escape special characters in a class name for USS compatibility.
  * Tailwind class names like "hover:bg-red-500" become "hover_c_bg-red-500"
+ * Results are cached since the same class names are used repeatedly across renders.
  */
+const _escapeCache = new Map<string, string>();
 function escapeClassName(name: string): string {
+    const cached = _escapeCache.get(name);
+    if (cached !== undefined) return cached;
     let escaped = name;
     for (const [char, replacement] of CLASS_ESCAPE_MAP) {
         if (escaped.includes(char)) {
             escaped = escaped.split(char).join(replacement);
         }
     }
+    _escapeCache.set(name, escaped);
     return escaped;
 }
 
+// Shallow equality check for plain objects (style, props).
+// Returns true if both have identical own-property values (===).
+function shallowEqual(a: Record<string, unknown> | undefined, b: Record<string, unknown> | undefined): boolean {
+    if (a === b) return true;
+    if (!a || !b) return false;
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (let i = 0; i < keysA.length; i++) {
+        const k = keysA[i];
+        if (a[k] !== b[k]) return false;
+    }
+    return true;
+}
+
 // Get all expanded property keys for a style object
 function getExpandedStyleKeys(style: ViewStyle | undefined): Set<string> {
     const keys = new Set<string>();
@@ -422,14 +442,20 @@ function clearRemovedStyles(element: CSObject, oldKeys: Set<string>, newKeys: Se
     }
 }
 
-// Parse className string into a Set of escaped class names
+// Parse className string into a Set of escaped class names.
+// Results are cached since the same className strings recur across renders.
+const _parseCache = new Map<string, Set<string>>();
 function parseClassNames(className: string | undefined): Set<string> {
     if (!className) return new Set();
-    return new Set(
+    const cached = _parseCache.get(className);
+    if (cached !== undefined) return cached;
+    const result = new Set(
         className.split(/\s+/)
             .filter(Boolean)
             .map(escapeClassName)
     );
+    _parseCache.set(className, result);
+    return result;
 }
 
 // Apply className(s) to element (with escaping for Tailwind/USS compatibility)
@@ -618,70 +644,68 @@ function removeMergedTextChild(parentInstance: Instance, child: Instance) {
 
 // MARK: Component-specific prop handlers
 
-// Apply common props (text, value, label)
-function applyCommonProps(element: CSObject, props: Record<string, unknown>) {
+// Apply common props (text, value, label) - skip unchanged values
+function applyCommonProps(element: CSObject, props: Record<string, unknown>, oldProps?: Record<string, unknown>) {
     const el = element as any;
-    if (props.text !== undefined) el.text = props.text as string;
-    if (props.value !== undefined) el.value = props.value;
-    if (props.label !== undefined) el.label = props.label as string;
+    if (props.text !== undefined && props.text !== oldProps?.text) el.text = props.text as string;
+    if (props.value !== undefined && props.value !== oldProps?.value) el.value = props.value;
+    if (props.label !== undefined && props.label !== oldProps?.label) el.label = props.label as string;
 }
 
-// Helper to set enum prop if defined
-function setEnumProp<T>(target: T, key: keyof T, props: Record<string, unknown>, propKey: string, enumType: CSEnum) {
-    if (props[propKey] !== undefined) {
+// Helper to set enum prop if defined and changed
+function setEnumProp<T>(target: T, key: keyof T, props: Record<string, unknown>, propKey: string, enumType: CSEnum, oldProps?: Record<string, unknown>) {
+    if (props[propKey] !== undefined && props[propKey] !== oldProps?.[propKey]) {
         (target as Record<string, unknown>)[key as string] = enumType[props[propKey] as string];
     }
 }
 
-// Helper to set value prop if defined
-function setValueProp<T>(target: T, key: keyof T, props: Record<string, unknown>, propKey: string) {
-    if (props[propKey] !== undefined) {
+// Helper to set value prop if defined and changed
+function setValueProp<T>(target: T, key: keyof T, props: Record<string, unknown>, propKey: string, oldProps?: Record<string, unknown>) {
+    if (props[propKey] !== undefined && props[propKey] !== oldProps?.[propKey]) {
         (target as Record<string, unknown>)[key as string] = props[propKey];
     }
 }
 
-// Apply TextField-specific properties
-function applyTextFieldProps(element: CSObject, props: Record<string, unknown>) {
+// Apply TextField-specific properties - skip unchanged values
+function applyTextFieldProps(element: CSObject, props: Record<string, unknown>, oldProps?: Record<string, unknown>) {
     const el = element as any;
-    if (props.readOnly !== undefined) el.isReadOnly = props.readOnly;
-    if (props.multiline !== undefined) el.multiline = props.multiline;
-    if (props.maxLength !== undefined) el.maxLength = props.maxLength;
-    if (props.isPasswordField !== undefined) el.isPasswordField = props.isPasswordField;
-    if (props.maskChar !== undefined) el.maskChar = (props.maskChar as string).charAt(0);
-    if (props.isDelayed !== undefined) el.isDelayed = props.isDelayed;
-    if (props.selectAllOnFocus !== undefined) el.selectAllOnFocus = props.selectAllOnFocus;
-    if (props.selectAllOnMouseUp !== undefined) el.selectAllOnMouseUp = props.selectAllOnMouseUp;
-    if (props.hideMobileInput !== undefined) el.hideMobileInput = props.hideMobileInput;
-    if (props.autoCorrection !== undefined) el.autoCorrection = props.autoCorrection;
-    // Note: placeholder is handled differently in Unity - it's set via the textEdition interface
-    // For now we skip it as it requires more complex handling
+    if (props.readOnly !== undefined && props.readOnly !== oldProps?.readOnly) el.isReadOnly = props.readOnly;
+    if (props.multiline !== undefined && props.multiline !== oldProps?.multiline) el.multiline = props.multiline;
+    if (props.maxLength !== undefined && props.maxLength !== oldProps?.maxLength) el.maxLength = props.maxLength;
+    if (props.isPasswordField !== undefined && props.isPasswordField !== oldProps?.isPasswordField) el.isPasswordField = props.isPasswordField;
+    if (props.maskChar !== undefined && props.maskChar !== oldProps?.maskChar) el.maskChar = (props.maskChar as string).charAt(0);
+    if (props.isDelayed !== undefined && props.isDelayed !== oldProps?.isDelayed) el.isDelayed = props.isDelayed;
+    if (props.selectAllOnFocus !== undefined && props.selectAllOnFocus !== oldProps?.selectAllOnFocus) el.selectAllOnFocus = props.selectAllOnFocus;
+    if (props.selectAllOnMouseUp !== undefined && props.selectAllOnMouseUp !== oldProps?.selectAllOnMouseUp) el.selectAllOnMouseUp = props.selectAllOnMouseUp;
+    if (props.hideMobileInput !== undefined && props.hideMobileInput !== oldProps?.hideMobileInput) el.hideMobileInput = props.hideMobileInput;
+    if (props.autoCorrection !== undefined && props.autoCorrection !== oldProps?.autoCorrection) el.autoCorrection = props.autoCorrection;
 }
 
-// Apply Slider-specific properties
-function applySliderProps(element: CSObject, props: Record<string, unknown>) {
+// Apply Slider-specific properties - skip unchanged values
+function applySliderProps(element: CSObject, props: Record<string, unknown>, oldProps?: Record<string, unknown>) {
     const el = element as any;
-    if (props.lowValue !== undefined) el.lowValue = props.lowValue;
-    if (props.highValue !== undefined) el.highValue = props.highValue;
-    if (props.showInputField !== undefined) el.showInputField = props.showInputField;
-    if (props.inverted !== undefined) el.inverted = props.inverted;
-    if (props.pageSize !== undefined) el.pageSize = props.pageSize;
-    if (props.fill !== undefined) el.fill = props.fill;
-    if (props.direction !== undefined) {
+    if (props.lowValue !== undefined && props.lowValue !== oldProps?.lowValue) el.lowValue = props.lowValue;
+    if (props.highValue !== undefined && props.highValue !== oldProps?.highValue) el.highValue = props.highValue;
+    if (props.showInputField !== undefined && props.showInputField !== oldProps?.showInputField) el.showInputField = props.showInputField;
+    if (props.inverted !== undefined && props.inverted !== oldProps?.inverted) el.inverted = props.inverted;
+    if (props.pageSize !== undefined && props.pageSize !== oldProps?.pageSize) el.pageSize = props.pageSize;
+    if (props.fill !== undefined && props.fill !== oldProps?.fill) el.fill = props.fill;
+    if (props.direction !== undefined && props.direction !== oldProps?.direction) {
         el.direction = CS.UnityEngine.UIElements.SliderDirection[props.direction as string];
     }
 }
 
-// Apply Toggle-specific properties
-function applyToggleProps(element: CSObject, props: Record<string, unknown>) {
+// Apply Toggle-specific properties - skip unchanged values
+function applyToggleProps(element: CSObject, props: Record<string, unknown>, oldProps?: Record<string, unknown>) {
     const el = element as any;
-    if (props.text !== undefined) el.text = props.text;
-    if (props.toggleOnLabelClick !== undefined) el.toggleOnLabelClick = props.toggleOnLabelClick;
+    if (props.text !== undefined && props.text !== oldProps?.text) el.text = props.text;
+    if (props.toggleOnLabelClick !== undefined && props.toggleOnLabelClick !== oldProps?.toggleOnLabelClick) el.toggleOnLabelClick = props.toggleOnLabelClick;
 }
 
-// Apply Image-specific properties
-function applyImageProps(element: CSObject, props: Record<string, unknown>) {
+// Apply Image-specific properties - skip unchanged values
+function applyImageProps(element: CSObject, props: Record<string, unknown>, oldProps?: Record<string, unknown>) {
     const el = element as any;
-    if (props.image !== undefined) {
+    if (props.image !== undefined && props.image !== oldProps?.image) {
         const img = props.image;
         if (img != null && (img as any).GetType?.().Name === "VectorImage") {
             el.image = null;
@@ -691,73 +715,73 @@ function applyImageProps(element: CSObject, props: Record<string, unknown>) {
             el.image = img;
         }
     }
-    if (props.sprite !== undefined) el.sprite = props.sprite;
-    if (props.vectorImage !== undefined) el.vectorImage = props.vectorImage;
-    if (props.scaleMode !== undefined) {
+    if (props.sprite !== undefined && props.sprite !== oldProps?.sprite) el.sprite = props.sprite;
+    if (props.vectorImage !== undefined && props.vectorImage !== oldProps?.vectorImage) el.vectorImage = props.vectorImage;
+    if (props.scaleMode !== undefined && props.scaleMode !== oldProps?.scaleMode) {
         el.scaleMode = CS.UnityEngine.ScaleMode[props.scaleMode as string];
     }
-    if (props.tintColor !== undefined) {
+    if (props.tintColor !== undefined && props.tintColor !== oldProps?.tintColor) {
         const color = parseColor(props.tintColor as string);
         if (color) el.tintColor = color;
     }
-    if (props.sourceRect !== undefined) {
+    if (props.sourceRect !== undefined && props.sourceRect !== oldProps?.sourceRect) {
         const rect = props.sourceRect as { x: number; y: number; width: number; height: number };
         el.sourceRect = new CS.UnityEngine.Rect(rect.x, rect.y, rect.width, rect.height);
     }
-    if (props.uv !== undefined) {
+    if (props.uv !== undefined && props.uv !== oldProps?.uv) {
         const rect = props.uv as { x: number; y: number; width: number; height: number };
         el.uv = new CS.UnityEngine.Rect(rect.x, rect.y, rect.width, rect.height);
     }
 }
 
-// Apply ScrollView-specific properties
-function applyScrollViewProps(element: CSScrollView, props: Record<string, unknown>) {
+// Apply ScrollView-specific properties - skip unchanged values
+function applyScrollViewProps(element: CSScrollView, props: Record<string, unknown>, oldProps?: Record<string, unknown>) {
     const UIE = CS.UnityEngine.UIElements;
-    setEnumProp(element, 'mode', props, 'mode', UIE.ScrollViewMode);
-    setEnumProp(element, 'horizontalScrollerVisibility', props, 'horizontalScrollerVisibility', UIE.ScrollerVisibility);
-    setEnumProp(element, 'verticalScrollerVisibility', props, 'verticalScrollerVisibility', UIE.ScrollerVisibility);
-    setEnumProp(element, 'touchScrollBehavior', props, 'touchScrollBehavior', UIE.TouchScrollBehavior);
-    setEnumProp(element, 'nestedInteractionKind', props, 'nestedInteractionKind', UIE.NestedInteractionKind);
-    setValueProp(element, 'elasticity', props, 'elasticity');
-    setValueProp(element, 'elasticAnimationIntervalMs', props, 'elasticAnimationIntervalMs');
-    setValueProp(element, 'scrollDecelerationRate', props, 'scrollDecelerationRate');
-    setValueProp(element, 'mouseWheelScrollSize', props, 'mouseWheelScrollSize');
-    setValueProp(element, 'horizontalPageSize', props, 'horizontalPageSize');
-    setValueProp(element, 'verticalPageSize', props, 'verticalPageSize');
+    setEnumProp(element, 'mode', props, 'mode', UIE.ScrollViewMode, oldProps);
+    setEnumProp(element, 'horizontalScrollerVisibility', props, 'horizontalScrollerVisibility', UIE.ScrollerVisibility, oldProps);
+    setEnumProp(element, 'verticalScrollerVisibility', props, 'verticalScrollerVisibility', UIE.ScrollerVisibility, oldProps);
+    setEnumProp(element, 'touchScrollBehavior', props, 'touchScrollBehavior', UIE.TouchScrollBehavior, oldProps);
+    setEnumProp(element, 'nestedInteractionKind', props, 'nestedInteractionKind', UIE.NestedInteractionKind, oldProps);
+    setValueProp(element, 'elasticity', props, 'elasticity', oldProps);
+    setValueProp(element, 'elasticAnimationIntervalMs', props, 'elasticAnimationIntervalMs', oldProps);
+    setValueProp(element, 'scrollDecelerationRate', props, 'scrollDecelerationRate', oldProps);
+    setValueProp(element, 'mouseWheelScrollSize', props, 'mouseWheelScrollSize', oldProps);
+    setValueProp(element, 'horizontalPageSize', props, 'horizontalPageSize', oldProps);
+    setValueProp(element, 'verticalPageSize', props, 'verticalPageSize', oldProps);
 }
 
-// Apply ListView-specific properties
-function applyListViewProps(element: CSListView, props: Record<string, unknown>) {
+// Apply ListView-specific properties - skip unchanged values
+function applyListViewProps(element: CSListView, props: Record<string, unknown>, oldProps?: Record<string, unknown>) {
     const UIE = CS.UnityEngine.UIElements;
 
     // Data binding callbacks
-    setValueProp(element, 'itemsSource', props, 'itemsSource');
-    setValueProp(element, 'makeItem', props, 'makeItem');
-    setValueProp(element, 'bindItem', props, 'bindItem');
-    setValueProp(element, 'unbindItem', props, 'unbindItem');
-    setValueProp(element, 'destroyItem', props, 'destroyItem');
+    setValueProp(element, 'itemsSource', props, 'itemsSource', oldProps);
+    setValueProp(element, 'makeItem', props, 'makeItem', oldProps);
+    setValueProp(element, 'bindItem', props, 'bindItem', oldProps);
+    setValueProp(element, 'unbindItem', props, 'unbindItem', oldProps);
+    setValueProp(element, 'destroyItem', props, 'destroyItem', oldProps);
 
     // Virtualization
-    setValueProp(element, 'fixedItemHeight', props, 'fixedItemHeight');
-    setEnumProp(element, 'virtualizationMethod', props, 'virtualizationMethod', UIE.CollectionVirtualizationMethod);
+    setValueProp(element, 'fixedItemHeight', props, 'fixedItemHeight', oldProps);
+    setEnumProp(element, 'virtualizationMethod', props, 'virtualizationMethod', UIE.CollectionVirtualizationMethod, oldProps);
 
     // Selection
-    setEnumProp(element, 'selectionType', props, 'selectionType', UIE.SelectionType);
-    setValueProp(element, 'selectedIndex', props, 'selectedIndex');
-    setValueProp(element, 'selectedIndices', props, 'selectedIndices');
+    setEnumProp(element, 'selectionType', props, 'selectionType', UIE.SelectionType, oldProps);
+    setValueProp(element, 'selectedIndex', props, 'selectedIndex', oldProps);
+    setValueProp(element, 'selectedIndices', props, 'selectedIndices', oldProps);
 
     // Reordering
-    setValueProp(element, 'reorderable', props, 'reorderable');
-    setEnumProp(element, 'reorderMode', props, 'reorderMode', UIE.ListViewReorderMode);
+    setValueProp(element, 'reorderable', props, 'reorderable', oldProps);
+    setEnumProp(element, 'reorderMode', props, 'reorderMode', UIE.ListViewReorderMode, oldProps);
 
     // Header/Footer
-    setValueProp(element, 'showFoldoutHeader', props, 'showFoldoutHeader');
-    setValueProp(element, 'headerTitle', props, 'headerTitle');
-    setValueProp(element, 'showAddRemoveFooter', props, 'showAddRemoveFooter');
+    setValueProp(element, 'showFoldoutHeader', props, 'showFoldoutHeader', oldProps);
+    setValueProp(element, 'headerTitle', props, 'headerTitle', oldProps);
+    setValueProp(element, 'showAddRemoveFooter', props, 'showAddRemoveFooter', oldProps);
 
     // Appearance
-    setValueProp(element, 'showBorder', props, 'showBorder');
-    setEnumProp(element, 'showAlternatingRowBackgrounds', props, 'showAlternatingRowBackgrounds', UIE.AlternatingRowBackground);
+    setValueProp(element, 'showBorder', props, 'showBorder', oldProps);
+    setEnumProp(element, 'showAlternatingRowBackgrounds', props, 'showAlternatingRowBackgrounds', UIE.AlternatingRowBackground, oldProps);
 }
 
 // Props handled by the reconciler infrastructure - not forwarded to C# elements
@@ -767,46 +791,47 @@ const RESERVED_PROPS = new Set([
     ...Object.keys(EVENT_PROPS),
 ]);
 
-// Forward non-reserved props directly to C# element (for custom elements)
-function applyCustomProps(element: CSObject, props: Record<string, unknown>) {
+// Forward non-reserved props directly to C# element (for custom elements) - skip unchanged
+function applyCustomProps(element: CSObject, props: Record<string, unknown>, oldProps?: Record<string, unknown>) {
     for (const [key, value] of Object.entries(props)) {
         if (value === undefined || RESERVED_PROPS.has(key)) continue;
+        if (value === oldProps?.[key]) continue;
         (element as any)[key] = value;
     }
 }
 
 // Apply component-specific props based on element type
-function applyComponentProps(element: CSObject, type: string, props: Record<string, unknown>) {
+function applyComponentProps(element: CSObject, type: string, props: Record<string, unknown>, oldProps?: Record<string, unknown>) {
     // Custom elements: forward all non-reserved props directly to C# element
     if (!BUILT_IN_TYPES.has(type)) {
-        applyCustomProps(element, props);
+        applyCustomProps(element, props, oldProps);
         return;
     }
 
     // For Slider, apply range props (lowValue/highValue) BEFORE value
     // Unity's Slider clamps value to [lowValue, highValue], so range must be set first
     if (type === 'ojs-slider') {
-        applySliderProps(element, props);
-        applyCommonProps(element, props);
+        applySliderProps(element, props, oldProps);
+        applyCommonProps(element, props, oldProps);
         return;
     }
 
-    applyCommonProps(element, props);
+    applyCommonProps(element, props, oldProps);
 
     if (type === 'ojs-textfield') {
-        applyTextFieldProps(element, props);
+        applyTextFieldProps(element, props, oldProps);
     } else if (type === 'ojs-toggle') {
-        applyToggleProps(element, props);
+        applyToggleProps(element, props, oldProps);
     } else if (type === 'ojs-image') {
-        applyImageProps(element, props);
+        applyImageProps(element, props, oldProps);
     } else if (type === 'ojs-scrollview') {
-        applyScrollViewProps(element as CSScrollView, props);
+        applyScrollViewProps(element as CSScrollView, props, oldProps);
     } else if (type === 'ojs-listview') {
-        applyListViewProps(element as CSListView, props);
+        applyListViewProps(element as CSListView, props, oldProps);
     } else if (type === 'ojs-frostedglass') {
         const el = element as any;
-        if (props.blurRadius !== undefined) el.BlurRadius = props.blurRadius;
-        if (props.tintColor !== undefined) el.TintColor = props.tintColor;
+        if (props.blurRadius !== undefined && props.blurRadius !== oldProps?.blurRadius) el.BlurRadius = props.blurRadius;
+        if (props.tintColor !== undefined && props.tintColor !== oldProps?.tintColor) el.TintColor = props.tintColor;
     }
 }
 
@@ -844,8 +869,9 @@ function createInstance(type: string, props: BaseProps): Instance {
 function updateInstance(instance: Instance, oldProps: BaseProps, newProps: BaseProps) {
     const element = instance.element;
 
-    // Update style - clear removed properties, then apply new ones
-    if (oldProps.style !== newProps.style) {
+    // Update style - skip if values are shallowly equal (inline style objects are
+    // new references each render but usually contain the same values)
+    if (oldProps.style !== newProps.style && !shallowEqual(oldProps.style as any, newProps.style as any)) {
         const newStyleKeys = getExpandedStyleKeys(newProps.style);
         clearRemovedStyles(element, instance.appliedStyleKeys, newStyleKeys);
         instance.appliedStyleKeys = applyStyle(element, newProps.style);
@@ -862,8 +888,8 @@ function updateInstance(instance: Instance, oldProps: BaseProps, newProps: BaseP
     // Update vector drawing callback
     applyVisualContentCallback(instance, newProps);
 
-    // Update component-specific props
-    applyComponentProps(element, instance.type, newProps as Record<string, unknown>);
+    // Update component-specific props - pass oldProps to skip unchanged values
+    applyComponentProps(element, instance.type, newProps as Record<string, unknown>, oldProps as Record<string, unknown>);
 
     // Update pickingMode
     if (oldProps.pickingMode !== newProps.pickingMode) {

package/src/index.ts

@@ -45,7 +45,8 @@ export type {
 export { Transform2D, useVectorContent } from './vector';
 
 // Sync Hooks & C# Interop Utilities
-export { useFrameSync, useFrameSyncWith, useThrottledSync, toArray } from './hooks';
+export { useFrameSync, useFrameSyncWith, useThrottledSync, useEventSync, toArray } from './hooks';
+export type { EventSource } from './hooks';
 
 // Types
 export type {