Secondary primitives

createSelector

Edit this page

Replacement: createProjection

createProjection creates a mutable derived store (a projection). The derive function receives a draft that you can mutate to define the projected state. This provides the same optimized selection pattern that createSelector offered, but in a more general and composable form.

import { createSignal } from "solid-js"
import { createProjection } from "solid-js/store"


const [selectedId, setSelectedId] = createSignal(0)


// createProjection receives a draft you can mutate
const selected = createProjection((draft) => {
  // clear the previously selected item
  for (const key in draft) {
    draft[key] = false
  }
  // mark the currently selected item
  draft[selectedId()] = true
})

Migrating selection patterns

// 1.x — createSelector
import { createSelector } from "solid-js"


const [selectedId, setSelectedId] = createSignal()
const isSelected = createSelector(selectedId)


<For each={list()}>
  {(item) => <li classList={{ active: isSelected(item.id) }}>{item.name}</li>}
</For>


// 2.0 — createProjection
import { createProjection } from "solid-js/store"


const [selectedId, setSelectedId] = createSignal()
const selected = createProjection((draft) => {
  for (const key in draft) {
    draft[key] = false
  }
  draft[selectedId()] = true
})


<For each={list()}>
  {(item) => <li classList={{ active: selected[item.id] }}>{item.name}</li>}
</For>

Using createStore(fn) for derived stores

For simpler cases where you want to derive store state from signals, you can also use createStore(fn):

// 2.0 — createStore(fn) for derived state
import { createStore } from "solid-js/store"


const [selectedId, setSelectedId] = createSignal(0)
const [state] = createStore(() => ({
  selected: selectedId(),
}))

1.x API reference (removed)

import { createSelector } from "solid-js"


function createSelector<T, U>(
  source: () => T,
  fn?: (a: U, b: T) => boolean
): (key: U) => boolean

createSelector created a parameterized derived boolean signal selector(key) that indicated whether key was equal to the current value of the source signal. These signals were optimized to notify each subscriber only when their key started or stopped matching the reactive source value (instead of every time source changed), reducing from n updates to 2 updates.

Report an issue with this page