SolidJS vs. React: The Go-to Guide
SolidJS is a blazing-fast framework that dodges virtual DOM manipulation. Let’s see how it compares to React, the industry standard, when it comes to components, performance, and developer productivity.
SolidJS is a blazing-fast framework that dodges virtual DOM manipulation. Let’s see how it compares to React, the industry standard, when it comes to components, performance, and developer productivity.
Nathan is a senior React engineer and an expert in streamlining UI/UX with React. As the lead design engineer at Motorola Solutions, he marshaled a product combining React, Angular, and Svelte to company-wide deployment, garnering more than 100,000 downloads. Nathan also developed Hypetrigger, a popular machine vision system for use with streaming services and that is built with React and SolidJS for the front end.
Expertise
Previous Role
Lead Design System EngineerPreviously At
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:
Feature | React | SolidJS |
---|---|---|
TypeScript support |
✔ |
✔ |
Declarative nature |
✔ |
✔ |
Unidirectional data flow |
✔ |
✔ |
JSX first-class support |
✔ |
✔ |
Direct manipulation of the DOM |
✘ |
✔ |
Avoids component re-rendering |
✘ |
✔ |
Highly performant |
✘ |
✔ |
Rich community and ecosystem |
✔ |
✘ |
Excellent developer documentation |
✔ |
✔ |
Scaffolding tools |
✔ |
✔ |
Conditional rendering |
✔ |
✔ |
Server-side rendering (i.e., hydration) |
✔ |
✔ |
Concurrent rendering (i.e., suspense) |
✔ |
✔ |
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:
Feature | Prefix | Description | |
---|---|---|---|
React | Hooks |
|
These are functions intended to run when triggered by the framework at specific times in a component’s lifecycle. Hook functions are independent from one another, but can call other hooks from within the same component. Such call chains allow for more complex functionality and for code to be composed into subfunctions. |
SolidJS |
| These are functions whose APIs are similar to those of hooks. |
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:
Memoization Hook | Used With |
---|---|
| Pure components |
| Components that rely on function props |
| Expensive operations and component operations |
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:
Objective | React | SolidJS |
---|---|---|
Identifying and tracking component dependencies |
✔ Manually tags component dependencies with useEffect. |
✔ Automatically detects and tracks component dependencies. |
Destructuring properties within |
✔ Supports this feature. |
✘ Does not support this feature out of the box, but this utility project bridges the gap. |
Using state components without markup |
✔ Requires more scripting to implement a shared state between multiple components. |
✔ Supports this efficiently and natively. |
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.
The editorial team of the Toptal Engineering Blog extends its gratitude to Yonatan Bendahan for reviewing the technical content presented in this article.
Further Reading on the Toptal Blog:
- Full-stack NLP With React: Ionic vs. Cordova vs. React Native
- Navigating the React.js Ecosystem
- React Tutorial: How It Compares to Angular and Vue
- React Tutorial: Components, Hooks, and Performance
- Test-driven React.js Development: React.js Unit Testing with Enzyme and Jest
- Next.js vs. React: A Comparative Tutorial
- Tested Solutions: Working With React Design Patterns
Understanding the basics
What is SolidJS used for?
SolidJS is a JavaScript framework that supports binding data to elements that it then syncs and displays on web pages.
Is SolidJS better than React?
Yes, SolidJS is better than React, because SolidJS delivers a faster developer experience that’s comparable to React.
Why is SolidJS so fast?
SolidJS uses a system called fine-grained reactivity to write updates directly onto a webpage. In contrast, React updates a virtual DOM with its page changes. That virtual DOM and the current page’s DOM are compared, and only the differences are written. React’s approach is slower than the SolidJS approach.
What is the main advantage of React?
React is the industry standard for robust client interfaces. React boasts an immense library ecosystem, a robust knowledge base, and a large developer pool. SolidJS is newer and cannot compete in these areas.
Chicago, IL, United States
Member since December 29, 2021
About the author
Nathan is a senior React engineer and an expert in streamlining UI/UX with React. As the lead design engineer at Motorola Solutions, he marshaled a product combining React, Angular, and Svelte to company-wide deployment, garnering more than 100,000 downloads. Nathan also developed Hypetrigger, a popular machine vision system for use with streaming services and that is built with React and SolidJS for the front end.
Expertise
Previous Role
Lead Design System EngineerPREVIOUSLY AT