useComputed • tldraw Docs

Creates a new computed signal and returns it. The computed signal will be created only once.

function useComputed<Value, Diff = unknown>(
  name: string,
  compute: () => Value,
  opts: ComputedOptions<Value, Diff>,
  deps: any[]
): Computed<Value>

Example

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

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

Parameters

Name	Description
`name`	`string`
`compute`	`() => Value`
`opts`	`ComputedOptions<Value, Diff>`
`deps`	`any[]`

Returns

Computed<Value>