react • tldraw Docs

Starts a new effect scheduler, scheduling the effect immediately.

Returns a function that can be called to stop the scheduler.

function react(
  name: string,
  fn: (lastReactedEpoch: number) => any,
  options?: EffectSchedulerOptions
): () => void

Example

const color = atom('color', 'red')
const stop = react('set style', () => {
  divElem.style.color = color.get()
})
color.set('blue')
// divElem.style.color === 'blue'
stop()
color.set('green')
// divElem.style.color === 'blue'

Also useful in React applications for running effects outside of the render cycle.

useEffect(
  () =>
    react('set style', () => {
      divRef.current.style.color = color.get()
    }),
  []
)

Parameters

Name	Description
`name`	`string`
`fn`	`(lastReactedEpoch: number) => any`
`options`	`EffectSchedulerOptions`

Returns

() => void