💡 This is the legacy site for v11. If you are looking for the latest docs, please visit React Flow
Reference
useReactFlow()

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

#Returns

Notes