useQuickReactor • tldraw Docs

A React hook that runs side effects immediately in response to signal changes, without throttling. Unlike useReactor which batches updates to animation frames, useQuickReactor executes the effect function immediately when dependencies change, making it ideal for critical updates that cannot wait.

The effect runs immediately when the component mounts and whenever tracked signals change. Updates are not throttled, so the effect executes synchronously on every change.

function useQuickReactor(name: string, reactFn: () => void, deps?: any[]): void

Example

function DataSynchronizer() {
  const criticalData = useAtom('criticalData', null)

  useQuickReactor(
    'sync-data',
    () => {
      const data = criticalData.get()
      if (data) {
        // Send immediately - don't wait for next frame
        sendToServer(data)
      }
    },
    [criticalData]
  )

  return <div>Sync status updated</div>
}

function CursorUpdater({ editor }) {
  useQuickReactor(
    'update-cursor',
    () => {
      const cursor = editor.getInstanceState().cursor
      document.body.style.cursor = cursor.type
    },
    []
  )
}

Parameters

Name	Description
`name`	`string` A descriptive name for the reactor, used for debugging and performance profiling
`reactFn`	`() => void` The effect function to execute when signals change. Should not return a value.
`deps`	`any[]` Optional dependency array that controls when the reactor is recreated. Works like useEffect deps.

Returns

void