diff --git a/.changeset/chilled-insects-call.md b/.changeset/chilled-insects-call.md new file mode 100644 index 00000000..018b00c5 --- /dev/null +++ b/.changeset/chilled-insects-call.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +fix useNodes and useEdges bug with infinite re-renderings diff --git a/packages/core/src/hooks/useEdges.ts b/packages/core/src/hooks/useEdges.ts index 78c0e36a..194f8805 100644 --- a/packages/core/src/hooks/useEdges.ts +++ b/packages/core/src/hooks/useEdges.ts @@ -1,10 +1,12 @@ +import { shallow } from 'zustand/shallow'; + import { useStore } from '../hooks/useStore'; import type { Edge, ReactFlowState } from '../types'; const edgesSelector = (state: ReactFlowState) => state.edges; function useEdges(): Edge[] { - const edges = useStore(edgesSelector); + const edges = useStore(edgesSelector, shallow); return edges; } diff --git a/packages/core/src/hooks/useNodes.ts b/packages/core/src/hooks/useNodes.ts index 8681b4fd..8d71b435 100644 --- a/packages/core/src/hooks/useNodes.ts +++ b/packages/core/src/hooks/useNodes.ts @@ -1,10 +1,12 @@ +import { shallow } from 'zustand/shallow'; + import { useStore } from '../hooks/useStore'; import type { Node, ReactFlowState } from '../types'; const nodesSelector = (state: ReactFlowState) => state.getNodes(); function useNodes(): Node[] { - const nodes = useStore(nodesSelector); + const nodes = useStore(nodesSelector, shallow); return nodes; }