useEdges
このフックは、現在のエッジの配列を返します。このフックを使用するコンポーネントは、**エッジが変更されるたびに**再レンダリングされます。
import { useEdges } from '@xyflow/react';
export default function () {
const edges = useEdges();
return <div>There are currently {edges.length} edges!</div>;
}シグネチャ
| 名前 | 型 |
|---|---|
#戻り値 | |
Edge<T>[]フロー内に現在存在するすべてのエッジの配列。 |
TypeScript
このフックは、カスタムエッジ型のジェネリック型引数を受け入れます。詳細については、TypeScript ガイドのこのセクションを参照してください。
const nodes = useEdges<CustomEdgeType>();注記
useEdgesに不必要に依存することは、パフォーマンスの問題の一般的な原因となります。エッジが変更されるたびに、このフックはコンポーネントの再レンダリングを発生させます。多くの場合、エッジの*数*が変更されたときなど、より具体的なことに関心があります。可能な場合は、代わりにuseStoreを使用してみてください。