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;