Basic reactivity

createEffect

The createEffect primitive creates a reactive computation. It automatically tracks reactive values, such as signals, accessed within the provided function. This function will re-run whenever any of its dependencies change.

Execution Timing

Initial Run

The initial run of effects is scheduled to occur after the current rendering phase completes.
It runs after all synchronous code in a component has finished and DOM elements have been created, but before the browser paints them on the screen.
Refs are set before the first run, even though DOM nodes may not yet be attached to the main document tree. This is relevant when using the children helper.

Subsequent Runs

After the initial run, the effect re-runs whenever any tracked dependency changes.
When multiple dependencies change within the same batch, the effect runs once per batch.
The order of runs among multiple effects is not guaranteed.
Effects always run after all pure computations (such as memos) within the same update cycle.

Server-Side Rendering

Effects never run during SSR.
Effects also do not run during the initial client hydration.

Import

import { createEffect } from "solid-js";

Type

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

Parameters

`fn`

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

A function to be executed as the effect.

It receives the value returned from the previous run, or the initial value during the first run. The value returned by fn is passed to the next run.

`value`

Type: Init
Required: No

The initial value passed to fn during its first run.

`options`

Type: { name?: string }
Required: No

An optional configuration object with the following properties:

`name`

Type: string
Required: No

A name for the effect, which can be useful for identification in debugging tools like the Solid Debugger.

Return value

createEffect does not return a value.

Examples

Basic Usage

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

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

  // Every time count changes, this effect re-runs.
  createEffect(() => {
    console.log("Count incremented! New value: ", count());
  });

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
    </div>
  );
}

Execution Timing

import { createSignal, createEffect, createRenderEffect } from "solid-js";

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

  // This is part of the component's synchronous execution.
  console.log("Hello from counter");

  // This effect is scheduled to run after the initial render is complete.
  createEffect(() => {
    console.log("Effect:", count());
  });

  // By contrast, a render effect runs synchronously during the render phase.
  createRenderEffect(() => {
    console.log("Render effect:", count());
  });

  // Setting a signal during the render phase re-runs render effects, but not effects, which are
  // still scheduled.
  setCount(1);

  // A microtask is scheduled to run after the current synchronous code (the render phase) finishes.
  queueMicrotask(() => {
    // Now that rendering is complete, signal updates will trigger effects immediately.
    setCount(2);
  });
}

// Output:
// Hello from counter
// Render effect: 0
// Render effect: 1
// Effect: 1
// Render effect: 2
// Effect: 2

Report an issue with this page