useStore

GitHubのソース

このフックは、React Flowコンポーネントの内部状態の変更を購読するために使用できます。 useStore フックは Zustand 状態管理ライブラリから再エクスポートされているため、詳細については、そのドキュメントを参照してください。

このフックは、内部状態にアクセスする他の方法がない場合にのみ使用してください。多くの一般的なユースケースでは、useReactFlow、useViewport など、専用のフックが用意されています。

import { ReactFlow, useStore } from '@xyflow/react';
 
const nodesLengthSelector = (state) =>
  state.nodes.length || 0;
 
const NodesLengthDisplay = () => {
  const nodesLength = useStore(nodesLengthSelector);
 
  return <div>The current number of nodes is: {nodesLength}</div>;
};
 
function Flow() {
  return (
    <ReactFlow nodes={[...]}>
      <NodesLengthDisplay />
    </ReactFlow>
  );
}

この例では、ノードの数を積極的に計算します。フロー内のノードの数が変更されるたびに、<NodesLengthDisplay />コンポーネントが再レンダリングされます。これは、ボタンがクリックされたときにのみノードの数を計算する useStoreApi フックの例とは対照的です。

値をオンデマンドで計算するか、変更が発生したときに購読するかを選択することは、少しバランスの取れた行為です。一方では、イベントハンドラに重い計算が多すぎると、アプリが遅くなったり、応答しなくなったりする可能性があります。一方、値を積極的に計算すると、レンダリングが遅くなったり、不要になったりする可能性があります。

このフックと useStoreApi の両方を使用できるようにすることで、ユースケースに最適なアプローチを選択できます。

シグネチャ

名前	型
#パラメータ
#`selector`	`(状態: ReactFlowState) => T` フローの内部状態のスライスを返すセレクタ関数。必要な状態だけを抽出または変換することは、不要な再レンダリングを回避するための良い習慣です。
#`equalityFn?`	`(前: T, 次: T) => ブーリアン` 以前の値と次の値を比較する関数。これは、不要な再レンダリングを防ぐのに非常に役立ちます。良い賢明なデフォルトはObject.isを使用するか、zustand / shaddlowをインポートすることですが、好きなだけ粒状にすることができます。
#戻り値
#	`T`

サンプル

ストアアクションのトリガー

useStore フックを介して内部アクションをトリガーすることにより、内部React Flow状態を操作できます。これらのアクションはライブラリ全体で既に内部的に使用されていますが、カスタム機能を実装するためにも使用できます。

import { useStore } from '@xyflow/react';
 
const setMinZoomSelector = (state) => state.setMinZoom;
 
function MinZoomSetter() {
  const setMinZoom = useStore(setMinZoomSelector);
 
  return <button onClick={() => setMinZoom(6)}>set min zoom</button>;
}

TypeScript

このフックは、セレクター関数の型を指定することで型指定できます。詳細については、TypeScriptガイドのこのセクションを参照してください。

const nodes = useStore((s: ReactFlowState<CustomNodeType>) => ({
  nodes: s.nodes,
}));

注意事項

ストアセレクター関数は、使用するコンポーネントの*外部*で定義するか、Reactの useCallback フックを使用して関数をメモ化する必要があります。これを行わないと、パフォーマンスがわずかに低下する可能性があります。

フックユーティリティ