Effects

Effects are functions that are triggered when the signals they depend on change. They play a crucial role in managing side effects, which are actions that occur outside of the application's scope, such as DOM manipulations, data fetching, and subscriptions.

Using an effect

An effect is created using the createEffect function. In Solid 2.0, this function takes two callbacks:

1. A compute function — runs in the reactive tracking phase. It should only read reactive values and return a value.
2. An apply function — receives the computed value and performs side effects. It can return a cleanup function.

import { createEffect } from "solid-js";

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

createEffect(
  () => count(),           // compute: track dependencies, return value
  (value) => {             // apply: run side effects with the tracked value
    console.log(value);
  }
);

In this example, the compute function tracks count and returns its value. When count changes, the apply function runs with the new value and logs it to the console.

Managing dependencies

Dependencies are determined by the compute function. Any signals read inside the compute function are automatically tracked. The apply function does not track dependencies — it is purely for side effects.

The compute function runs whenever any of its tracked dependencies change. The apply function then receives the new computed value.

createEffect(
  () => [count(), message()],   // track multiple dependencies
  ([countVal, messageVal]) => {
    console.log(countVal, messageVal);
  }
);

When either count or message changes, the compute function re-runs, and the apply function receives the updated array.

Cleanup

In Solid 2.0, cleanup is handled by returning a function from the apply callback. This replaces the pattern of calling onCleanup inside effects.

createEffect(
  () => name(),
  (value) => {
    const id = setInterval(() => console.log(value), 1000);

    // Return a cleanup function — called before the next apply run or on disposal
    return () => clearInterval(id);
  }
);

Effects should not write signals

// ❌ warns: writing a signal inside an effect
createEffect(
  () => count(),
  (value) => {
    setDoubled(value * 2); // this will warn
  }
);

// ✅ use createMemo for derived values
const doubled = createMemo(() => count() * 2);

// ✅ write signals in event handlers
button.onclick = () => setCount((c) => c + 1);

Lifecycle functions

onSettled

In situations where you want to run a side effect once after the component is settled, use onSettled:

import { onSettled } from "solid-js";

function Component() {
  const [data, setData] = createSignal(null);

  onSettled(async () => {
    // runs once when the component is settled
    const fetchedData = await fetch("https://example.com/data");
    setData(fetchedData);

    // can return cleanup
    return () => {
      // cleanup when component is disposed
    };
  });

  return <div>...</div>;
}

onCleanup

onCleanup is used for cleaning up a task when it is no longer needed. onCleanup will run whenever the component unmounts or the enclosing computation re-runs, removing any subscriptions.

import { onCleanup } from "solid-js";

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

  const timer = setInterval(() => {
    setCount((prev) => prev + 1);
  }, 1000);

  onCleanup(() => {
    clearInterval(timer);
  });

  return <div>Count: {count()}</div>;
}

onCleanup is best used inside computations (createMemo, the setup phase of components). For effects, prefer the return-based cleanup from the apply function.

createTrackedEffect

For special cases where you need a single-callback effect (similar to the 1.x pattern), createTrackedEffect is available. However, be aware that it may re-run in async situations and is not the default.

import { createTrackedEffect } from "solid-js";

createTrackedEffect(() => {
  console.log(count()); // single-callback form — tracks and runs side effects
});

Prefer the split two-phase createEffect for most use cases.