SolidJS Reactivity System

SolidJS is a modern JavaScript framework for building user interfaces. You may have just heard about it recently, but it’s not new. Here are a few things to know about SolidJS and how it compares with React.

What It Is

SolidJS is a declarative JavaScript library for creating web applications with a focus on performance and fine-grained reactivity. Its development began in 2016 by Ryan Carniato, with the first commit to the SolidJS repository occurring on August 21, 2016. The framework's official 1.0 release was in June 2021. It has gained significant popularity in recent years.

Key Features

• Fine-grained reactivity: SolidJS uses a reactive system that updates only the specific parts of the DOM that need to change, making it extremely fast.

• No Virtual DOM: SolidJS compiles your code to real DOM operations, which contributes to its excellent performance.

• Familiar syntax: If you know React, SolidJS will look very familiar. It uses JSX and has a component-based architecture with similar patterns to useState (called createSignal in Solid).

• Small bundle size: The framework itself is lightweight, typically resulting in smaller production bundles.

• True reactivity: State updates automatically propagate through your application without needing to worry about dependency arrays or optimization techniques.

How Does It Work

SolidJS's reactivity has three main components working together:

1. Signals - Hold reactive values and track their subscribers

2. Effects - Functions that auto-run when their dependencies change

3. Direct DOM references - Stored in closures, accessed by effects

Phase 1: Set up signals and bind to DOM notes

Phase 2: Trigger updates in signal and notify subscribers (DOM nodes)

The brilliance of SolidJS:

• Signals track which effects depend on them (the dependency graph)

• Effects hold direct references to DOM nodes (the O(1) access)

• When a signal changes, it notifies its effects, which update their DOM nodes directly

SolidJS vs. ReactJS

React uses the Virtual DOM to make DOM updates easier and more predictable for developers, not necessarily for raw performance. The Virtual DOM is actually an abstraction layer that adds overhead - it requires:

1. Creating a virtual representation of the UI in memory

2. Comparing (diffing) the old and new virtual trees

3. Then updating the real DOM

SolidJS can be more performant with its fine-grained reactivity and compile-time optimizations:

1. Direct DOM updates: When you write SolidJS code, the compiler analyzes your components at build time and generates code that updates specific DOM nodes directly when state changes—no diffing needed.

2. Surgical precision: Instead of re-running component functions and comparing trees, SolidJS creates reactive "subscriptions" that know exactly which DOM nodes depend on which pieces of state. When state changes, only those exact nodes update.

3. One-time setup: The component function runs only once during creation. After that, only the reactive values update, triggering their specific DOM updates.