`addNodes` blocked by `setNodes`

[maliyshock]

What platform were you using when you found the bug?

• React Flow latest version (11 as well)

Live code example

https://codesandbox.io/p/sandbox/confident-bird-tqcwkz?file=%2Fsrc%2FApp.jsx%3A43%2C10

Describe the Bug

When you call first addNodes and immediately after setNodes the result of addNodes will be overwriten. It may create bugs, when you have multiple events in your app, which can call addNodes and setNodes simultaniously

Steps to reproduce the bug or issue

Go to https://codesandbox.io/p/sandbox/confident-bird-tqcwkz?file=%2Fsrc%2FApp.jsx%3A43%2C10

click on "click me" button (top left) Button onClick handler will call addNodes and setNodes

  const handleClick = () => {
    addNodes({
      id: "abc",
      position: { x: 10, y: 15 },
      data: { label: "Node abc" },
    });
    setNodes((prev) =>
      prev.map((nd) => {
        if (nd.id === "a") {
          return {
            ...nd,
            data: {
              ...nd.data,
              label: "aaa",
            },
          };
        }
        return nd;
      })
    );
  };

The label of the node would be changed, but no new node will appear.

Expected behavior

Methods such as addNodes and setNodes should not block the result of each other. For the analogy we have states in react. const [nodes, setNodes] = useState(someInitNodes)

When you call setNodes multiple time at the same moment, adding or changing things, all of the changes will be applied. Changes will not overwrite each other.

Having current behavior makes the result of the app unpredictable and create places for the bugs.

Screenshots or Videos

No response

Additional context

In my case i have this

And it is just one of the examples. Imagine a bigger project where you have a bunch of things connected to each other which can trigger multiple setNodes and addNodes simultaneously. Of course, I can put all of the changes into setNodes and not use addNodes at all... but this is not how it should be in the end. The methods of the app should not block each other. I actually kinda relate to onNodesChange because I find it useful. This is the reason why I want to use addNodes and deleteElements

UPD: I could not find a way to create PR, but it seems this should solve the issue... which i guess should fall because of function case, but i think you got the idea