Saturday 28 March 2026, 05:03 PM

How Svelte 5 Runes achieve a 58ms INP to outperform React 19 Fiber

Discover how Svelte 5's signal-based Runes bypass the Virtual DOM to achieve a 58ms INP, outperforming React 19 Fiber in high-frequency WebSocket UI updates.

If you've spent any time building modern web applications, you know that our expectations for user interfaces have fundamentally shifted. We are no longer just building static pages or simple CRUD dashboards. The applications we rely on today—whether it's collaborative SaaS platforms, real-time FinTech trading desks, or live IoT monitoring—demand continuous, high-frequency data streams.

For the past decade, the Virtual DOM has been our undisputed champion for managing these complex UI states. But as we look toward the next five to ten years of web development, a new reality is setting in: the abstraction that once saved us is starting to hold us back.

Recently, a definitive February 2026 benchmark by Matt Mickiewicz caught my attention, and it perfectly illustrates this paradigm shift. The test simulated a 10,000-row stock ticker receiving continuous 100ms WebSocket updates, forcing simultaneous mutations across 40% of the rows. It pitted React 19 against Svelte 5, and the results are a wake-up call for anyone thinking about architectural scalability.

The virtual DOM bottleneck

Let's look at the numbers. During a rigorous 60-second benchmark, React 19 struggled with a p95 Interaction to Next Paint (INP) spike of 142ms, along with a median INP of 68ms. In contrast, Svelte 5 maintained a median INP of just 24ms and a p95 spike of only 58ms.

What’s fascinating isn't just the nearly 3x performance advantage for Svelte; it's the underlying cause of the latency. Svelte's minor 58ms spikes were attributed to standard JavaScript garbage collection pauses. React’s 142ms spikes, however, exposed a critical vulnerability in its architecture: Fiber scheduler overwhelm.

When that massive volume of genuine data mutation hit, React simply couldn't complete its complex virtual DOM tree-diffing process within a single 16.67ms animation frame. The framework had to allocate 10,000 Fiber nodes in memory just to mount the initial application. When you're pushing heavy WebSocket data, the sheer overhead of runtime reconciliation creates noticeable UI lag.

Signals and the post-VDOM paradigm

This is where Svelte 5's new architecture completely changes the game. By moving to explicit, signal-based reactivity with 'Runes' ($state, $derived, $effect), Svelte completely bypasses the Virtual DOM.

Instead of doing the heavy lifting at runtime, Svelte operates at compile-time. The compiler generates highly optimized JavaScript that surgically mutates only the exact bound DOM nodes when your data changes. Because it doesn't need to maintain a massive virtual tree in memory, Svelte 5 reduces the application's memory footprint by about 34% compared to React. Add in AST-level tree shaking, and bundle sizes shrink by over 30%.

We are witnessing an industry-wide consensus forming around this philosophy. The era of the Virtual DOM is giving way to explicit, fine-grained reactivity. Angular 21 recently transitioned to explicit Signals and a 'zoneless' change detection model, which yielded a 31% INP improvement for enterprise applications. Vue is also heavily investing in its own VDOM-less 'Vapor mode'. The entire ecosystem is moving closer to the metal.

What this means for the next decade of the web

Why does this matter outside of a benchmarking lab? Because the way we measure a successful user experience is changing. Google has officially made INP a Core Web Vital, meaning these micro-stutters now directly impact your SEO rankings and, consequently, your bottom line.

More importantly, as we integrate more AI-driven, real-time features into our products, our interfaces need to feel instantaneous. Accessibility and usability are inherently tied to performance. An interface that lags under the weight of its own updates is a frustrating experience that drives users away.

This doesn't mean React is going anywhere tomorrow. React 19, with its new Compiler and massive ecosystem, remains a pragmatic, dominant choice for standard enterprise monoliths. If you are building a traditional application, the React ecosystem is still an incredible asset.

However, if you are architecting an edge-native, high-throughput application where continuous data streams are a core business requirement, the calculus has changed. Direct DOM mutation isn't just a neat trick anymore; it is rapidly becoming the mandatory standard for scalable performance. As we build the next generation of the web, it's becoming clear that the fastest way to update the DOM is to just update the DOM.

How Svelte 5 Runes achieve a 58ms INP to outperform React 19 Fiber

The virtual DOM bottleneck

Signals and the post-VDOM paradigm

What this means for the next decade of the web

References

Subscribe to our mailing list