valdi-perf

Valdi re-renders a child whenever its viewModel reference changes, so avoid creating object, array, or function literals inside onRender(). Hoist constants to class properties, pre-compute derived viewModels in onViewModelUpdate, and use class arrow functions for callbacks.

<view> allocates a native platform view, while <layout> is a virtual node that participates in flexbox layout without creating a native view. Use <layout> for spacers and structural wrappers, and <view> only when you need visual or interactive properties like onTap or backgroundColor.

remember caches a computed value across renders and recomputes only when its key dependencies change. createReusableCallback stabilizes a function's identity so Valdi's diffing engine does not treat it as a prop change. Use remember for values and createReusableCallback for inline closures.

Each .subscribe() on a BridgeObservable creates the native bridge and runs the initial value flow synchronously, delaying first paint, and multiple subscriptions compound the delay. Defer non-critical subscriptions with setTimeout(0) so they run on the next tick after the initial render.

Use a Worker Service for expensive synchronous TypeScript work like parsing or transforms when the caller can tolerate an asynchronous promise-based API. Arguments are deep-copied across the thread boundary, idle workers are torn down, and synchronous return values are not supported, so cheap or render-path work should stay on the host thread.

setState runs synchronously with no frame-level batching, so N calls produce N renders. Merge related updates into a single setState call, and for chatty observables apply distinctUntilChanged or debounceTime upstream of the subscribe call.