useValue • tldraw Docs

Creates a computed value with automatic dependency tracking and subscribes to changes.

This overload allows you to compute a value from one or more signals with automatic memoization. The computed function will only re-execute when its dependencies change, and the component will only re-render when the computed result changes.

function useValue<Value>(name: string, fn: () => Value, deps: unknown[]): Value

Example

import { atom } from '@tldraw/state'
import { useValue } from '@tldraw/state-react'

const firstName = atom('firstName', 'John')
const lastName = atom('lastName', 'Doe')

function UserGreeting() {
  const fullName = useValue(
    'fullName',
    () => {
      return `${firstName.get()} ${lastName.get()}`
    },
    [firstName, lastName]
  )

  return <div>Hello {fullName}!</div>
}

Parameters

Name	Description
`name`	`string` A descriptive name for debugging purposes
`fn`	`() => Value` Function that computes the value, should call `.get()` on any signals it depends on
`deps`	`unknown[]` Array of signals that the computed function depends on

Returns

Value

The computed value