Reactive utilities

untrack

untrack executes a function without collecting dependencies from the current reactive scope.

Import

import { untrack } from "solid-js";

Type

function untrack<T>(fn: () => T): T;

Parameters

`fn`

Type: () => T
Required: Yes

Function executed outside the current tracking context.

Return value

Type: T

Returns the value produced by fn unchanged.

Behavior

untrack only affects reads inside the provided function. Signals read there do not become dependencies of the surrounding computation.
untrack does not create or restore an owner.

Examples

Read part of an effect without tracking

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

export function Component(props) {
  createEffect(() => {
    console.log(
      props.id,
      untrack(() => props.label)
    );
  });

  return <div>{props.id}</div>;
}

Avoid tracking part of an effect

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

function Example() {
  const [count, setCount] = createSignal(0);
  const [label] = createSignal("count");

  createEffect(() => {
    console.log(
      untrack(() => label()),
      count()
    );
  });

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

Notes

Default and initial prop values can be read directly when initializing a signal. This pattern commonly appears with names such as initialName and defaultName.

import { createSignal } from "solid-js";

export function Component(props) {
  const [name, setName] = createSignal(props.initialName);

  return <div>{name()}</div>;
}

import { createSignal } from "solid-js";

export function Component(props) {
  const [name, setName] = createSignal(props.defaultName);

  return <div>{name()}</div>;
}

Report an issue with this page