- Granularity: Solid.js does not need a virtual DOM and only updates what needs to be updated
- Easy to use: Easy to learn and familiar to the experienced
- Well rounded: Solid.js has everything you need to build your next awesome project
Solid.js was built with fine-grained reactivity in mind, and therefore makes no use of a virtual DOM but instead makes use of a compiler. With the implementation of setup functions, Solid.js is able to track and update the reactive parts of your components, giving Solid.js the ability to get rid of the Virtual DOM and any other complex rendering techniques that might come along with it. So you won't need to worry about the side effect of re-rendering or re-running things that shouldn't be, just because they're in the same component.
For instance imagine you have a reactive number value that changes every time a button is pressed, it either decrements or increments. However, this value is deeply nested in tags and even nested in text within a tag. Other frameworks would completely update and re-render the component that directly contains it, Solid.js on the other hand only updates and re-renders the reactive value. Yes, and I mean only the value, nothing around it, even the text within the same tag is left untouched.
Solid.js is built to be approachable and easy to get started with even for developers with little to no web development experience. Solid.js is built on top of the JSX and function component syntax, so it offers a very familiar experience to that of frameworks like React.js and Preact.
This ease of use doesn't only apply to Solid.js the web framework but also everything else Solid.js has to offer, for example it's primitives. We wanted to make sure that everything was lightweight, required zero to low experience and easily understandable. For instance you can make use of the
createSignal primitive wherever you would like, whether that be inside or outside your components, hell you can even have them outside the file and import them 😅, it's all up to what you are comfortable with.
With Solid.js everything you need to get your project started is built in, offering features like state management, data-fetching, caching, reactivity and more. Like the folks at Astro would say "opt-in to complexity", since Solid.js was built to be your one stop web framework for everything state management, reactivity and everything in between.
Through out this page we've been talking about primitives, and in this section we will be discussing why they're so important and why we offer them.
Solid.js is made up of 3 primary primitives namely Signal, Memo and Effect, which offer state management, caching and tracking respectively. These are all built upon the observer pattern.
Another cool primitive is the
createResource primitive that makes it easy for Solid.js to make use of async data without having to halt the execution process or delay anything else unless intended. We will touch more on this and more in the reactivity section