SolidJS vs. React: The Go-to Guide

On the surface, SolidJS and React appear to be closely related. The client-side frameworks are mutually intelligible and are both used to create single-page applications (SPAs). While the developer experience is nearly identical for both, the underlying mechanisms of each framework are a remarkable contrast.

Both SPA frameworks are responsible for compartmentalizing an app’s webpage structure and functionality, but in a browser, these frameworks manipulate pages’ HTML elements differently to deliver the desired user experience. SolidJS and React diverge in their use of the Document Object Model (DOM). Let’s expand on how React and SolidJS components allow application logic to mimic a multi-page website.

A Brief Comparison

I am a firm believer in a TL;DR approach, so I’ve boiled down and presented React and SolidJS’s main differences in the following table:

Now we’ll go into more detail on the similarities and differences between React and SolidJS.

Component Structure

React and SolidJS have exactly the same programmatic structures and support for components (individual, reusable pieces of code).

In both modern React and SolidJS, a component consists of a render function with properties as arguments. Together with each component’s JSX, the code is tight and succinct. JSX is easy to grok, and allows experienced developers to visually describe a component’s model in its definition.

React and SolidJS offer the same components, but each framework has a unique rendering approach. React components render every time (barring memoization use), while SolidJS components only render once.

Another difference between the two frameworks is their varying features that enable component functionality.

Component Functionality

A component without functionality is just markup. So how do React and SolidJS make components operational? Their approaches are similar:

Under the hood, both hooks and reactive primitives are a way to connect into the respective React and SolidJS change management systems. Overall, the two frameworks handle component functions in a similar manner, but employ different methods or nomenclatures to do so.

Let’s explore more complex functionality differences: state, memoization, and effects.

State

At times, a framework will need to track information and certain properties tied to a component. This concept is known as state, and can be accessed in React with the useState function. In SolidJS, this concept is known as signal, and its corresponding creation function is createSignal.

States and signals house component data (in the form of props), enabling the framework to track value changes. And when the framework detects a change, the component is rendered with the according value(s).

Effect

An effect is a special function that is a core building block in both React and SolidJS. Instead of responding to a direct user interaction with the browser, an effect is triggered when a component state changes, akin to a callback or event listener.

React defines an effect with the useEffect function, while SolidJS uses the createEffect function.

Memoization

Memoization optimizes framework performance by caching expensi?ve component render results, and using cached values when appropriate as opposed to recomputing values. In React, we implement memoization by using one of three hooks:

React depends on memoization for its applications to render quickly. In contrast, because of its optimized change tracking and DOM usage, SolidJS rarely requires explicit memoization. For extreme edge cases in which component prop changes do not entail a rendering update, SolidJS manages memoization through a single method called createMemo.

Performance

SolidsJS and React have performance differences that reach beyond their approaches to memoization. The two languages approach HTML manipulation in very different ways. The focal point of this difference is how each updates the browser DOM.

React’s founder gave it a lightweight virtual DOM to interface with the browser’s actual DOM. React’s code causes its own virtual DOM to update as components render. React then compares the updated virtual DOM against the browser’s DOM, and the identified changes bleed through into the actual page structure (i.e., the DOM).

We could argue that—because React re-renders components by default, relying on DOM difference calculations for updates—React is doing its work twice. Since it renders components every time, React requires memoization to avoid unnecessary, repetitive computations.

In contrast, SolidJS’s founder managed to dodge all of this round-tripping. By using a mechanism called fine-grained reactivity to directly manipulate the browser’s DOM, SolidJS delivers a much lighter memory footprint and a blazingly fast application of page edits and injected code.

Fine-grained reactivity tracks variable interdependencies. Based on variable dependency and edit chains, SolidJS limits our page structure updates to reflect only what has changed, bypassing unnecessary component renders. This results in a massive performance improvement over React.

Though I am tempted to end the article here and say that SolidJS is the clear winner due to its speediness, it remains important to discuss how the two frameworks stack up in terms of developer efficiency.

Developer Productivity

There are a few key considerations when we consider developer productivity in React versus SolidJS:

A review of your project’s specific use cases can reveal which framework is a better choice, productivity-wise.

SolidJS vs. React

I have considerable experience with both SolidJS and React. From my perspective, SolidJS is the clear winner of the two. SolidJS matches React’s power and robust features. Moreover, it delivers a brisk responsiveness to end users that is unmatched by React.

For a React developer to get up to speed on SolidJS, which leverages the lessons, structure, and abstract approaches learned over React’s lifetime, there is almost no learning curve. I’d recommend you start using SolidJS today—it may be the future of front end.