Okay, here’s a comprehensive article on SolidJS, designed as a quick start guide, but with enough depth to get a solid understanding of its core principles and capabilities.

SolidJS Framework: A Quick Start Guide (and Beyond)

SolidJS is a declarative JavaScript framework for building user interfaces. While it shares some conceptual similarities with React (JSX, component-based architecture), it fundamentally differs in its approach to reactivity and rendering. SolidJS doesn’t use a Virtual DOM; instead, it compiles its templates down to highly optimized, fine-grained DOM updates. This leads to exceptional performance and a smaller bundle size, making it a compelling choice for web applications of all sizes.

This guide aims to be a “quick start” in the sense that it will get you up and running quickly, but it also delves into the why behind SolidJS’s design, allowing you to understand its core principles and build more effectively.

Table of Contents

1. Why SolidJS? The Advantages

   • Performance: The Fine-Grained Reactivity Advantage
   • Small Bundle Size: Efficiency by Design
   • Developer Experience: Familiar Yet Powerful
   • Simple Mental Model: Understanding Reactivity
   • TypeScript First: Strong Typing for Robust Applications

2. Setting Up Your Environment

   • Node.js and npm/yarn/pnpm
   • Vite: The Recommended Build Tool
   • Creating a New SolidJS Project with Vite
   • Project Structure Overview

3. Core Concepts: Reactivity and Components

   • Signals: The Foundation of Reactivity
     • createSignal: Creating Signals
     • Accessing and Updating Signals
     • Understanding Signal Updates and Tracking
   • Effects: Side Effects and Automatic Dependency Tracking
     • createEffect: Creating Effects
     • Cleanup Functions: Managing Resources
     • on: Explicit Dependency Tracking.
     • onMount: Lifecycle Hook (Equivalent to React’s useEffect with [])
     • onCleanup: Lifecycle Hook (Equivalent to React’s cleanup function in useEffect)
   • Components: Building Reusable UI Elements
     • Functional Components
     • JSX: Writing HTML-like Syntax in JavaScript
     • Props: Passing Data to Components
     • Children: Composing Components

4. Essential SolidJS Features

   • Control Flow: Conditional Rendering and Lists
     • Show: Conditional Rendering
     • For: Rendering Lists
     • Index: Rendering Lists with Index Access
     • Switch and Match: Pattern Matching
     • ErrorBoundary: Handling Errors Gracefully
   • Derived Signals: Computed Values
     • Memoization: Optimizing Calculations
   • Context: Sharing Data Across Components
     • createContext: Creating a Context
     • useContext: Accessing Context Values
   • Stores: Managing Complex State
     • createStore: Creating a Store
     • Nested Reactivity: Deeply Reactive Objects
     • Updating Stores: Mutating State Safely
     • Reconcilers: Fine-Grained Store Updates
   • Lazy Components: Code Splitting for Performance
     • lazy: Dynamically Loading Components

5. Building a Simple Application: A To-Do List

   • Project Setup
   • Creating the Task Component
   • Creating the TaskList Component
   • Creating the TaskForm Component
   • Adding Interactivity: Adding and Completing Tasks
   • Adding Styling (Optional)

6. Advanced Topics

   • Server-Side Rendering (SSR) with SolidJS
     • renderToString and renderToStringAsync: Generating HTML on the Server
     • Hydration: Making the Server-Rendered HTML Interactive
   • Solid Primitives: Reusable Reactivity Building Blocks
     • createResource: Fetching Data Asynchronously
     • createMutable: Mutable State (Use with Caution)
   • Integrating with Other Libraries
   • Testing SolidJS Components

7. Resources and Community

---

1. Why SolidJS? The Advantages

SolidJS offers a compelling set of advantages that make it a strong contender in the modern JavaScript framework landscape.

• Performance: The Fine-Grained Reactivity Advantage

  This is SolidJS’s most significant differentiator. Unlike React, which uses a Virtual DOM to compare changes and update the actual DOM, SolidJS compiles its templates into real DOM nodes and sets up a system of fine-grained updates. This means that when a piece of data changes, only the specific DOM nodes directly affected by that data are updated. There’s no reconciliation process, no diffing algorithm – just direct, efficient updates. This results in incredibly fast rendering and update performance, especially noticeable in complex applications with frequent state changes.

  • Key Concept: Fine-Grained Reactivity: SolidJS tracks dependencies at the individual data level (using Signals, which we’ll cover shortly). When a Signal changes, only the parts of the UI that depend on that specific Signal are updated.

