💡 This is the legacy site for v11. If you are looking for the latest docs, please visit React Flow
Reference
applyEdgeChanges()

applyEdgeChanges()

Source on GitHub (opens in a new tab)

Various events on the <ReactFlow /> component can produce an EdgeChange that describes how to update the edges of your flow in some way. If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.

import { useState, useCallback } from 'react';
import ReactFlow, { applyEdgeChanges } from 'reactflow';
 
export default function Flow() {
  const [nodes, setNodes] = useState([]);
  const [edges, setEdges] = useState([]);
  const onEdgesChange = useCallback(
    (changes) => {
      setEdges((oldEdges) => applyEdgeChanges(changes, oldEdges));
    },
    [setEdges],
  );
 
  return (
    <ReactFLow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
  );
}

Signature

#Params
#changes
#edges
#Returns

Notes

  • If you don't need any custom behaviour, the useEdgesState hook conviniently wraps this util and React's useState hook for you and might be simpler to use.