useValue • tldraw Docs

Extracts the value from a signal and subscribes to it.

Note that you do not need to use this hook if you are wrapping the component with track

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

Example

const Counter: React.FC = () => {
  const $count = useAtom('count', 0)
  const increment = useCallback(() => $count.set($count.get() + 1), [count])
  const currentCount = useValue($count)
  return <button onClick={increment}>{currentCount}</button>
}

You can also pass a function to compute the value and it will be memoized as in useComputed:

type GreeterProps = {
  firstName: Signal<string>
  lastName: Signal<string>
}

const Greeter = track(function Greeter({ firstName, lastName }: GreeterProps) {
  const fullName = useValue(
    'fullName',
    () => `${firstName.get()} ${lastName.get()}`,
    [firstName, lastName]
  )
  return <div>Hello {fullName}!</div>
})

Parameters

Name	Description
`name`	`string`
`fn`	`() => Value`
`deps`	`unknown[]`

Returns

Value