HACKER Q&A
📣 brundolf

Why do VDOM implementations always use function calls instead of data?


Example from Mithril.js:

  m("main", [
    m("h1", {class: "title"}, "My first app"),
    m("button", "A button"),
  ])
React does the same (after the JSX is compiled), and I'm not aware of any that don't use function calls, vs just plain object data:

  {
    tag: "main",
    children: [
      { tag: "h1", attributes: { class: "title" }, children: [ "My first app" ] },
      { tag: "button", children: [ "A button" ] }
    ]
  }
Is it just for brevity, or is there some deeper reason I'm missing?

  👤 ojkelly Accepted Answer ✓
From memory it’s because it’s not evaluated in one go.

By using functions you can evaluate parts of the dom, which crucially means you can reevaluate parts of the dom.

Those functions also enable changing their output based on inputs, enabling data reactivity.

If you had to evaluate the whole tree each time, you’re doing a lot of unnecessary compute.

👤 jas-
You would think the native DOM parsing engine would be quicker than trying to add another layer of abstraction and parsing which would incur additional overhead