[React flow] 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