Edge not appearing on rerender, if it is attaching to a source handle

[AlanJereb]

Describe the Bug

When updating data with new nodes and edges and running the changes through the setNodes and setEdges, only the nodes get rendered, but not the edges that use the sourceHandle property.

The edge renders correctly if I reload the page (reinitialize react-flow).

Your Example Website or App

/

Steps to Reproduce the Bug or Issue

Relavant code

useEffect(() => {
    if (props.data?.components.length) {
      setNodes([..updatedNodes]);
      setEdges([...modified.edges]);
  }, [props.data]);

Before the change state:

Before the change render:

After the change state:

After the change render (wrong - edge is missing):

Expected behavior

Edges should render the same as nodes do when using setEdges.

Screenshots or Videos

No response

Platform

• OS: Windows 10
• Browser: Firefox 114.0.1 (64-bit)
• Version: ^11.7.0

Additional context

No response

[moklick]

Hey @AlanJereb

I am not able to reproduce this: https://codesandbox.io/s/upbeat-kowalevski-hsnjnl?file=/src/Flow.tsx:1182-1264

Do you have a repo or codesandbox, I could check out?

[AlanJereb]

Hey @AlanJereb

I am not able to reproduce this: https://codesandbox.io/s/upbeat-kowalevski-hsnjnl?file=/src/Flow.tsx:1182-1264

Do you have a repo or codesandbox, I could check out?

Hi there,

Thank you for your quick reply.
I've tried to reproduce it using your base to make it more similar to our own https://codesandbox.io/s/peaceful-allen-jv99tv?file=/src/FlowEdge.tsx:562-566 Sadly. I couldn't replicate the issue.

There probably is something wrong on our side.

[MarkChenYutian]

I am also experiencing a similar issue. I am generating (and updating) a flow diagram programmatically using ReactFlow, however, even with valid source Handle ID, I'm still receiving the warning

Couldn't create edge for source handle id: s-val-ptr-16; edge id: heap-41@s-val-ptr-16>heap-33. Help: https://reactflow.dev/error#800 
...

The screenshot above shows that the EdgeIDs (in form of sourceNodeID@sourceHandleID>targetNodeID). The component tree from ReactDev debugger shows that the handle do exist and is in the correct node.

The updates to Nodes and Edges is applied using following useEffect hooks.

[MarkChenYutian]

Unfortunately, similar to the discussion above, when I tried to extract this specific component and build a minimum reproducible case, the problem disappears magically.

Full code is available in https://github.com/MarkChenYutian/C0VM-ts in /src/components/debug_console/graphical_debugger.tsx

[moklick]

Please re-open this issue if you can provide a repo or codesandbox that reproduces it.

@MarkChenYutian I will provide feedback under MarkChenYutian/C0VM-ts#41