ReferenceHooks
useEdgesState()

useEdgesState

Source on GitHub

This hook makes it easy to prototype a controlled flow where you manage the state of nodes and edges outside the ReactFlowInstance. You can think of it like React’s useState hook with an additional helper callback.

import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';
 
const initialNodes = [];
const initialEdges = [];
 
export default function () {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
    />
  );
}

Signature

#Params
#initialEdges
Edge<T>[]
#Returns
#[0]
Edge<T>[]
The current array of edges. You might pass this directly to the edges prop of your <ReactFlow /> component or you may want to manipulate it first to perform some layouting, for example.
#[1]
React.Dispatch<React.SetStateAction<Edge<T>[]>>
A function that you can use to update the edges. You can pass it a new array of edges or a callback that receives the current array of edges and returns a new array of edges. This is the same as the second element of the tuple returned by React's useState hook.
#[2]
(changes: EdgeChange[]) => void
A handy callback that can take an array of EdgeChanges and update the edges state accordingly. You'll typically pass this directly to the onEdgesChange prop of your <ReactFlow /> component.

Typescript

This hook accepts a generic type argument of custom edge types. See this section in our Typescript guide for more information.

const nodes = useEdgesState<CustomEdgeType>();

Notes

  • This hook was created to make prototyping easier and our documentation examples clearer. Although it is OK to use this hook in production, in practice you may want to use a more sophisticated state management solution like Zustand instead.
HooksUtils