prevent re-render on every store update by using shallow in FlowRendererComponent useStore

This commit is contained in:
Alaric Baraou
2025-11-17 01:10:00 +09:00
parent 0984dbb05a
commit 5161cf3279
@@ -8,6 +8,7 @@ import { ZoomPane } from '../ZoomPane';
import { Pane } from '../Pane'; import { Pane } from '../Pane';
import { NodesSelection } from '../../components/NodesSelection'; import { NodesSelection } from '../../components/NodesSelection';
import type { ReactFlowState, Node } from '../../types'; import type { ReactFlowState, Node } from '../../types';
import { shallow } from 'zustand/shallow';
export type FlowRendererProps<NodeType extends Node = Node> = Omit< export type FlowRendererProps<NodeType extends Node = Node> = Omit<
GraphViewProps<NodeType>, GraphViewProps<NodeType>,
@@ -72,7 +73,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
onViewportChange, onViewportChange,
isControlledViewport, isControlledViewport,
}: FlowRendererProps<NodeType>) { }: FlowRendererProps<NodeType>) {
const { nodesSelectionActive, userSelectionActive } = useStore(selector); const { nodesSelectionActive, userSelectionActive } = useStore(selector, shallow);
const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win }); const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win }); const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });