Solid Myths Debunked

Today we will talk about some of the myths about Solid that people believe.

My goal is to help you feel more confident in picking up Solid for your next project!

Solid’s Ecosystem Is Too Small

Yes, it is true that Solid’s ecosystem is smaller than React but the quality is there.

Probably the biggest complaint is the lack of UI libraries. This is simply not the case anymore. There are many good ones including:

It also has plenty of other third party packages/services you can use:

The one place I see a bit of a gap is with an easy to integrate auth service like Clerk.

Signals Don’t Scale

I honestly don’t buy this one. I haven’t actually worked in a large Solid codebase so maybe I just haven’t run into it yet. I have worked on some large React codebases and I feel all my best practices translate over rather easily with signals. Now of course you can do stupid things but so can you with React.

I think the biggest revelation in this space is read/write segregation. This is something old signal implementations didn’t have and thus made reasoning about state challenging. I think some peoples opinions are coloured by this old reality that is no longer the case. I highly suggest you read Ryan Carniato’s Thinking Locally With Signals article.

The following tweet suggests a codebase that has moved over and has not regretted it.

JSX Is Bad

Some people still have a strong distaste for JSX. Part of it is probably due to the fact of not liking React and thus JSX since its the most visible part of React. Solid has its own take on JSX which comes with improvements like being able to use class instead of className, as well as using more native css properties like justify-content instead of camel casing it.

It also represents real dom nodes. If you console.log(<div />); you actually get a HTMLDivElement whereas in React you get an object something like this:

{$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: {…}, …}

Solid Is Hard To Learn

So you’ll be surprised how much of your React mindset can transfer over. One main difference however is that you don’t have to worry about rerenders. The component body outside of the returned JSX only runs once.

Instead of rerenders you will instead worry about maintaining reactivity. Due to the fact that the component doesn’t rerender you sometimes need to wrap your operations in functions to make sure it is treated as a derived signal that tracks. Along the same line you have to call functions instead of using plain values like React.

The benefit of this is the ability to shed a lot of mental overhead of things like useMemo, useCallback, and dependency arrays.

Stale closures is also a thing of the past:

function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    <button
      onClick={() => {
        setCount(count() + 1);
        // what does count equal here?
        // in React this would be 0 but in Solid it has actually updated to 1
        // it doesn't wait for the next rerender
        console.log(count());
      }}
    >
      Increment
    </button>
  );
}

Conclusion

As you can see Solid has all the tools to be a dominate force in the future. Are you willing to try it?