Batch updates (besides Microtasks)

[romankoho]

I'm wondering if it would be a good idea to offer batch updates. let's say I run an update, then a heavy task taking multiple 100ms happens and then another update is made. what if I want to make the two updates at the same time (triggering only one rerender)? it would be nice to have some kind of transaction API.

another example: I'm updating nodes in a tree. the update of one node triggers all child nodes (recursively) to update as well. I think it could be interesting to notify react only once that updates need a re-render (especially in performance critical applications).

let me know what you think.

[dai-shi]

Check out https://github.com/valtiojs/valtio-reactive

However, it doesn't provide batch-capable useSnapshot. Are you interested in it?
One naive idea is to make subscribe optional.

const snap = useSnapshot(state, { subscribe: subscribeFromValtioReactive });

[romankoho]

Thanks for your answer :)

So as I understand, valtio-reactive covers exactly the use case I described.
Regarding batch-capable useSnapshot I don't really understand what you mean (sorry quite new to Valtio / State Management).

As said in my use case it would be beneficial that when multiple updates happen together only a single re-render is triggered.

[dai-shi]

As said in my use case it would be beneficial that when multiple updates happen together only a single re-render is triggered.

You mean to delay the re-render for 100ms, right? Because, if a single sync task takes 100ms, a microtask batching should work.

[romankoho]

yes, exactly

[dai-shi]

Hm, if the heavy task really takes 100ms, I don't think React will render before that. Or, are you talking about async tasks? That doesn't work even with valtio-reactive.

I wonder if you could create a small reproduction with stackblitz.

[romankoho]

thanks for your reply and the thoughts you put into it. I will try to come up with the scenario I have in mind. Could be my whole question is more about the architecture of my application in general than Vlatios API. but I'll get back to this post once I have something to show.

[romankoho]

hey @dai-shi,

I've crafted an example for my use case and some questions came up. I think it is still related to my original question because it deals with how several proxies can be updated efficiently and interact in general with each other.

This is the example:
https://stackblitz.com/edit/vitejs-vite-xu6qrahn?file=src%2FApp.tsx

Use case:
I have a data structure which can be represented as graph. I am using dagrejs/graphlib to build the graph. Every node in the graph can have some data attached to it. In my case the data is a proxified instance of my GraphNode class (see graphNode.ts). Check stageGraph.ts to see how I build up the graph.

Every GraphNode has a "state" property where I save a visual state (e.g. selected). In the methods select() and unselect() I traverse through the tree and update the state flag of every proxy. In the component "SelectedNodes" I render the number of selected nodes. Moreover, I count and display the number of re-renders. This leads to my first question(s):

1. How to track changes of several proxies? This is my current approach (see data/store.ts)

// proxy of all graph nodes
export const nodesProxy = proxy({
  nodes: stageGraph.getNodes(),
  revision: 0,
});

// hook to  track number of selected GraphNodes
export function useSelectedNodes() {
  const nodesSnap = useSnapshot(nodesProxy);

  let count = 0;
  for (const node of nodesSnap.nodes) {
    if (node.isSelected) {
      count++;
    }
  }
  return count;
}

2. Why is updating several proxies only leading to one re-render?
This behavior is great - I just don't understand why it is like this.
I assumed that microtasks only batch updates of the same proxy but apparently it batches concurrent updates to any valtio proxies? I am also wondering why batch (from valtio-reactive) isn't needed here (or does batch only make sense when updating one and the same proxy)?

Select a node in the tree view (in the app). This leads to all nodes in its subtree to be selected as well. The selected nodes component on the right side only re-renders once.

//components/TreeView/TreeNode.tsx

// here I trigger the recursive update of all graphNodes to update their state property
proxy.select({ recursive: true, reset: true });

it doesn't make a difference if I use batch (as also without batch only one re-render is triggered)
batch(() => {
    proxy.select({ recursive: true, reset: true });
  });

3. As I track selected nodes of the whole graph, would it be better to wrap the whole Graph instance (from dagrejs/graphlib) in a proxy, instead of just wrapping every GraphNode in a proxy?
With my current implementation I can track changes of (proxified) nodes only. For tracking added nodes and edges (so changes to the overall structure) I've implemented an observer pattern in my StageGraph class.

I would be happy to get some thoughts from you but nevermind if you think these questions are too specific to my use case.

thanks!

[romankoho]

@overthemike thanks for your answer :) That makes it a bit more clear.

So regarding question 1: as I understand my approach is valid / ok?

You understood correctly, I don't want to separate updates. Just out of curiosity and because I briefly looked at valtio-plugin: could you briefly describe or give a hint how to implement this (or is there a plugin which already does this?)

thanks!

[overthemike]

@romankoho If you're wanting to re-render whatever component is calling that hook anytime anything changes within the proxy call, then yes. Just be mindful of the re-renders and which components use it.

valtio-plugin itself actually does this. It does this so as to allow applying different functionality (or plugins) to different pieces of state. Internally, it has something called an "instance registry" that tags every proxy "instance" call with metadata that allows operation in an isolated context.

[romankoho]

anytime anything changes

are you sure about that? In useSelectedNodes I only access isSelected from the proxy. According to my observations, components using the useSelectedNodes only re-render if the isSelected flag of any proxy changes (not if any other property of any proxy changes)

and thanks for the explanation about valtio-plugin.

[overthemike]

You're right. I was being a bit too vague.
It'll re-render when:

• The nodes array structure changes (add/remove nodes)
• Any isSelected property changes on any node

If that's what you're after, you're all good!

[romankoho]

perfect, thanks for taking the time to explain this to me!