• Small Bundle Size: Efficiency by Design

  Because SolidJS compiles away much of its framework code at build time, the resulting JavaScript bundle that’s delivered to the browser is significantly smaller than many other frameworks. This leads to faster initial load times, improved performance on lower-powered devices, and a better overall user experience. The compiler does the heavy lifting, leaving a minimal runtime.

• Developer Experience: Familiar Yet Powerful

  If you’re familiar with React, you’ll find SolidJS’s syntax and component model very approachable. It uses JSX, functional components, and concepts like props and context. However, SolidJS’s reactivity system, while different under the hood, is arguably simpler to reason about. You don’t need to worry about memoization techniques like useMemo and useCallback as often, as SolidJS’s reactivity handles many optimizations automatically.

• Simple Mental Model: Understanding Reactivity

  SolidJS’s reactivity system is based on Signals. Signals are like containers for values that automatically track where they’re used. When a Signal’s value changes, SolidJS knows exactly which parts of the UI need to be updated. This direct dependency tracking eliminates the need for manual dependency arrays (like in React’s useEffect) in most cases, making your code cleaner and less prone to errors.

• TypeScript First: Strong Typing for Robust Applications

  SolidJS is built with TypeScript in mind. It provides excellent type safety out of the box, helping you catch errors early in the development process and write more maintainable code. While you can use SolidJS with plain JavaScript, using TypeScript is highly recommended.

2. Setting Up Your Environment

Before we dive into coding, let’s set up our development environment.

• Node.js and npm/yarn/pnpm:

  You’ll need Node.js (version 16 or later is recommended) installed on your system. Node.js comes with npm (Node Package Manager), which we’ll use to install project dependencies. You can optionally use yarn or pnpm as alternatives to npm – they offer similar functionality with some performance improvements.

  • Installation: Download and install Node.js from the official website: https://nodejs.org/

• Vite: The Recommended Build Tool

  Vite is a fast, modern build tool that provides a fantastic developer experience for SolidJS projects (and other frameworks as well). It offers features like hot module replacement (HMR) for instant updates in the browser, optimized builds, and excellent TypeScript support.

  • Why Vite? Vite leverages native ES modules (ESM) for development, which dramatically speeds up development builds and HMR.

• Creating a New SolidJS Project with Vite

  Open your terminal and run the following command to create a new SolidJS project using Vite’s official template:

  “`bash
  npm create vite@latest my-solid-app — –template solid-ts # For TypeScript

  OR

  npm create vite@latest my-solid-app — –template solid # For JavaScript
  ``
Replacemy-solid-appwith your desired project name. Choose thesolid-tstemplate for TypeScript (recommended) orsolid` for plain JavaScript.

  Navigate into your project directory:

  bash
cd my-solid-app

  Install the project dependencies:

  “`bash
  npm install

  OR

  yarn

  OR

  pnpm install
  “`

  Start the development server:

  “`bash
  npm run dev

  OR

  yarn dev

  OR

  pnpm dev
  “`

  This will start a local development server, typically on http://localhost:5173. Open this URL in your browser, and you should see the default SolidJS starter application.

• Project Structure Overview

  The generated project will have a structure similar to this:

  my-solid-app/
├── public/
│ └── vite.svg
├── src/
│ ├── components/
│ │ └── Counter.tsx
│ ├── App.tsx
│ ├── index.css
│ └── main.tsx
├── index.html
├── package.json
├── tsconfig.json (if using TypeScript)
├── vite.config.ts
└── ...

  • public/: Contains static assets that are directly copied to the output directory.
  • src/: Contains your application’s source code.
    • components/: A good place to organize your reusable components.
    • App.tsx: The root component of your application.
    • index.css: Global CSS styles.
    • main.tsx: The entry point of your application (where SolidJS is initialized).
  • index.html: The main HTML file.
  • package.json: Defines project metadata and dependencies.
  • tsconfig.json: TypeScript configuration file (if using TypeScript).
  • vite.config.ts: Vite configuration file.

3. Core Concepts: Reactivity and Components

Now, let’s explore the fundamental building blocks of SolidJS: reactivity and components.

