Skip to Content
You are viewing the v12 docs of React Flow. You can find the latest version here.
ReferenceHooks

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

Parameters:

This function does not accept any parameters.

Returns:

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 unnecessarily 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.
Last updated on