track • tldraw Docs

Returns a tracked version of the given component. Any signals whose values are read while the component renders will be tracked. If any of the tracked signals change later it will cause the component to re-render.

This also wraps the component in a React.memo() call, so it will only re-render if the props change.

function track<T extends FunctionComponent<any>>(
  baseComponent: T
): React.NamedExoticComponent<React.ComponentProps<T>>

Example

const Counter = track(function Counter(props: CounterProps) {
  const count = useAtom('count', 0)
  const increment = useCallback(() => count.set(count.get() + 1), [count])
  return <button onClick={increment}>{count.get()}</button>
})

Parameters

Name	Description
`baseComponent`	`T` The base component to track.

Returns

React.NamedExoticComponent<React.ComponentProps<T>>