Render

The Render module exposes two primitives for synchronizing with the browser's render cycle: Render.afterCommit resumes once the runtime has applied the latest VDOM patch to the DOM. Render.afterPaint resumes after the prior state has been displayed to the user. Both are Effects you yield inside your own Commands or Subscriptions.

The runtime batches renders to requestAnimationFrame. A Command runs on the microtask queue right after the dispatching Message, which means a synchronous DOM read or write inside that Command sees the tree from before the latest model was patched in. Render.afterCommit is how you wait for the matching patch to apply.

Reach for Render.afterCommit when you need to read or measure an element that was just brought into existence (or moved, or had attributes changed) by the same Message. Custom focus, custom scroll restoration, IntersectionObserver setup inside a Subscription, getBoundingClientRect for layout work. The Dom helpers already gate themselves with this internally, so reach for Render.afterCommit directly when building your own.

Reach for Render.afterPaint when you need the browser to actually display the prior state before you change to the next one, typically for CSS transition orchestration. A single requestAnimationFrame commits the DOM but the pixels have not been painted yet. A second one resumes after that paint is visible, so the from-state is on screen and the to-state can transition smoothly to it.

import { Effect } from 'effect'
import { Command, Render } from 'foldkit'

const MeasurePanel = Command.define('MeasurePanel', MeasuredPanel)
const StartTransition = Command.define('StartTransition', StartedTransition)

const measurePanel = MeasurePanel(
  Effect.gen(function* () {
    yield* Render.afterCommit
    const element = document.getElementById('panel')
    const width =
      element instanceof HTMLElement ? element.getBoundingClientRect().width : 0
    return MeasuredPanel({ width })
  }),
)

const startTransition = StartTransition(
  Render.afterPaint.pipe(Effect.as(StartedTransition())),
)

The Render API reference lists every primitive with its signature and an inline example.