Signals

Signals are the primary means of managing state in your Solid application. They provide a way to store and update values, and are the foundation of reactivity in Solid.

Signals can be used to represent any kind of state in your application, such as the current user, the current page, or the current theme. This can be any value, including primitive values such as strings and numbers, or complex values such as objects and arrays.

Creating a signal

You can create a signal by calling the createSignal function, which is imported from solid-js. This function takes an initial value as an argument, and returns a pair of functions: a getter function, and a setter function.

import { createSignal } from "solid-js";

const [count, setCount] = createSignal(0);
//       ^ getter  ^ setter

Accessing values

The getter function returned by createSignal is used to access the value of the signal. You call this function with no arguments to get the current value of the signal:

console.log(count()); // output: 0

Updating values

The setter function returned by createSignal is used to update the value of the signal. This function takes an argument that represents the new value of the signal:

setCount(count() + 1);

The setter function can also take a function that passes the previous value:

setCount((prevCount) => prevCount + 1);

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

setCount(1);
console.log(count()); // still 0 — update is queued

flush();
console.log(count()); // now 1

Reactivity

Signals are reactive, which means that they automatically update when their value changes. When a signal is called within a tracking scope, the signal adds the dependency to a list of subscribers. Once a signal's value changes, it notifies all of its dependencies of the change so they can re-evaluate their values and update accordingly.

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

  return (
    <div>
      <span>Count: {count()}</span> {/* Updates when `count` changes */}
      <button type="button" onClick={increment}>
        Increment
      </button>
    </div>
  );
}

Derived signals (function-form createSignal)

In Solid 2.0, createSignal can accept a function as its first argument instead of a static value. This creates a writable derived signal — sometimes called a "writable memo". The function is used to compute the signal's value reactively, and the setter can override it:

import { createSignal } from "solid-js";

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

// derived: automatically tracks `count` and doubles it
const [doubled] = createSignal(() => count() * 2);

console.log(doubled()); // 0

setCount(5);
// After flush, doubled() will be 10

This replaces many patterns that previously used createComputed for "write-back" derived values. For read-only derived values, prefer createMemo.

Writes under owned scope

// ❌ warns: writing from inside a memo
createMemo(() => setDoubled(count() * 2));

// ✅ derive instead of writing back
const doubled = createMemo(() => count() * 2);

const [ref, setRef] = createSignal(null, { pureWrite: true });

To learn more about how to use Signals in your application, visit our state management guide.