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

T;

The result of calling the render function