SolidJS is a lightweight JavaScript library for building declarative JavaScript apps, with a focus on performance and ease of use. It is designed to provide a smooth and seamless developer experience, with a simple and intuitive API that makes it easy to get started building web apps right away. SolidJS incorporates a few declarative JavaScript techniques that makes it an excellent choice for building fast, scalable, and reliable web applications. In this post, we’ll be exploring the main declarative JavaScript features of SolidJS that makes it stand out as a powerful web framework for the future.

This post was originally published in by Omer Herrera.

Declarative JavaScript Features in SolidJS

Declarative JavaScript is a programming paradigm where the focus is on describing what should be accomplished rather than explicitly detailing how it should be done. SolidJS follows this principle and also borrows some concepts from React, like the JSX and Components to offer a truly reactive web framework for building fast UI. It was created by Ryan Carniato in 2018 and is loved by developers because it’s both pragmatic and extremely performant. Unlike the React Virtual DOM rendering, SolidJS compiles into a performant native HTML/JavaScript (more like Svelte) that is rendered by the browser.

Here are some of the main declarative features of this framework.

1. Declarative components

SolidJS lets you define function components with JSX syntax. This syntax can also have expressions to embed values from variables, and even fragmented JSX syntax without a bounding HTML element.

React vs SolidJS

In SolidJS, components are initialized only once unlike React where they are called again and again during re-rendering. Components in SolidJS are tracked by it’s internal reactive system to avoid costly re-rendering every time.

2. Reactive state updates

In SolidJS, a function component can define getter and setter functions to manage state variables. This is part of the framework’s reactive system which defines a signal to get and set a state variable to be accessed across more than one component.

SolidJS Observe Changes

Internally, the framework observes this data initiated through the signal and surgically updates its exact location in the DOM when a change is detected, instead of re-rendering the entire component again. This is a true reactive behavior with minimal rendering and performance overhead.

Similar to signals, other primitives such as createEffect( ) and createMemo( ) are available to offer developer friendly ways of working with state variables within the application source code.

3. Conditional rendering with special components

The SolidJS framework makes JSX more developer friendly by including a few special components that control the rendering. Here are two most commonly used examples of control flow rendering :

  • <Show> component to handle conditional logic.
Conditional Rendering in Declarative JavaScript Apps
  • <For> component to simplify loops over a collection of items.
For Loop in Declarative JavaScript Apps

4. Attaching custom behavior to elements

With a use keyword, SolidJS lets developers to attach custom behaviors to different elements.

Using directives


The above feature list should give you some idea of what it means to write code in a declarative JavaScript way using SolidJS. Check out the SolidJS tutorial page to know more about these and other features.

You can also checkout the sample application code used on the examples snippets above. Staff

About the author

Showcasing and curating a knowledge base of tech use cases from across the web.

TechForCXO Weekly Newsletter
TechForCXO Weekly Newsletter

TechForCXO - Our Weekly Newsletter Delivering Technology Use Case Insights for CXOs