From 005df0da114ebbd9f3c6c2622f47c6a054036a81 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 16 May 2023 15:07:02 +0200 Subject: [PATCH 1/2] fix(useNodes,useEdges): prevent re-renderings --- packages/core/src/hooks/useEdges.ts | 4 +++- packages/core/src/hooks/useNodes.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) 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; } From 70ec97f7daec6d5401215cae3edac04aea88a3ba Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 16 May 2023 16:30:40 +0200 Subject: [PATCH 2/2] chore(changeset): add --- .changeset/chilled-insects-call.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chilled-insects-call.md 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