Source on GitHub (opens in a new tab)

This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.

import { useCallback } from 'react';
import ReactFlow, { addEdge, useNodesState, useEdgesState } from 'reactflow';
export default function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
  const onConnect = useCallback(
    (connection) => {
      setEdges((oldEdges) => addEdge(connection, oldEdges));
  return <ReactFLow nodes={nodes} edges={edges} onConnect={onConnect} />;




  • If an edge with the same target and source already exists (and the same targetHandle and sourceHandle if those are set), then this util won't add a new edge even if the id property is different.