Solid vs React: Two Modern UI Frameworks go Head-To-Head

In the world of modern web development, choosing the right UI framework can greatly impact the success and efficiency of your projects. Two popular contenders in this space are Solid and React.

While both frameworks share similarities, both use JSX for templating, both use reactive components that look like hooks, and have similar utility component names: Fragments, Portal, Suspense, Context.

They also have distinct differences that set them apart. In this article, we will delve into the key contrasts between Solid and React there are many differences that make Solid a better choice for building a modern application.

?? 1. DOM updating techniques

The best way to see this difference is to compare these two pieces of code.

The code is here for demonstration purposes only, so we won’t dig too much into the detail, but basically, the count value increments every second.

Here is how that is achieved with React (link to CodeSanbox):

import { useState, useEffect } from 'react';

export default function Counter() {
  console.log('This Hits!');
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    
    return () => clearInterval(interval);
  }, [count]);

  return <div>Count is {count}</div>
}        

And here is how it is done with Solid (link to CodeSandbox):

import { createEffect, createSignal } from 'solid-js';

export default function Counter() {
  console.log('This Hits!');
  const [count, setCount] = createSignal(0);

  createEffect(() => {
    setInterval(() => {
      setCount(count() + 1);
    }, 1000)
  });

  return <div>Count is {count}</div>
}        

You’ll notice in the console of the React code, ‘This Hits!’ is printed out each time the count is incremented. But for the Solid code, it is only printed out once.

This is because the React component re-renders each time there is a change, whereas the Solid component just renders once and only updates the reactive value. The way it works is when you call a reactive function, via count() or {count}, it always checks if the value has changed. If you’ve heard the term subscribing, this is what it means. So the whole component doesn’t need to be re-rendered.

?? 2. Effect functions

Imagine in our Counter component above, we wanted to trigger a console log whenever the component is initialised, whenever it updates, and when it is removed or destroyed. That part of the code will look like this for React:

// ReactJS
useEffect(() => {
  console.log("Initialised");
  return () => {
    console.log("Removed")
  }
}, []);

useEffect(() => {
  console.log("Updated");
}, [count]);        

And like this for Solid:

// SolidJS
onMount(() => {
  console.log("Initialised");
})

onCleanup(() => {
  console.log("Removed")
})

createEffect(() => {
  console.log("Updated");
})        

NOTE: For the Solid implementation, the onMount and onCleanup functions need to be additional imports from solid-js.

You can see that with the Solid implementation, it is much easier to read what is going on for initialisation and removal. You may also notice that for the React implementation of the second useEffect() function, it contains an array as an argument. This is a dependency array and tells the effect what reactive values it should be listening out for.

This is not necessary in Solid because the createEffect function only updates whenever a reactive value updates. However, it is still possible to explicitly set a dependency if desired.

?? 3. Architecture

React makes use of something called the Virtual DOM, which is a technique that was also used in Vue at one point. The way this works is React creates a virtual version of the user interface (or DOM) and stores it in memory. Whenever data in the application changes, the virtual DOM figures out what other components are affected by that change and then applies all those updates to the real DOM. This improves the application’s overall performance.

Solid, however, does not use a virtual DOM for updates; it simply updates the real DOM. This means Solid can update the DOM faster and has a smaller bundle size because it doesn’t need to construct a virtual DOM.

?? 4. Looping through values

Imagine we wanted to create multiple JSX elements by looping through an array of data. This is what the code will look like in React:

// ReactJS
export default function Looper() {
  const arr = [1, 2, 3, 4, 5];

  return arr.map((val) => {
    return <div key={val}>Count is {val}</div>;
  });
}        

And this is how it would look like in Solid:

// SolidJS
export default function Looper() {
  const arr = [1, 2, 3, 4, 5];

  return (
    <For each={arr}>
      {(val) => <div>Count is {val}</div>}
    </For>
  );
}        

NOTE: For the Solid implementation, the For component needs to be imported from solid-js.

There are some big differences between them. First of all, React uses the map method to loop over the array, which is easy to wrap your head around as it’s just regular JavaScript. However, it requires you to provide each component with a key property. This is because if only one of the five rendered elements changes, React needs a way to tell the virtual DOM exactly what component to update, and it uses the unique key to do so.

For Solid, however, looping over data requires the use of the <For> component along with some interesting syntax which almost resembles an array method. Because this isn’t conventional JavaScript, it will take a while for people new to the framework to get used to. However, the Solid implementation does not require the use of a key prop because Solid does not use a virtual DOM.

?? 5. Ecosystem

It’s no secret that ReactJS has been in existence for much longer than SolidJS and therefore has a much larger community that has created many tools, plugins, frameworks, and tutorials for React. If there’s anything you want to do in React, there’s a high chance someone has created something to help you do it.

With SolidJS, however, the community is much smaller, and it’s very likely that if you’re doing something unique with Solid, there won’t be a tool, plugin, or tutorial on how to do it. It will require a lot more investigation and experimentation to achieve your goal.

React is also much more prevalent when it comes to jobs. Many companies have adopted it as the framework for their application, so if you wanted to work in the industry, it would be far better to learn React than it is to learn Solid.

?? 6. Ownership

Both frameworks are open-source with very popular GitHub repositories. React, however, was created and maintained by Facebook (Meta). It has been and still is used to create many of Facebook’s internal and external applications. This means it has been battle-tested on large sites with many users and many features.

Although Solid is perfectly capable of handling as much of a large and feature-rich site as React, it doesn’t have the backing of a large tech company behind it. This might put people off the framework or draw people who aren’t a fan of Facebook towards it.

?? 7. Adding CSS classes

This is a small point, but you will appreciate this if you have used React in the past. If you wanted to add a CSS class to a component in React, the code for that would look something like this:

<!-- ReactJS -->
<div className="main-text">Page title</div>        

For Solid however, it would be this:

<!-- SolidJS -->
<div class="main-text">Page title</div        

There’s a very small difference between class and className, but it makes a huge difference if you’re copying a large amount of HTML code to JSX, or you’re just used to writing the former instead of the latter. I believe the reason behind className for React is that class is already a reserved keyword in JavaScript, so they didn’t want to avoid any clashes.

I’m sure there are some other differences I’ve missed out on, but I believe I’ve made you aware of the most important differences in this article.

?? What now?

Thanks for making it all the way to the end of this article. I really appreciate you giving my words your time.

You can find me on most social media platforms. I write code and create content for a living. If you'd like me to do either of those things for you let's talk.