fix(useNodes,useEdges): prevent re-renderings

This commit is contained in:
moklick
2023-05-16 15:07:02 +02:00
parent 68907848cc
commit 005df0da11
2 changed files with 6 additions and 2 deletions
+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;
} }