Vidact and the Quest for a Virtual-DOM-Free React

For over a decade, React's declarative mental model has remained inseparable from its runtime engine: the Virtual DOM. Vidact, a newly revived Rust-based compiler, challenges this coupling by translating standard React components and hooks directly into static, granular DOM updates without shipping a Virtual DOM or reconciler to the browser.

The Paradigm Shift in React Updates

In standard React, reactivity is fundamentally an execution loop. When state updates, React re-executes the component function from top to bottom, generates a fresh tree of virtual elements, compares that tree against the previous snapshot through reconciliation, and finally commits minimal mutations to the real browser DOM. While browser optimizations and the Fiber architecture have made this process fast, the computational tax—allocating virtual nodes, diffing objects, and shipping a heavy runtime—remains non-trivial.

Vidact dismantles this cycle by transforming runtime reconciliation into compile-time code generation. Instead of repeatedly executing component functions, a Vidact component executes exactly once when mounted. During the build phase, the compiler analyzes every reactive dependency within the JSX markup, identifying which specific text nodes, attributes, and conditional blocks depend on which pieces of state. When a state variable changes, the application executes a compiler-generated updater function that directly mutates the target DOM node.

Consider a standard counter component:

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

In standard React, clicking the button re-runs Counter(), producing a new JSX element object for reconciliation. In Vidact, the compiler creates the button once, binds a native click handler, and assigns a pinpoint updater: textNode.data = "Count: " + count. The component never re-renders; only the affected DOM slice mutates.

How the Rust Compiler Analyzes State

Vidact achieves this by leveraging the Static Single Assignment (SSA) and High-Level Intermediate Representation (HIR) infrastructure pioneered by the official React Compiler project. Written in Rust, Vidact parses standard JSX syntax, builds a control flow graph (CFG), and tracks data flow through component scopes.

By analyzing the control flow, Vidact determines the precise boundaries where state changes propagate. The compiler builds an internal intermediate representation that isolates three distinct layers:

• Static DOM structures: HTML tags and static attributes that never mutate are created once and cached.
• Dynamic bindings: Text nodes and property assignments linked to useState or props are mapped to specialized updater routines.
• Structural control flows: Dynamic lists and ternary conditions are compiled into localized range markers and fragment managers rather than full tree re-evaluations.

Because the resulting bundle contains only the compiled JavaScript and a minuscule utility runtime for event dispatching and lifecycle hooks, the core React runtime library is entirely eliminated from client-side bundles.

The Compromise: A Strict React Subset

Building a zero-VDOM compiler for React exposes a fundamental tension between dynamic JavaScript semantics and static analysis. Frameworks like Svelte and Solid avoided this by inventing their own reactive primitives and template syntax. Vidact chooses to preserve pure React syntax, which requires drawing hard boundaries.

Vidact enforces a strict compilation policy: whenever it encounters React patterns that cannot be statically resolved into deterministic DOM operations, compilation fails immediately. It deliberately avoids falling back to a sluggish runtime reconciliation layer.

This strictness means several common dynamic React idioms are intentionally restricted or unsupported:

• Dynamic component types computed at runtime without explicit branches.
• Unconstrained prop spreading that obscures property ownership from the compiler.
• Relying on side effects executed during arbitrary re-render passes outside standard useEffect lifecycles.

For developers, this trade-off requires adopting a more disciplined, predictable coding style. However, in exchange, applications gain deterministic runtime execution, instant startup metrics, and dramatically reduced memory consumption on low-power devices.

The Future of Compiled Frontend Architectures

Vidact highlights an industry-wide realization: the boundary between a library and a compiler has permanently dissolved. As web applications demand higher performance and smaller payloads, runtime abstraction layers are increasingly being replaced by build-time intelligence.

While Vidact is still navigating edge cases and expanding ecosystem compatibility, its core thesis is already validated. By proving that React's intuitive component model can produce bare-metal DOM operations, it points toward a future where frontend developers keep their favorite programming paradigms without paying the runtime performance tax.

Sources

1. vidact.dev