Guide to Choosing Between SolidJS and React

At first glance, SolidJS and React might seem quite similar. Both are client-side frameworks that are easy to understand in relation to each other, and they both are used to build single-page applications (SPAs). Although they offer a nearly identical experience for developers, the inner workings of each framework are strikingly different.

While both SPA frameworks are designed to organize the structure and functionality of an app’s webpages, they interact with the HTML elements of those pages differently within a browser to create the desired user experience. SolidJS and React take different approaches to utilizing the Document Object Model (DOM). Let’s delve deeper into how components in React and SolidJS enable application logic to simulate a multi-page website.

A Quick Look

I’m a big fan of getting to the point, so I’ve summarized the key differences between React and SolidJS in the table below:

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, let’s examine the similarities and differences between React and SolidJS in greater detail.

Component Structure

React and SolidJS share the exact same programming structures and support for components (individual, reusable blocks of code).

In both modern React and SolidJS, a component is defined by a render function that takes properties as arguments. This code is concise and efficient thanks to the use of JSX in each component. JSX is easy to understand and allows seasoned developers to visually represent a component’s model directly within its definition.

While React and SolidJS offer the same types of components, their rendering methods differ. React components render on every change (unless memoization is used), whereas SolidJS components only render once.

Another distinction lies in the features they offer to enable component functionality.

Component Functionality

A component lacking functionality is nothing more than markup. So, how do React and SolidJS make components interactive? Their approaches are comparable:

	Feature	Prefix	Description
React	Hooks	`use` (e.g., `useState`)	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	Reactive primitives	`create` (e.g., `createSignal`)	These are functions whose APIs are similar to those of hooks.

Feature

Prefix

Description

React

Hooks

use (e.g., useState)

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

Reactive primitives

create (e.g., createSignal)

These are functions whose APIs are similar to those of hooks.

Behind the scenes, both hooks and reactive primitives serve as a way to connect with the respective change management systems of React and SolidJS. Overall, the two frameworks handle component functions similarly but use distinct methods and terminology.

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

State

Sometimes, a framework needs to keep track of information and specific properties associated with a component. This is referred to as state, and in React, it’s accessed using the useState function. In SolidJS, this concept is known as a signal, and it’s created with the createSignal function.

States and signals store component data (in the form of props), allowing the framework to monitor changes in values. When a change is detected, the framework re-renders the component with the updated value(s).

Effect

An effect is a special function that acts as a fundamental building block in both React and SolidJS. Instead of reacting directly to user interaction with the browser, an effect is triggered when a component’s state changes, similar to a callback or event listener.

React defines an effect using the useEffect function, while SolidJS utilizes the createEffect function.

Memoization

Memoization enhances framework performance by storing the results of expensive component renders in a cache and utilizing these cached values when appropriate instead of recomputing them. In React, memoization is implemented using one of three hooks:

Memoization Hook	Used With
`memo`	Pure components
`useCallback`	Components that rely on function props
`useMemo`	Expensive operations and component operations

React relies heavily on memoization to ensure fast rendering of applications. In contrast, SolidJS, with its optimized change tracking and DOM manipulation, rarely requires explicit memoization. For rare edge cases where component prop changes don’t necessitate a rendering update, SolidJS employs a single method called createMemo for memoization.

Performance

The performance differences between SolidsJS and React go beyond their approaches to memoization. The two frameworks handle HTML manipulation in fundamentally different ways. The key difference lies in how they update the browser DOM.

React utilizes a lightweight virtual DOM to interface with the browser’s actual DOM. When components render in React, they trigger an update in React’s virtual DOM. React then compares this updated virtual DOM with the browser’s DOM, and the identified differences are applied to the actual page structure (i.e., the DOM).

One could argue that since React re-renders components by default and relies on DOM difference calculations for updates, it’s essentially doing the work twice. Due to this constant re-rendering, React needs memoization to prevent unnecessary, repetitive computations.

In contrast, SolidJS’s creator managed to circumvent this entire round-trip process. By using a mechanism called fine-grained reactivity to directly manipulate the browser’s DOM, SolidJS achieves a significantly lighter memory footprint and delivers incredibly fast application of page edits and code injections.

Fine-grained reactivity tracks dependencies between variables. Utilizing this variable dependency and edit chains, SolidJS limits page structure updates to reflect only the changes made, bypassing unnecessary component renders. This results in a massive performance boost compared to React.

While it’s tempting to conclude that SolidJS is the clear winner due to its speed, it’s crucial to compare their developer efficiency.

Developer Productivity

When comparing developer productivity in React versus SolidJS, several factors come into play:

Objective	React	SolidJS
Identifying and tracking component dependencies	✔ Manually tags component dependencies with useEffect.	✔ Automatically detects and tracks component dependencies.
Destructuring properties within `render` or hook definitions	✔ 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 careful analysis of your project’s specific requirements can help determine which framework offers better productivity.

SolidJS vs. React

Having extensive experience with both SolidJS and React, I believe SolidJS is the superior choice. SolidJS matches React’s power and robust features while delivering unmatched responsiveness to end-users.

For React developers, transitioning to SolidJS requires minimal effort, as SolidJS builds upon the lessons, structure, and abstract approaches learned from React’s evolution. I highly recommend giving SolidJS a try—it might just be the future of front-end development.

The editorial team of the Toptal Engineering Blog expresses its sincere appreciation to Yonatan Bendahan for reviewing the technical content presented in this article.