useReactFlow

Source on GitHub (opens in a new tab)

This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.

import { useCallback, useState } from 'react';
import { useReactFlow } from 'reactflow';
 
export function NodeCounter() {
  const reactFlow = useReactFlow();
  const [count, setCount] = useState(0);
  const countNodes = useCallback(() => {
    setCount(reactFlow.getNodes().length);
  // you need to pass it as a dependency if you are using it with useEffect or useCallback
  // because at the first render, it's not initialized yet and some functions might not work.
  }, [reactFlow]);
 
  return (
    <div>
      <button onClick={countNodes}>Update count</button>
      <p>There are {count} nodes in the flow.</p>
    </div>
  );
}

Signature

Name	Type
#Returns
#	`ReactFlowInstance<T, U>`

Notes

This hook can only be used in a component that is a child of a <ReactFlowProvider /> or a <ReactFlow /> component.
Unlike useNodes or useEdges, this hook won't cause your component to re-render when state changes. Instead, you can query the state when you need it by using methods on the ReactFlowInstance this hook returns.

useOnViewportChange()useStore()