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…