Secondary primitives

createComputed

Edit this page

Migration

Deriving state — use createMemo

If you used createComputed to derive a value from other signals, use createMemo instead:

// 1.x — createComputed to derive a value
const [count, setCount] = createSignal(0)
const [doubled, setDoubled] = createSignal(0)
createComputed(() => setDoubled(count() * 2))


// 2.0 — createMemo
const [count, setCount] = createSignal(0)
const doubled = createMemo(() => count() * 2)

Writable derived signals — use createSignal(fn)

If you used createComputed to set a signal from reactive data while also allowing manual writes, use createSignal(fn) to create a writable derived signal:

// 1.x — createComputed with a writable signal
const [count, setCount] = createSignal(0)
const [label, setLabel] = createSignal("")
createComputed(() => setLabel(`Count: ${count()}`))
// could also call setLabel("custom") elsewhere


// 2.0 — writable derived signal
const [count, setCount] = createSignal(0)
const [label, setLabel] = createSignal(() => `Count: ${count()}`)
// label() returns the derived value, but setLabel("custom") can override it

Derived stores — use createStore(fn)

If you used createComputed to synchronize store data, use createStore(fn):

// 1.x — createComputed updating a store
const [source] = createSignal({ name: "Alice", age: 30 })
const [state, setState] = createStore({ name: "", age: 0 })
createComputed(() => setState(source()))


// 2.0 — derived store
const [source] = createSignal({ name: "Alice", age: 30 })
const [state, setState] = createStore(() => source())

Side effects — use split createEffect

If you used createComputed to run side effects on reactive changes, use the split createEffect:

// 1.x — createComputed for side effects
createComputed(() => {
  console.log("value changed:", someSignal())
})


// 2.0 — split createEffect
createEffect(
  () => someSignal(),             // compute: track dependencies
  (value) => console.log("value changed:", value)  // apply: side effect
)

1.x API reference (removed)

import { createComputed } from "solid-js"


function createComputed<T>(fn: (v: T) => T, value?: T): void

createComputed created a new computation that immediately ran the given function in a tracking scope, automatically tracking its dependencies and rerunning whenever they changed. The function received the value returned from its last execution, or the optional second argument on the first call.

Report an issue with this page