#Secondary Primitives

#useComputed

Creates a reactive computation that runs immediately and re-executes when dependencies change. The function receives its previous return value and is designed for side effects that update reactive state. Unlike useMemo, it doesn't return a value, and unlike useEffect, it runs synchronously during rendering, which may cause excessive updates.

Type:

useComputed<T>(fn: Callback<T>, value?: T): void

Parameters:

• fn: A function that computes the derived value. It receives the previous computed value as an argument
• value: Optional initial value

Example:

const [count, setCount] = useSignal(10)

useComputed(() => {
  console.log(`Computed double: ${count() * 2}`)
})

#useRenderEffect

Creates a render effect that runs synchronously during rendering, before DOM updates complete. Unlike useEffect, it executes immediately when DOM elements may not be ready and refs aren't set. Reactive updates are batched automatically.

Type:

useRenderEffect<T>(fn: Callback<T>, value?: T): void

Parameters:

• fn: A function that executes synchronously during rendering, receiving the previous return value
• value: Optional initial value

Example:

function TextInput() {
  const [text, setText] = useSignal('')

  useRenderEffect(() => {
    console.log('Text changed:', text())
  })

  return <input value={text()} onInput={(e) => setText(e.target.value)} />
}

#useSelector

Creates an optimized conditional selector that efficiently manages subscriptions by only notifying subscribers when their specific key starts or stops matching the source value. This optimization drastically improves update performance by minimizing the number of subscribers that need to be notified when the source value changes.

Type:

useSelector<T, U = T>(source: Getter<T>, fn?: Equals<T, U>): (key: U) => boolean

Parameters:

• source: A getter function that returns the source value to compare against keys
• fn: Optional custom equality function that receives a key and the source value, returning whether they should be treated as equal. Defaults to strict equality (===)

Returns: A function that takes a key and returns whether it matches the current source value

Example:

function SelectableItemList() {
  const [selectedIndex, setSelectedIndex] = useSignal(0)
  const items = useSignal([0, 1, 2])
  const isActive = useSelector(selectedIndex)

  return (
    <For each={items()}>
      {(index) => (
        <div
          class={{ active: isActive(index) }}
          onClick={() => setSelectedIndex(index)}
        >
          Item {index + 1}
        </div>
      )}
    </For>
  )
}