Basic reactivity

createEffect

Edit this page

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

  • The initial execution of effects is scheduled to occur after the current rendering phase completes. It runs after all synchronous code in a component has executed and the DOM elements have been created, but before the browser renders them on the screen.

    As a result, refs are set before the effect runs for the first time, even though the DOM nodes may not be attached to the main document tree. This is particularly relevant when using the children function.

  • After the initial execution, effects will re-run whenever any of their dependencies change.

    When multiple dependencies are updated within the same batch, the effect will only run once.

  • The order in which effects run is not guaranteed.

  • Effects always run after any pure computations (such as memos) within the same update cycle.

  • Effects are not executed during Server-Side Rendering (SSR) or 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

The function to execute as the effect. It receives the value returned from the previous execution, or the initial value during its first run. The value returned by this function will be passed to the next execution.

value

  • Type: Init
  • Required: No

The initial value that is passed to fn during its first execution.

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

Related

Report an issue with this page