Merge pull request #3060 from wbkd/fix/usenode-useedges

fix(useNodes,useEdges): prevent re-renderings
This commit is contained in:
Moritz Klack
2023-05-16 16:37:51 +02:00
committed by GitHub
3 changed files with 11 additions and 2 deletions
+5
View File
@@ -0,0 +1,5 @@
---
'@reactflow/core': patch
---
fix useNodes and useEdges bug with infinite re-renderings
+3 -1
View File
@@ -1,10 +1,12 @@
import { shallow } from 'zustand/shallow';
import { useStore } from '../hooks/useStore'; import { useStore } from '../hooks/useStore';
import type { Edge, ReactFlowState } from '../types'; import type { Edge, ReactFlowState } from '../types';
const edgesSelector = (state: ReactFlowState) => state.edges; const edgesSelector = (state: ReactFlowState) => state.edges;
function useEdges<EdgeData>(): Edge<EdgeData>[] { function useEdges<EdgeData>(): Edge<EdgeData>[] {
const edges = useStore(edgesSelector); const edges = useStore(edgesSelector, shallow);
return edges; return edges;
} }
+3 -1
View File
@@ -1,10 +1,12 @@
import { shallow } from 'zustand/shallow';
import { useStore } from '../hooks/useStore'; import { useStore } from '../hooks/useStore';
import type { Node, ReactFlowState } from '../types'; import type { Node, ReactFlowState } from '../types';
const nodesSelector = (state: ReactFlowState) => state.getNodes(); const nodesSelector = (state: ReactFlowState) => state.getNodes();
function useNodes<NodeData>(): Node<NodeData>[] { function useNodes<NodeData>(): Node<NodeData>[] {
const nodes = useStore(nodesSelector); const nodes = useStore(nodesSelector, shallow);
return nodes; return nodes;
} }