Similarities between SolidJS and React
It’s not news that Solid and React share almost the same design philosophies, and anyone that has written code in both libraries quickly understands this. Let’s go over what makes Solid and React so similar.
JSX first class support
React.createElement functions, respectively.
Both Solid and React are declarative because they update efficiently and render the right components when data changes.
In declarative programming, you only describe the final state of the desired UI and the rendering engine will determine the best way to execute. Declarative components are easier to debug and more readable as opposed to the imperative way of writing code.
Unidirectional data flow
A unidirectional pattern of data flow means that data has only one way to be transferred to other parts of the application. In libraries such as Solid and React, this means that you would often need to nest child components within higher-order parent components.
A unidirectional pattern of data flow has the following advantages:
- You have more control over your data so you tend to have fewer errors
- More control means debugging is a breeze
- High level of efficiency, because the system has boundaries and already knows which component owns what piece of data
Differences between SolidJS and React: Why is SolidJS so fast?
Absence of a virtual DOM
One of the most striking differences between Solid and React is the absence of a virtual DOM. Contrary to the idea that using the main DOM slows down an application, it is part of what makes Solid so performant.
This is the solution that many libraries and frameworks such as React, Vue.js, and Riot.js use, but today, the creators of Svelte and Solid have described the virtual DOM as pure overhead that only slows down the performance of the library. They have sought out alternate, faster options that include using the real DOM (which beats the rest of the virtual DOM competition).
The way Solid achieves such performant speeds without the use of a virtual DOM is to compile its templates down to real DOM nodes and wrap updates in fine-grained reactions. This way, when your state updates, only the code that depends on it runs.
Components don’t re-render
Components in Solid, unlike React, render just once, and only the JSX expressions and primitives that are being used in the component get updated.
This brings performance gains to Solid as re-rendering a component is not necessary every time it is being used. Solid is reactive enough to track the changes happening inside the component itself.
React in itself is not fully “reactive,” which the React team acknowledges. This should not in any way be a turnoff for anyone looking to use React, because it still gets the job done and is loved by thousands of developers and companies around the globe.
However, Solid was built with reactivity in mind, and uses this as its selling point. It uses the term “fine-grained reactivity” to describe its performant speeds and ability to swiftly update data.
SolidJS vs React at a glance
For this section, we’ll be comparing both libraries based on the following metrics:
- Developer experience
- Community and ecosystem
- Documentation and resources
Both Solid and React have great developer experiences. This is because both Solid and React share a few of the same philosophies, such as unidirectional data flow, read/write segregation, and immutable interfaces (except the implementation of a virtual DOM, as we discussed earlier).
Solid also provides first-class JSX and TypeScript support, alongside a few features that are similar to that of React’s, such as context, portals, SSR, hydration, and many more.
Don’t get me wrong, React is mighty fast, but its potential is limited by its implementation of a virtual DOM and its quest for clean code architecture.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js
Solid’s performant speeds can be attributed to a design principle known as granular reactivity, which the creator talks about in this article.
Community and ecosystem
Hands down, React wins this segment because of its vast ecosystem of third-party UI component libraries, tools, and resources.
At the time of writing, React comes in at over 180k Github Stars and 8.7M weekly npm downloads while Solid comes in at over 13k Github Stars and 11.5k weekly npm downloads.
React’s numbers dwarf that of Solid, but we have to take into account the fact that Solid is fairly new to the competition as it was open-sourced in 2018 and now has over 70 contributors. Its growth isn’t staggering, but it is steady.
If you like to get your hands dirty and figure things out yourself, or contribute to the early stage development of a library, then Solid is the one for you.
Documentation and resources
The number and quality of resources or documentation that exists for a particular framework or library is a result of how established the ecosystem is.
Because React has been around for longer, it has good documentation alongside a vast ecosystem of resources for newbies and advanced developers to follow.
While Solid is fairly new, its creator, Ryan Carniato, is doing a lot of work to put Solid out there by creating videos and blog posts regarding Solid’s development. Members of the community are also creating lots of useful resources and guides on the library. Solid also has proper documentation on its website for newcomers.
The final verdict
In this article, we’ve gone through similarities, differences, and even gone ahead to compare both Solid and React based on developer experience, community, and documentation, among other metrics.
We can see that Solid is doing something right when it comes to performance and developer experience, which are the most important benchmarks. But its biggest hindrance to becoming one of the most used libraries out there is its community and ecosystem.
Let’s face it, most people and corporations will only choose React because of the vast ecosystem and resources that back it up. I mean, there’s an npm package for virtually anything in React. Solid can’t compete with that at this stage, so there’s a lot of work to be done with regards to community building if Solid wants the mass adoption of their library.
Cut through the noise of traditional React error reporting with LogRocketLogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications. LogRocket automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.
Focus on the React bugs that matter — try LogRocket today.