[ Web Proxy ]
URL:
Viewing: https://reactflow.dev/api-reference/utils/apply-node-changes [Back]  [Original]

applyNodeChanges() - React FlowSkip to Content

React Flow

LearnReferenceExamplesUIShowcaseMoreReact Flow ProRemove Attribution
SearchGitHubDiscord

On This Page

ReferenceUtils

applyNodeChanges()

Source on GitHub

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} /> ); }

Signature

Parameters:
NameTypeDefault
changesNodeChange<NodeType>[]

Array of changes to apply.

nodesNodeType[]

Array of nodes to apply the changes to.

Returns:
NodeType[]

Notes

Last updated on August 19, 2026

A project by the xyflow team

We are building and maintaining open source software for node-based UIs since 2019.

Web Proxy Viewer  |  New URL  |  Original Page