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

useEdges

Source on GitHub (opens in a new tab)

This hook returns an array of the current edges. Components that use this hook will re-render whenever any edge changes.

import { useEdges } from 'reactflow';
 
export default function () {
  const edges = useEdges();
 
  return <div>There are currently {edges.length} edges!</div>;
}

Signature

#Returns
Edge<T>[]
An array of all edges currently in the flow.

Notes

  • Relying on useEdges unecessarily can be a common cause of performance issues. Whenever any edge changes, this hook will cause the component to re-render. Often we actually care about something more specific, like when the number of edges changes: where possible try to use useStore instead.