Batch recursive (nested) updates

[crabvk]

I have a tree data model where each node has a boolean state, i.e. expanded. So, I'd define it like this:

interface TreeNode {
  expanded: Atom<boolean>
  children: TreeNode[]
}

(Don't know the actual type of value atom function returns, so just using a generic pseudo Atom type).
Now I want to define expandAll function that would take a root node and set all the nested node states to true:

function expandAll(parentNode: TreeNode) {
  for (const node of parentNode.children) {
    expandAll(node)
  }
  parentNode.expanded.set(true)
}

How to batch such updates? I don't want my TreeView component to re-render until all nodes expanded.

[euaaaio]

It depends on rendering implementation and optimizations of your framework.
For instance, if you will use Vue useStore, Nano Stores will trigger updates one by one, but Vue will merge them into one rerender.

So the best practice is to set new value for entire store once, instead of changing children items one by one.

[ai]

The best way is to batch on UI framework side. React, Vue, Svelte do it.

[crabvk]

I'm using React.
The dev (collaborator) of preactjs/signals says React batching is not reliable (has no guarantee on how and when React will batch state updates)

[ai]

I had no issues with React batching.

In Preact talk discussion I don't see a wrong output in the example, only an unnecessary render which is not a big problem.