SolidJS vs ReactJS: Which One Should You Learn?

August 12, 2022 • 0 minute read • Author: Ebenezer Don

SolidJS looks familiar to ReactJS and has become the centre of attention in the frontend community. Many developers are already adopting it, and many others are asking if they should learn it instead of ReactJS.

The good news is, if you already know React, learning SolidJS should not be a problem. But if you learn SolidJS first, using React to build apps afterwards will likely be difficult.

In this article, you'll learn about SolidJS and its similarities and differences with ReactJS. You'll learn how to create new projects with both frameworks, how components work in SolidJS and ReactJS, state management, handling DOM updates and the job market opportunities in the SolidJS and ReactJS ecosystem.

Starting a new project

The most critical part of adopting any frontend framework is its ease of use. No matter how performant a framework is, If using it to create a new project is too complex, its adoption in the frontend ecosystem will be slow.

Creating a new ReactJS project

ReactJS has different options for creating a new project, including create-react-app, Vite and a manual setup using Webpack. The most widely used is create-react-app. With Node.js installed on your computer, you can run this command on your terminal to create a new React project using create-react-app:

npx create-react-app my-new-react-app

This will generate a new react application named "my-new-react-app" with webpack as the build tool and npm as the default package manager. To run your new React app, navigate to the "my-new-react-app" folder and run npm start. You should see a page that looks like this on your browser:

Creating a new SolidJS project

Just like React, SolidJS has a one-line command you can run on your terminal to create a new project from the official git repository template using degit. To create your new SolidJS app, run this command on your terminal:

npx degit solidjs/templates/js my-new-solidjs-app

This will generate a new SolidJS app named "my-new-solidjs-app" with pnpm as the package manager and Vite as the build tool. To start up your new SolidJS app, run npm install on your terminal, and then npm start. You should see a similar page to this on your browser:

Components

Components are one of the fundamental building blocks of modern frontend frameworks. SolidJS components look very similar to React functional components, and they both use JSX, the popular HTML-like syntax extension to JavaScript. You can create components in both frameworks by declaring a JavaScript function variable using either the function keyword or the arrow function syntax:

function App({ nameOfFramework }) {
  return (
    <div class="app">
      <p>My {nameOfFramework} App</p>
    </div>
  )
}

SolidJS and ReactJS also use props the same way. You'll begin to see the difference between both frameworks when you start handling data and DOM updates.

State management

State often refers to the data that frontend apps use to function. Frontend apps are expected to update their interface and content whenever the state changes to reflect the new data. The state is often referred to as global when it can be accessed by every component in the frontend web app.

State management in React

ReactJS has had a history of solutions and alternatives for handling state, including Redux, the Context API, RxJS and Hookstate. The most widely used global state management tool in the React community is Redux, which can be complex to set up and use.

For local state management in individual components, the React useState hook has become the go-to solution. To declare a local state in React, you'll need to import useState from 'React' and then declare a variable with the name of your state. Finally, you'll need to call the useState hook with the default value of your state as its argument:

const App = () => {
  const [nameOfAuthor, setNameOfAuthor] = useState('Ebenezer Don')

  return <p>This article was written by {nameOfAuthor}</p>
}

export default App

The React useState hook returns an array with two elements as its value, so you can destructure directly to get the first element as the value of the state. The second array element is a function which you can use to update the created ReactJS state:

setNameOfAuthor('Some other person')

The downside to using hooks in ReactJS is that you can only call them inside a component. This is why the useState hook is restricted to local state management.

State management in SolidJS

SolidJS has a similar state management system to React. Instead of useState, it's called createSignal in SolidJS. And when the state is created, both the first element representing the state value and the second for updating the state are functions. So, unlike React, you need to call the state variable to get its value:

const App = () => {
  const [nameOfAuthor, setNameOfAuthor] = createSignal('Ebenezer Don')

  return <p>This article was written by {nameOfAuthor()}</p>
}

export default App

On the other hand, the SolidJS createSignal method can be used outside a component, so it's easy to export it like any other variable and import it in any component it's needed. This makes handling global state straightforward in SolidJS:

// focus(1,11)
const [nameOfAuthor, setNameOfAuthor] = createSignal('Ebenezer Don')

const App = () => {
  return <p>This article was written by {nameOfAuthor()}</p>
}

export { nameOfAuthor }

export default App

Handling DOM updates

A web framework's speed mostly depends on how it handles updates to the browser DOM (Document Object Model) and how ReactJS and SolidJS handle DOM updates is significantly different.

How ReactJS handles DOM updates

ReactJS uses a virtual DOM, which is a virtual representation of the actual browser DOM. Whenever the web application's state changes, React creates a new virtual DOM tree and compares it with the previous virtual DOM tree. Each HTML element is a node on this tree.

After this is done, React figures out what exactly has changed in the virtual DOM and calculates the best way to update the real DOM. This method of updating the DOM is faster than generating a new HTML page and replacing everything on the browser.

But it's also possible to update specific parts of the real DOM if you're working with actual DOM nodes from HTML, which would eliminate the need for the extra virtual DOM that ReactJS uses, and this is where SolidJS shines.

How SolidJS handles DOM updates

SolidJS compiles your code to actual DOM nodes, so every update is made directly to the actual DOM instead of interacting with an overhead virtual DOM like ReactJS. The SolidJS team calls this fine-grained reactivity. This difference in how both frameworks handle DOM rendering and updates gives SolidJS an edge over ReactJS regarding performance.

Is SolidJS Better Than ReactJS?

Deciding whether to learn SolidJS or ReactJS depends on several factors you want to prioritise in your web app or web development journey.

SolidJS excels when it comes to performance and ease of use. It looks like React in so many ways but has a lot of implementation differences. State management, for example, is much more straightforward in SolidJS than in ReactJS, and how SolidJS handles rendering and DOM updates is faster than ReactJS.

SolidJS also provides many out-of-the-box functionalities for which you'd need external libraries in ReactJS.

However, SolidJS is still new and doesn't yet have the level of adoption and ecosystem size that ReactJS has. So, it's easy to find third-party packages and integrations that work with ReactJS but not SolidJS.

It's also easy to find answers to most questions or bugs you'll encounter when working with ReactJS on sites like Stack Overflow or programming blogs. And if you just started your web development career and are hoping to get a job after you learn your first frontend framework, ReactJS currently has a much larger job market than SolidJS.

In the end, picking up SolidJS won't be challenging after you learn React because, syntax-wise, SolidJS is an easier alternative to React.