Why should you start learning Solid.js? Well, I’ll tell you that today.
Recently, another JavaScript library has been gaining traction: Solid.js, created in 2018 by Ryan Carniato. If you’re a React developer, you may have heard of it.
First, keep in mind that developer experience in making SPAs in Solid.js and React may be the same, but the underlying mechanism is entirely different. In the browser, both of them change HTML elements on pages differently to give results! Though both have server-side and concurrent rendering, React isn’t as high-performing as compared to Solid.js. Also, the rendering approach is different. Components in React are rendered when there’s a change in their state.
On the other hand, rendering in Solid.js occurs only once. Even though Solid.js and React handle components in the same way, the methods both of them use are different. In React, hooks are used to connect to React’s change management system. Whereas, in Solid.js, reactive primitives are used to connect to the Solid.js change management system.
In React, when there’s a need to track information and properties, the setState/useState method is used. This concept is called state. In contrast, in Solid.js, this same concept is termed as a signal. It’s created with createSignal.
Further, for apps to render faster, React relies on memoization using useMemo and memo. Whereas Solid.js, due to optimized change tracking and DOM usage, only at times uses memoization. And in case it needs memoization, it uses createMemo.
HTML manipulation is also different in Solid.js and React. In React, there’s a virtual DOM that interfaces with the browser’s actual DOM. Virtual DOM is updated as the components are rendered. Further, the updated virtual DOM is then compared with the browser’s DOM. The changes are then made in the original page structure — the one with DOM.
But the problem is this way React works twice. It depends on the DOM differences for updates, after which the re-rendering of components is done.
Fortunately, nothing like this happens in Solid.js. Because there’s this fine-grained reactivity in Solid.js that manipulates the DOM directly. Because of this very reason, Solid.js delivers a lighter memory footprint. Page edits are also fast!
Further, this fine-grained reactivity only tracks changing interdependencies and there are no unnecessary component renders in Solid.js. Just change is reflected.
Top comments (0)