useStateTracking • tldraw Docs

Wraps some synchronous react render logic in a reactive tracking context.

This allows you to use reactive values transparently.

See the track component wrapper, which uses this under the hood.

function useStateTracking<T>(name: string, render: () => T, deps?: unknown[]): T

Example

function MyComponent() {
  return useStateTracking('MyComponent', () => {
    const editor = useEditor()
    return <div>Num shapes: {editor.getCurrentPageShapes().length}</div>
  })
}

Parameters

Name	Description
`name`	`string` A debug name for the reactive tracking context
`render`	`() => T` The render function that accesses reactive values
`deps`	`unknown[]` Optional dependency array to control when the tracking context is recreated

Returns

The result of calling the render function