createEffect

Creates a reactive effect that automatically re-executes when its dependencies change.

Signature

function createEffect(fn: Subscriber): Dispose;

Parameters

• fn: Subscriber - A function to execute. Can optionally return a cleanup function.

Returns

• Dispose - A function to manually detach the effect from its dependencies

Type Definition

type Subscriber = () => void;
type Cleanup = () => void;
type Dispose = () => void;

Example

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

createEffect(() => {
  console.log("Count is:", count());
});

// Effect with cleanup
createEffect(() => {
  const value = count();
  console.log("Count is:", value);

  // Return cleanup function
  return () => {
    console.log("Count was:", value);
  };
});

// Effect with dispose
const disposeEffect = createEffect(() => {
  const value = count();

  return () => {
    console.log("Count was:", value);
  };
});

setCount(21); // Logs: Count was 0, Count is 21
disposeEffect(); // Log: Count is 21
setCount(42); // Nothing...

Advanced Usage

Idioms and Patterns: Reactive Patterns

Effect with conditional dependencies:

const [isAuthenticated, setIsAuthenticated] = createSignal(false);
const [user, setUser] = createSignal<User | null>(null);

createEffect(() => {
  if (isAuthenticated()) {
    fetchUserData().then((data) => {
      setUser(data);
    });

    return () => {
      setUser(null);
    };
  }
});

Effect for DOM manipulation:

const [title, setTitle] = createSignal("Hello World!");

createEffect(() => {
  document.title = title();
});

Effect with timer:

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

createEffect(() => {
  const timer = setInterval(() => {
    console.log("Count:", count());
  }, 1000);

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

Behavior

• Automatically tracks all signals accessed within the effect function

• Re-executes whenever any tracked signal changes

• Cleanup functions are called before the effect re-runs or when the effect is disposed

• Effects run immediately when created

• Side effects like DOM manipulation, API calls, or logging should be done in effects

Best Practices

• Use effects for side effects, not for computing values (use createComputed instead)

• Always clean up resources like intervals, subscriptions, or event listeners

• Keep effects focused on a single responsibility

• Avoid infinite loops by not updating signals that the effect depends on