• Signals: The Foundation of Reactivity

  Signals are the core of SolidJS’s reactivity system. They are essentially wrappers around values that track their dependencies.

  • createSignal: Creating Signals

    To create a Signal, you use the createSignal function:

    “`typescript
    import { createSignal } from ‘solid-js’;

    const [count, setCount] = createSignal(0); // Initial value is 0
    “`

    createSignal returns a tuple (an array with a fixed number of elements) containing two functions:

    1. Getter: count() – A function that returns the current value of the Signal. Note that you call the getter function to access the value.
    2. Setter: setCount(newValue) – A function that updates the value of the Signal.

  • Accessing and Updating Signals

    “`typescript
    console.log(count()); // Output: 0

    setCount(1);
    console.log(count()); // Output: 1

    setCount(prevCount => prevCount + 1); // Functional update (recommended for derived values)
    console.log(count()); // Output: 2
    “`

    Notice the functional update form: setCount(prevCount => prevCount + 1). This is the preferred way to update a Signal when the new value depends on the previous value. It ensures that you’re always working with the most up-to-date value, even in asynchronous scenarios.

  • Understanding Signal Updates and Tracking

    The magic of Signals lies in their automatic dependency tracking. When you use a Signal’s getter inside a reactive context (like a component’s JSX or a createEffect), SolidJS automatically tracks that dependency. When the Signal’s value changes, SolidJS knows exactly which parts of the UI need to be re-rendered, and it updates only those parts.

• Effects: Side Effects and Automatic Dependency Tracking

  Effects are functions that run in response to changes in Signals. They’re used for performing side effects, such as updating the DOM directly, fetching data, or setting up timers.

  • createEffect: Creating Effects

    “`typescript
    import { createSignal, createEffect } from ‘solid-js’;

    const [name, setName] = createSignal(‘SolidJS’);

    createEffect(() => {
    console.log(‘The name is:’, name()); // Accessing the Signal’s value
    });

    setName(‘React’); // This will trigger the effect
    “`

    The function passed to createEffect will run:

    1. Initially: When the effect is first created.
    2. Whenever a tracked Signal changes: If any Signals accessed within the effect function change, the effect will re-run.

    In the example above, the console.log statement will run initially, printing “The name is: SolidJS”. When setName('React') is called, the name Signal changes, and the effect will re-run, printing “The name is: React”.

  • Cleanup Functions: Managing Resources
    Effects can optionally return a cleanup function. This function will be called:

    1. Before the effect re-runs: If the effect is about to run again due to a Signal change.
    2. When the component is unmounted: When the component that contains the effect is removed from the DOM.

    Cleanup functions are crucial for preventing memory leaks and managing resources like timers or event listeners.

    “`typescript
    createEffect(() => {
    const timerId = setInterval(() => {
    console.log(“tick”);
    }, 1000);

    // Cleanup function:
    return () => {
        clearInterval(timerId);
        console.log("Timer cleared");
    };
    

    });

    ``
In this case, the cleanup function clears the interval, ensuring theconsole.log(“tick”)` won’t continue indefinitely.

  • on: Explicit Dependency Tracking
    The on helper function allows creating effects that react to specific signal changes and optionally receive their previous values.

    “`typescript

    import { createSignal, createEffect, on } from ‘solid-js’;

    const [a, setA] = createSignal(0);
    const [b, setB] = createSignal(0);

    createEffect(on(a, (a, prevA) => {
    console.log(“a changed from”, prevA, “to”, a);
    }));

    createEffect(on([a, b], ([a, b], [prevA, prevB]) => {
    console.log(‘Value of a:’, a, ‘previous a:’, prevA);
    console.log(‘Value of b:’, b, ‘previous b:’, prevB);
    }));

    setA(1); // Triggers both effects
    setB(5); // Triggers the second effect
    setA(2); // Triggers both effects
    ``ontakes 1 or more signals and a callback. It only executes the callback if one of the signals passed changes. It also passes the current and previous values of the signal(s). The return value ofoncan be passed directly intocreateEffect`.

  • onMount: Lifecycle Hook (Equivalent to React’s useEffect with [])

  onMount is a convenience function that runs a callback only once when the component is mounted (inserted into the DOM). It’s equivalent to React’s useEffect with an empty dependency array ([]).
  “`typescript
  import { onMount } from ‘solid-js’;

  onMount(() => {
      console.log('Component mounted!');
      // Perform initialization logic here, e.g., fetching data
  });
  

  “`

  • onCleanup: Lifecycle Hook (Equivalent to React’s cleanup function in useEffect)

  onCleanup registers a callback that runs when the component is unmounted (removed from the DOM). It’s equivalent to the cleanup function returned by React’s useEffect.

  ```typescript
   import { onCleanup } from 'solid-js';
  
   onCleanup(() => {
       console.log('Component unmounted!');
       // Clean up resources, e.g., event listeners, timers
   });
  
  ```
  You can use multiple `onCleanup` calls in the same component.
  

