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