Merge pull request #3060 from wbkd/fix/usenode-useedges
fix(useNodes,useEdges): prevent re-renderings
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'@reactflow/core': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix useNodes and useEdges bug with infinite re-renderings
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user