ReferenceHooks
useNodes()

useNodes

Source on GitHub

This hook returns an array of the current nodes. Components that use this hook will re-render whenever any node changes, including when a node is selected or moved.

import { useNodes } from '@xyflow/react';
 
export default function () {
  const nodes = useNodes();
 
  return <div>There are currently {nodes.length} nodes!</div>;
}

Signature

#Returns
#
Node<T>[]
An array of all nodes currently in the flow.

Typescript

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

const nodes = useNodes<CustomNodeType>();

Notes

  • Relying on useNodes unecessarily can be a common cause of performance issues. Whenever any node changes, this hook will cause the component to re-render. Often we actually care about something more specific, like when the number of nodes changes: where possible try to use useStore instead.
HooksUtils