From c2ee8750849176233b1d1889477fec0b91b78419 Mon Sep 17 00:00:00 2001 From: shrimbly Date: Tue, 10 Mar 2026 22:04:43 +1300 Subject: [PATCH] perf: replace useViewport with narrow useStore selector in GroupControlsOverlay useViewport() re-renders on every pan AND zoom. The narrow selector useStore((s) => s.transform[2]) only fires when zoom changes, eliminating unnecessary group overlay re-renders during panning. Co-Authored-By: Claude Opus 4.6 --- src/components/GroupsOverlay.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/GroupsOverlay.tsx b/src/components/GroupsOverlay.tsx index 6c2a0a1b..5f55d296 100644 --- a/src/components/GroupsOverlay.tsx +++ b/src/components/GroupsOverlay.tsx @@ -1,7 +1,7 @@ "use client"; import { useCallback, useState, useRef, useEffect } from "react"; -import { useViewport, ViewportPortal } from "@xyflow/react"; +import { useStore, ViewportPortal } from "@xyflow/react"; import { useWorkflowStore, GROUP_COLORS } from "@/store/workflowStore"; import { GroupColor } from "@/types"; @@ -492,7 +492,7 @@ export function GroupBackgroundsPortal() { // Renders group controls (headers, resize handles) using ViewportPortal above nodes export function GroupControlsOverlay() { const { groups } = useWorkflowStore(); - const { zoom } = useViewport(); + const zoom = useStore((s) => s.transform[2]); const groupIds = Object.keys(groups);