useStore()

Source on GitHub 

This hook can be used to subscribe to internal state changes of the React Flow component. The useStore hook is re-exported from the Zustand  state management library, so you should check out their docs for more details.

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>
  );
}

This example computes the number of nodes eagerly. Whenever the number of nodes in the flow changes, the <NodesLengthDisplay /> component will re-render. This is in contrast to the example in the useStoreApi hook that only computes the number of nodes when a button is clicked.

Choosing whether to calculate values on-demand or to subscribe to changes as they happen is a bit of a balancing act. On the one hand, putting too many heavy calculations in an event handler can make your app feel sluggish or unresponsive. On the other hand, computing values eagerly can lead to slow or unnecessary re-renders.

We make both this hook and useStoreApi available so that you can choose the approach that works best for your use-case.

Signature

Examples

Triggering store actions

You can manipulate the internal React Flow state by triggering internal actions through the useStore hook. These actions are already used internally throughout the library, but you can also use them to implement custom functionality.

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

This hook can be typed by typing the selector function. See this section in our TypeScript guide for more information.

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