There's ways you can write your code such that you _know_ that certain blocks of code are going to be unaffected by input changes, and you can then use that information to reduce the scope of changes that need to be done, with only minimal costs to expressivity.
I think with a decently smart compiler (and of course the compiler simply treating a lot of stuff in a black box way) you can totally shrink down the amount of work a client needs to do to render React components, all without changing the semantics.
Of course any performance trick might change the actual sequence of events that happen, and in particular for libs doing fancy DOM manipulation, it's easy for those to rely on React's incidental behavior in a non-spec-confirming way.
But the main point her is that you can totally get to useful improvements on a subset of your React, while still leaving the rest of your components intact
In the first place, I imagine the subset of React code that’s static enough to compile into direct DOM mutations is so trivial that it’s not a useful optimization target.
The way to get good at something is by doing it a lot.
"Four things, running here"
This made me want to close the tab.
Take some time to think about what you've built and explain it in your own words. Get an LLM to help you with content ideas and editing, but write it yourself. It looks like a cool project.
I built a compiler that compiles React code into vanilla JS.
Here are some examples
Vidact Start adds a bunch of server-side features - file routes, server loaders, SSR, hydration, and client navigation.
You can't use class components, createRef, most of the Children helpers, or React DevTools. Or any third-party package that ships precompiled against React's runtime.
When I see technology I want to figure out what it CAN'T do. For example, Rust can do web, but I wouldn't use Rust if I get to choose a simpler language.
Sample application: https://github.com/wisercoder/eureka/tree/master/webapp/Clie...
or atleast something does not immidately screams Vue, like the logo does.
const [count, setCount] = useState(0)
Another problem is that those dependencies are often unknown at compilation stage. For example, imagine a form which is generated dynamically based on list of fields received from the server and should show error boxes when invalid values are entered. The compiler won't be able to pre-compute the dependencies here because it doesn't know what DOM nodes will exist at runtime. I assume the compiler would figure out a dependency between a variable with list of fields and "form" DOM node, but not dependencies between entered data and error boxes visibility.
Sadly the website doesn't provide examples of generated code so I cannot confirm my guess.
Anyway, interesting idea. Sometimes I draft reactive frameworks on paper so I understand the challenges a little bit.
Also what I do not like in reactive frameworks as that they are invasive and require you to adapt the code for them. For example, I might have my object model (let's say a TextDocument class with lot of nodes inside), and all I need is a "View" that would display it. But React requires you to move the data into props and state, and sometimes use a giant immutable object that gets rebuilt on every user action, and Vue wraps everything with proxies which causes lots of small issues and confusion (like putting a proxy into the Set instead of original object). And also React requires installing Node and compilation which is too much for a one-page quick project. So what I want is that I pass my Document Object Model and framework just displays it without making me adapt to its architecture. For example, I pass a model of a text document and it just displays it. Without immutability, without proxies, and without writing a giant switch with all possible user commands (I think they call the approach with a large switch and immutable objects "redux"). I do not need redux, I just want to use classic MVC from 80s and not modern dubious ideas. I have M and C and only need a V.
It was a very ambitious project back then, but recently, another project I was working on (grep.codemod.com) inspired me to rebuild this and I thought of using React compiler's analysis this time as it has already done most of the heavy lifting.
With Vidact, a component runs once when it mounts. The compiler analyzes which expressions depend on which values and generates static update functions for them. When state changes, it directly updates the affected text node, attribute, conditional range, or list item.
So instead of:
state change -> rerender component -> create element tree -> reconcile -> mutate DOM
it's closer to:
state change -> run compiler-selected updater -> mutate DOM
There is no Virtual DOM, no reconciler, no runtime dependency tracking, and React itself isn't shipped to the browser.
The compiler is written in Rust and uses React Compiler's analysis infrastructure for AST/scope/HIR/CFG/SSA and dependency information, but Vidact has its own IR, DOM code generator, and runtime.
I've also been experimenting with the same model for SSR/hydration and built Vidact Start around it, with file-based routes, loaders, SSR, hydration, and client navigation.
One design decision I'm particularly interested in feedback on: Vidact fails compilation when it encounters React behavior it can't preserve rather than silently falling back to React or a slower runtime path. It's therefore intentionally a subset of React today.
It's beta and there are definitely compatibility edges left to explore. I'm especially interested in cases where React semantics make static compilation fundamentally difficult, rather than just features I haven't implemented yet.
Site: https://www.vidact.dev/
are u being serious rn?
React’s programming model, compiled.
The successor to Inferno, built around the same focus on performance. It brings React’s hooks, Suspense, and actions to a compiler-first architecture.
No virtual DOM, rules of hooks, or dependency arrays you have to maintain yourself. The compiler tracks what your code uses automatically.