useEdgesState
Source on GitHub (opens in a new tab)
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
| Name | Type |
|---|---|
#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[]) => voidA 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 (opens in a new tab) instead.