Flickering / z-fighting / re-rendering between canvas & nodes on click/drag, introduced in 11.10.4

[IanLondon]

Describe the Bug

When I upgraded react-flow in my project, I encountered a bug where dragging a node "flickers" between selecting the canvas versus selecting the node:

• while a node is being dragged, the mouse cursor image flickers between pointer and drag
• when attempting to drag a node, about half the time dragging a node will drag the canvas instead, so it take multiple attempts to drag a node
• similarly, it may take a few clicks to select a node because it seems to click "through" the node to the canvas half the time.

It feels like z-fighting: the node and the canvas seem to be competing for who is the target of the cursor. Though it's probably re-rendering during the mousedown on click and during the mousemove on drag.

I am using a custom node, I'm not sure what is relevant to include about it.

Versions I tested: does it have this flickering bug? These are the versions I tested in an attempt to narrow it down:

• 11.11.1 yes
• 11.10.4 yes! this is the breaking change
• 11.10.3 no
• 11.10.2 no
• 11.10.0 no
• 11.9.4 no
• 11.8.3 no

I'm guessing this may have been introduced by #3897 just from context clues?? Maybe the changes to useEffect are causing a re-render?

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use version 11.10.4+
2. Click to drag a custom node (All the custom nodes I've tried have this flickering behavior in 11.10.4+, they don't have any unusual parts: no input fields, etc, so I'm not sure what to note about the nodes I tested)
3. About half the time, the node will not be selected, and the canvas will be grabbed instead. When the node is grabbed, the cursor will flicker between grab and pointer icons

Downgrading to 11.10.3 fixes the issue.

Expected behavior

As a user, I expected the normal drag-and-drop behavior for nodes.

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Chrome
• Version: 11.10.4+

Additional context

No response

[moklick]

Does this issue happen with any of the examples on the website?

[ifedyukin]

It looks like the flickering is caused by changing the visibility property, probably in this line.

I've tried to create reproducable demo:

• CodeSandbox 11.11.1;
• CodeSandbox 11.10.1.

This probably happens when we reinit nodes due to an external update, e.g. a backend response.
I tried to simulate this situation in the sandbox. But it's not always reproducible.

Also, attached 2 videos:
https://github.com/xyflow/xyflow/assets/11480414/b04673f2-24f8-4860-b766-3a31a858cf1c - 11.11.1
https://github.com/xyflow/xyflow/assets/11480414/93a68828-6c89-473e-b4f9-41e20eb88ac3 - 11.10.1

[peterkogo]

@IanLondon Have you by any chance updated to v12 yet? This should be fixed in the new versions.

[EzraBrooks]

Hi, I tried upgrading to v12 (quickly and dirtily) and it still has a similar issue. I reverted back to 11.10.3 as described here.

[moklick]

I guess the issue here is that you are creating new nodes. This would not happen if you would iterate over your existing nodes and not throw away any information. Same for v12. If you want to update your nodes, you need to keep node.measured. Otherwise we need to re-initialize them.

@IanLondon could you provide an example for this?

[EzraBrooks]

This would not happen if you would iterate over your existing nodes and not throw away any information.

Hmm, I've invested quite a bit of work in my application to avoid this case, but it's possible there's still some edge cases where it's happening. Happy to refer to an example of reinitialization and see if it helps, once that example exists.

[peterkogo]

Just to clarify. Things like this usually appear when you are using setNodes and ignoring the previous nodes that get supplied.

// Good
setNodes(nodes => nodes.map(node => { ...node, /* changes here */ }));

// Bad
setNodes(someNodesIHaveCachedAndModified);

Can you make sure this is not happening?

[EzraBrooks]

Fairly certain, but my application is very complex and it's hard to track down 100% of the possible state updates. Also, I can confirm this still happens in 11.11.4, which dependabot updated me to, thus breaking my application.

If that situation is inadvisable, it seems like the library should log a warning when it happens?

I'm pretty frustrated that I pay for a pro subscription and this neither works nor tells me that I'm doing something wrong and shooting myself in the foot.. since it worked fine before 11.10.4.