| [ Web Proxy ] |
| Viewing: https://reactflow.dev/api-reference/utils/apply-node-changes | [Back] [Original] |
Various events on the <ReactFlow /> component can produce a
NodeChange that describes how to update the nodes of your
flow in some way. If you dont need any custom behavior, this util can be used to
take an array of these changes and apply them to your nodes.
import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges } from '@xyflow/react';
export default function Flow() {
const [nodes, setNodes] = useState([]);
const [edges, setEdges] = useState([]);
const onNodesChange = useCallback(
(changes) => {
setNodes((oldNodes) => applyNodeChanges(changes, oldNodes));
},
[setNodes],
);
return (
<ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
);
}| Name | Type | Default |
|---|---|---|
changes | NodeChange<NodeType>[]Array of changes to apply. | |
nodes | NodeType[]Array of nodes to apply the changes to. |
NodeType[]useNodesState
hook conveniently wraps this util and Reacts useState hook for you and might
be simpler to use.A project by the xyflow team
info@xyflow.com Copyright 2026 webkid GmbH. All rights reserved website design by Facu Montanaro
| Web Proxy Viewer | New URL | Original Page |