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.
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.
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.
<For>component to simplify loops over a collection of items.
4. Attaching custom behavior to elements
use keyword, SolidJS lets developers to attach custom behaviors to different elements.
You can also checkout the sample application code used on the examples snippets above.