Ask HN: Why do VDOM implementations always use function calls instead of data? | Hacker News Reader

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

6 pointsbrundolf3 comments

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?

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.

So that applies for custom components, but I'm just talking about the raw base-level elements. For these there's nothing meaningful to "re-evaluate" (or avoid re-evaluating), as far as I know.

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

Reply on news.ycombinator.com