From 2d16b1d6d12f308387ee9410fbb4098ad1d74db5 Mon Sep 17 00:00:00 2001 From: zxhlyh Date: Wed, 2 Jul 2025 16:29:47 +0800 Subject: [PATCH] fix: refactor useNodes hooks to prevent rerender --- .../nodes/_base/components/node-position.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/web/app/components/workflow/nodes/_base/components/node-position.tsx b/web/app/components/workflow/nodes/_base/components/node-position.tsx index dc68dc6b20..e844726b4f 100644 --- a/web/app/components/workflow/nodes/_base/components/node-position.tsx +++ b/web/app/components/workflow/nodes/_base/components/node-position.tsx @@ -1,5 +1,6 @@ import { memo } from 'react' import { useTranslation } from 'react-i18next' +import { useShallow } from 'zustand/react/shallow' import { RiCrosshairLine } from '@remixicon/react' import { useReactFlow, useStore } from 'reactflow' import TooltipPlus from '@/app/components/base/tooltip' @@ -14,9 +15,20 @@ const NodePosition = ({ const { t } = useTranslation() const reactflow = useReactFlow() const { doSyncWorkflowDraft } = useNodesSyncDraft() - const nodePosition = useStore(s => s.getNodes().find(node => node.id === nodeId)?.position) - const nodeWidth = useStore(s => s.getNodes().find(node => node.id === nodeId)?.width) - const nodeHeight = useStore(s => s.getNodes().find(node => node.id === nodeId)?.height) + const { + nodePosition, + nodeWidth, + nodeHeight, + } = useStore(useShallow((s) => { + const nodes = s.getNodes() + const currentNode = nodes.find(node => node.id === nodeId)! + + return { + nodePosition: currentNode.position, + nodeWidth: currentNode.width, + nodeHeight: currentNode.height, + } + })) const transform = useStore(s => s.transform) if (!nodePosition || !nodeWidth || !nodeHeight) return null