Reactive utilities

untrack

Ignores tracking any of the dependencies in the executing code block and returns the value.

Solid 2.0 — Importance for strict top-level reads

In Solid 2.0, reading signals or reactive props at the top level of a component body warns in dev unless the read is inside a reactive scope (createMemo, createEffect, JSX) or explicitly wrapped in untrack. Use untrack for intentional one-time reads:

function Title(props) {
  const t = untrack(() => props.title) // intentional one-time read — no warn
  return <h1>{t}</h1>
}

import { untrack } from "solid-js"

export function Component(props) {
    const value = untrack(() => props.value)

    return <div>{value}</div>
}

Initial and Default Values

It is not necessary to manually untrack values that are suppose to serve as a default or initial value to a signal. Even with the linter configured to enforce tracking, the linter will accept it when a prop is prefixed with default or initial as it is a common pattern to use them as such.

// component.tsx
import { createSignal } from "solid-js"

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

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

// component.tsx
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