Reference

Render Algorithm

Look up syntax, contracts, layouts, algorithms, and exact behavior.

Rendering is a recursive tree walk with special cases for primitives, arrays, intrinsic tags, and component nodes. The renderer emits escaped text for primitive children, serializes safe HTML attributes for ordinary props, converts style objects into CSS declarations, and diverts event props into the callback registry.

render(node):
  if node is null/false: return ""
  if node is string/number: return escape(node)
  if node is array: return concat(render(child))
  if node is component:
    instance = resolve or create component instance
    return render(instance.render())
  if node is intrinsic element:
    id = allocate element id
    attrs = serialize props except events
    callbacks = register event props under id
    return "<tag attrs callbacks>" + render(children) + "</tag>"

Render walk. The renderer is deterministic when element identity allocation and callback registration order are deterministic.

T_1=T_2 \land K_0=\varnothing \Rightarrow render(T_1)=render(T_2)

Render determinism. The same component tree and empty callback registry produce the same HTML shell.

A rerender clears or replaces the callback table for the active page before walking the tree again. That prevents stale event identities from surviving after the DOM shape changes.

Render Algorithm

Continue exploring