useNodes

GitHubでソースを表示

このフックは、現在のノードの配列を返します。このフックを使用するコンポーネントは、ノードが選択されたり移動されたりするなど、**ノードが変更されるたび**に再レンダリングされます。

import { useNodes } from '@xyflow/react';
 
export default function () {
  const nodes = useNodes();
 
  return <div>There are currently {nodes.length} nodes!</div>;
}

シグネチャ

Typescript

このフックは、カスタムノード型のジェネリック型引数を受け入れます。詳細については、TypeScriptガイドのこのセクションを参照してください。

const nodes = useNodes<CustomNodeType>();

注意点

• useNodesに不必要に依存すると、パフォーマンスの問題の一般的な原因になる可能性があります。ノードが変更されるたびに、このフックはコンポーネントを再レンダリングさせます。実際には、ノードの*数*が変化したときなど、より具体的なことに関心がある場合がよくあります。可能な場合は、代わりにuseStoreを使用してみてください。