Skip to main content

Next-Next-Gen Web Development

· 6 min read
Jennings Zhang
Research Developer @ Boston Children's Hospital

Web development evolves rapidly. Not only do we have new JS frameworks, but new toolchains as well, such as Deno, Bun, and Farm.

This blog summarizes the history of React.js and the motivation to replace it. It also mentions Bun and Farm as new and exciting alternatives to using Vite for React development.

Background

Everyone knows about React.js. It was a revolutionary innovation at the time. We owe it much appreciation for bringing functional programming concepts (pure functions, side effects, declarative code) to the mainstream. However, React took us a few steps forward and a few steps back. React is widely criticized for its performance and boilerplate-heavy syntax.

What is React.js?

Traditional UI programming involves changing visual elements (the DOM) imperatively, which is an error-prone programming paradigm.

<button onclick="addMessage()">click me</button>
<script>
function addMessage() {
const node = document.createElement("div");
node.innerText = "You clicked the button";
document.body.appendChild(node);
}
</script>

React, as its name suggests, is "reactive": the UI changes in reaction to when the values of your JavaScript variables change.

const App = () => {
const [clicked, setClicked] = React.useState(false);
return (
<>
<button onChange={() => setClicked(true)}>
click me
</button>
{ clicked && <div>You clicked the button</div> }
</>
);
};

How Does React.js Work?

The React.js runtime needs to be able to detect what to change about the DOM in response to a change in state. It does so by rerunning the "render" function (the functional component definition) whenever a JavaScript variable is mutated. In practice, this means the "render" function is sometimes being called about 60 times a second.

Obviously, this is very inefficient. The inefficiency has consequences:

  1. React implements a "virtual DOM" a.k.a. vDOM and a "diff" algorithm which finds differences in vDOM. Each time a variable is changed, the vDOM is re-rendered. If a difference is found in the vDOM between renders, React updates the real DOM.
  2. The "render" function must be "pure," and side-effects must be managed carefully (using React.useEffect).
  3. The "render" function must also be reasonably efficient.

Inefficiency of React.js

The whole thing about how React repeatedly calls functions at 60Hz means the programmer must be very careful. They:

  • Should wrap all computation (i.e. derived state) with React.useMemo.
  • Should not use React state for animation frames1, because frequent updates are inefficient and increase CPU load.

General Inefficiencies of JS Frameworks

  • React's own programming language, JSX, needs to be converted to plain JavaScript because that is the language understood by web browsers.
  • Your web app needs to import the React.js runtime which defines functions such as React.setState.

The Current Scene

Since React is the most popular JS framework, a large ecosystem has been built atop of React, and its tooling + developer experience have been heavily optimized. In 2018, you had to wait 1-5 minutes for a React development server to start. Today, Vite starts instantly.

Vite is the most popular toolchain for React today, though I am curious about the next-next-gen tools such as Bun and Farm.

Bun Build

Benchmarks of bun build

Earlier this year, Bun introduced a "full-featured frontend development toolchain" with the release of version 1.2.3. Many people were asking whether Bun can replace Vite, and the answer is now yes!

tip

Always double-check whether what you're reading is up-to-date! When I searched "vite vs. bun", a blog on dev.to came up but its information is no longer accurate.

This blog post is relevant in August 2025.

bun build works great for React.js, the dev server bun run with hot reloading (HMR) works too. You can even write a full-stack application with Bun and React.js SSR, so it can be an alternative to Next.js. This is all much easier to set up and boasts significant performance gains, making Bun an interesting choice to consider for new React.js projects.

Bun Test

bun test is also ready to replace vitest! Their website claims 5x performance gains, with a little sass:

Bun is a test runner that makes the rest look like test walkers.

The documentation on setup with @testing-library/react is concise and easy -> https://bun.com/guides/test/testing-library

Farm

Farm logo

Farm is an "extremely fast Vite-compatible web build tool written in Rust". Its dev server is much faster than that of Vite, which often takes several seconds to load/reload a page. (Vite intentionally does not bundle dependencies in dev mode).

Though it's almost certain that the benchmarks will be shuffled again in the near future. Vite is soon to be incorporated with Rolldown, a rewrite of esbuild + Rollup, also in Rust.

Other JS Frameworks

I am also curious about the next-next-gen alternatives to react, e.g. Solid and Qwik (or even Leptos). Both Solid and Qwik offer React-like syntax and paradigms but without the rerun-60x-every-second problem. Hence, runtime performance is vastly superior. Furthermore, their bundle sizes are smaller as well. Unfortunately, neither Solid nor Qwik are actually compatible with React.

Preact is React-compatible and very fast. The Preact team is also leading development efforts on Signals, a tc39 proposal to standardize reactive primitives across web frameworks.

https://github.com/tc39/proposal-signals

Using @preact/signals it is possible to achieve nearly framework-less performance in a React-compatible project. Signal mutation does not cause re-rendering.

Interestingly, the tc39 Signals proposal mentions ubiquitous collaboration across the JS frameworks ecosystem—but React and Next.js are notably missing from the list of authors. My hunch is the React and Next.js teams know that Signals is too good and that the proposal will lead to the obsolescence of React.

Comparison Table of React-Like Frameworks

FrameworkReact CompatiblePerformance
React
Preact⭐⭐⭐
Solid⭐⭐⭐⭐
Qwik⭐⭐⭐⭐⭐

Footnotes

  1. https://dev.to/fedekau/animations-with-react-how-a-simple-component-can-affect-your-performance-2a41