203_applynodechanges__

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 don’t 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

Drop in function that applies node changes to an array of nodes.

Parameters

• changes: NodeChange<NodeType>[] Array of changes to apply.
• nodes: NodeType[] Array of nodes to apply the changes to.

Returns

NodeType[]

Notes

• If you don’t need any custom behavior, the useNodesState hook conveniently wraps this util and React’s useState hook for you and might be simpler to use.