Solid JS

Solid Store provides primitives for handling deeply nested reactive structures using Proxies. It allows you to create complex state objects where updates to nested properties trigger fine-grained reactivity.

Core Primitives

• createStore: The primary way to create a reactive, nested state object.
• createMutable: An alternative primitive for creating dynamic nested reactive structures.

Helper Methods

To augment the behavior of the store setter, you can use:

• produce: Allows for localized mutation (writing code that looks like direct mutation) within a setter.
• reconcile: Used for data diffing to update a store to match a new object while preserving reactivity.

For detailed API documentation, visit the official SolidJS website.

import { createStore } from "solid-js/store";

const [store, setStore] = createStore({
  user: {
    firstName: "John",
    lastName: "Smith"
  }
});

// update store.user.firstName
setStore("user", "firstName", "Will");

When using HyperScript instead of JSX, you must manually handle reactivity for expressions, props, and spreads. If you do not wrap these in functions, they will be evaluated once at creation time and will not update when the underlying signals change.

1. Reactive Expressions

Wrap expressions in a function to ensure they are tracked as reactive getters.

// Instead of: h("div", { id: props.id }, props.name)
// Use:
h("div", { id: () => props.id }, () => props.name)

2. Merging Props

To maintain reactivity when spreading props, use the mergeProps helper from solid-js.

import { mergeProps } from "solid-js";
import h from "solid-js/h";

// Instead of: h("div", { class: selectedClass(), ...props })
// Use:
h("div", mergeProps({ class: selectedClass }, props));

3. Component Events and Render Props

Solid's HyperScript automatically wraps functions passed to component props (that have no arguments) in getters. To prevent unexpected behavior with events or render props (like in <For>), provide an explicit argument to the function.

// Good: Explicit event argument
h(Button, { onClick: (e) => console.log("Hi") });

// Bad: No arguments might be wrapped incorrectly
h(Button, { onClick: () => console.log("Hi") });

import { mergeProps } from "solid-js";
import h from "solid-js/h";

// Reactive expression and merged props example
h("div", mergeProps({ class: selectedClass }, props), () => firstName() + lastName());

Solid SSR supports four primary rendering strategies depending on when data is queried and how the HTML is delivered to the client:

1. Standard SSR (ssr): Data is queried on the client. Elements outside suspense boundaries are rendered on the server; everything depending on data is rendered client-side. Uses renderToString.
2. Streaming SSR (stream): Data is queried on the server at request time. The page is sent with placeholders that are replaced as the stream loads. Uses renderToStream.
3. Async SSR (async): Data is queried on the server at request time. All nodes are rendered on the server and hydrated on the client. Data is serialized and sent with the page to avoid loading states. Uses renderToStringAsync.
4. Static Site Generation (ssg): Data is queried on the server at build-time. This follows the same hydration pattern as async but removes real-time rendering overhead. Uses renderToStringAsync.

Unlike Virtual DOM frameworks, SolidJS compiles templates to real DOM nodes and updates them using fine-grained reactions.

Key Concepts:

• Components run once: A component is just a regular JavaScript function that runs once to set up your view. It does not re-run on every state change.
• Fine-grained updates: When state changes, only the specific code (the reactive dependency) that depends on that state re-runs. The rest of the component remains untouched.
• Reactive Primitives: You use primitives like createSignal to declare state. Accessing these signals inside a template or an effect automatically creates a subscription.

Example: Counter Component

import { createSignal } from "solid-js";
import { render } from "solid-js/web";

function Counter() {
  // createSignal returns an accessor (count) and a setter (setCount)
  const [count, setCount] = createSignal(0);
  
  // Derived state is created by wrapping an expression in a function
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Increment: {doubleCount()}
    </button>
  );
}

render(Counter, document.getElementById("app")!);

In this example, clicking the button updates the signal, which triggers only the text node inside the button to update. The Counter function itself does not execute again.

The solid-js/html submodule provides an html tagged template literal method. This allows you to use Solid in environments without a compilation step (non-JSX environments) as a replacement for JSX.

Key syntax rules:

• Use ${} to escape into JavaScript expressions.
• Close components using the <//> syntax.
• Components are instantiated using <${ComponentName} ... />.
• Attributes can be spread using ...${props}.
• Multiple top-level elements are supported without needing a Fragment component.

import { render } from "solid-js/web";
import html from "solid-js/html";
import { createSignal } from "solid-js";

function Button(props) {
  return html`<button class="btn-primary" ...${props} />`;
}

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = (e) => setCount((c) => c + 1);

  return html`<${Button} type="button" onClick=${increment}>${count}<//>`;
}

render(Counter, document.getElementById("app"));