• Components: Building Reusable UI Elements

  Components are the building blocks of SolidJS applications. They encapsulate UI logic and rendering, making your code modular and reusable.

  • Functional Components

    SolidJS uses functional components, similar to modern React. A component is simply a function that returns JSX.

    “`typescript
    import { createSignal } from ‘solid-js’;

    function Counter() {
    const [count, setCount] = createSignal(0);

    return (

    Count: {count()}

    setCount(count() + 1)}>Increment

    );
    }
    “`

  • JSX: Writing HTML-like Syntax in JavaScript

    JSX is a syntax extension to JavaScript that allows you to write HTML-like code within your JavaScript files. SolidJS uses JSX to define the structure of your UI. The JSX is compiled into highly optimized JavaScript code that directly manipulates the DOM.

  • Props: Passing Data to Components

    Props (short for “properties”) are how you pass data from a parent component to a child component. Props are passed as attributes to the component in JSX.

    “`typescript
    function Greeting(props: { name: string }) {
    return

    Hello, {props.name}!

    ;
    }

    function App() {
    return ;
    }
    ``
In this example, theAppcomponent passes thenameprop with the value "World" to theGreetingcomponent. TheGreetingcomponent receives this value asprops.name. Notice the TypeScript type annotation{ name: string }for theprops` object, which provides type safety.

  • Children: Composing Components
    Components can contain other components as children. This allows composing complex UIs from smaller, reusable pieces. The children are available via the props.children property.

    “`typescript
    function Card(props: { title: string; children: JSX.Element }) {
    return (

    {props.title}

    {props.children}

    );
    }

    function App() {
    return (
    

    This is the content of the card.

    Click Me
    
    );
    }
    ``
Here, theAppcomponent renders aCardcomponent. The content inside thetags (the

    and) are passed asprops.childrento theCard` component.

4. Essential SolidJS Features

Let’s explore some of the essential features that SolidJS provides for building dynamic and interactive UIs.

• Control Flow: Conditional Rendering and Lists

  SolidJS offers several built-in components for controlling the flow of rendering, allowing you to conditionally show or hide elements and render lists of data.

  • Show: Conditional Rendering

    The Show component conditionally renders its children based on a condition.

    “`typescript
    import { Show, createSignal } from ‘solid-js’;

    function MyComponent() {
    const [isLoggedIn, setIsLoggedIn] = createSignal(false);

    return (

    Welcome, user!

    
    

    Please log in.

    
    setIsLoggedIn(!isLoggedIn())}>
    Toggle Login
    

    );
    }
    ``
Thewhenprop takes a boolean value (or a function that returns a boolean). Ifwhenistrue, the children ofShoware rendered; otherwise, nothing is rendered (or, optionally, a fallback can be provided).Showalso supports an optionalfallbackprop, which is rendered when thewhencondition isfalse`.

    typescript
<Show when={isLoggedIn()} fallback={<p>Please log in.</p>}>
<p>Welcome, user!</p>
</Show>

  • For: Rendering Lists

    The For component is used to render a list of items.

    “`typescript
    import { For, createSignal } from ‘solid-js’;

    function MyListComponent() {
    const [items, setItems] = createSignal([‘apple’, ‘banana’, ‘orange’]);

    return (

    
    {(item) =>
    • {item}

    }
    

    );
    }
    ``
Theeachprop takes an array (or a function that returns an array, typically a Signal). The child ofFor` is a function that receives each item in the array as an argument and returns JSX to be rendered for that item.

  • Index: Rendering Lists with Index Access

    The Index component is similar to For, but it provides the index of each item in the array as well as the item itself.
    “`typescript
    import { Index, createSignal } from ‘solid-js’;

    function MyIndexedListComponent() {
    const [items, setItems] = createSignal([‘apple’, ‘banana’, ‘orange’]);

      return (
          <ul>
              <Index each={items()}>
                  {(item, index) => (
                      <li>
                          {index()}: {item()}
                      </li>
                  )}
              </Index>
          </ul>
      );
    

    }
    ``
Note thatitemandindexare *signals* within theIndex` component’s child function. This is important because it means changes to the list will only re-render the affected list items, maintaining performance even with large lists.

  • Switch and Match: Pattern Matching
    The Switch and Match components allow you to render different content based on the value of a signal, similar to a switch statement in JavaScript.

    “`typescript
    import { Switch, Match, createSignal } from “solid-js”;

    function MyComponent() {
    const [selection, setSelection] = createSignal(“home”);
    return (
    Not Found\