useNodesState

This helper hook creates a new local state to store React Flow nodes. It is very similar to React's useState but exposes a onNodesChange function that can be passed as a prop to the ReactFlow component. This makes it easier to quickly create controlled flows without the need to implement the onNodesChange function.

caution

This hook has been added for prototyping and reducing boilerplate in the React Flow examples. It can be used in production but we recommend to use a state management library like Zustand.

Usage

import ReactFlow, { addEdge, useNodesState, useEdgesState } from 'reactflow';

const initialNodes = [];
const initialEdges = [];

function ControlledFlow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
    />
  );
}