alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5629 from AlaricBaraou/fix-zustand-equality-check

Browse Source 
Prevent re-render on every store update by using shallow in FlowRendererComponent useStore
This commit is contained in:
Moritz Klack
2025-11-17 10:16:09 +01:00
committed by GitHub
parent 639730bb94 0102be3bab
commit d33360b5c7
2 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/curly-snails-do.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@xyflow/react': patch
---
Prevent unnecessary re-render in `FlowRenderer`

3
packages/react/src/container/FlowRenderer/index.tsx
View File

@@ -1,4 +1,5 @@
import { memo, type ReactNode } from 'react'; import { memo, type ReactNode } from 'react';
import { shallow } from 'zustand/shallow';
import { useStore } from '../../hooks/useStore'; import { useStore } from '../../hooks/useStore';
import { useGlobalKeyHandler } from '../../hooks/useGlobalKeyHandler'; import { useGlobalKeyHandler } from '../../hooks/useGlobalKeyHandler';
@@ -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 });