createComputed

createComputed creates an immediate reactive computation. It runs synchronously in the current execution context when created, then re-runs whenever its tracked dependencies change.

Import

import { createComputed } from "solid-js";

Type

function createComputed<Next>(
  fn: EffectFunction<undefined | NoInfer<Next>, Next>
): void;
function createComputed<Next, Init = Next>(
  fn: EffectFunction<Init | Next, Next>,
  value: Init,
  options?: { name?: string }
): void;
function createComputed<Next, Init>(
  fn: EffectFunction<Init | Next, Next>,
  value?: Init,
  options?: { name?: string }
): void;

Parameters

fn

• Type: EffectFunction<undefined | NoInfer<Next>, Next> | EffectFunction<Init | Next, Next>
• Required: Yes

The function that performs the computation. It executes immediately to track dependencies and re-runs whenever a dependency changes.

It receives the value returned from the previous execution as its argument. On the initial execution, it receives the value parameter (if provided) or undefined.

value

• Type: Init
• Required: No

The initial value passed to fn on its first execution.

options

• Type: { name?: string }
• Required: No

An optional configuration object with the following properties:

name

• Type: string
• Required: No

A debug name for the computation. It is used for identification in debugging tools like the Solid Debugger.

Return value

• Type: void

createComputed does not return a value.

Behavior

• createComputed runs immediately when it is created.
• It tracks reactive reads inside fn and re-runs synchronously when those dependencies change.
• Unlike createMemo, it does not expose a derived accessor.
• createComputed is primarily used to build reactive primitives. Application code that derives state usually wants createMemo instead.

Examples

Build a writable derived signal

import { createComputed, createSignal } from "solid-js";

function createWritableMemo<T>(fn: () => T) {
  const [value, setValue] = createSignal(fn());

  createComputed(() => {
    setValue(fn());
  });

  return value;
}

function Counter() {
  const [count, setCount] = createSignal(1);
  const double = createWritableMemo(() => count() * 2);

  return (
    <>
      <p>{double()}</p>
      <button onClick={() => setCount((value) => value + 1)}>Increment</button>
    </>
  );
}

Related

• createMemo
• createRenderEffect