202_applyedgechanges__

applyEdgeChanges()

Source on GitHub

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 behavior, 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 '@xyflow/react';
 
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

Drop in function that applies edge changes to an array of edges.

Parameters

• changes: EdgeChange<EdgeType>[] Array of changes to apply.
• edges: EdgeType[] Array of edge to apply the changes to.

Returns

EdgeType[]

Notes

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