From 0f49fe2246dfce8b93c76cf833f045503b4ff5ef Mon Sep 17 00:00:00 2001
From: GuanMu <ballmanjq@gmail.com>
Date: Fri, 27 Jun 2025 02:20:53 +0000
Subject: [PATCH] feat: Optimize ResizeObserver callback function using
 useCallback to improve panel width management performance

---
 web/app/components/workflow/panel/index.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index 863a2e3b23..b55ae6cffe 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { memo, useEffect, useRef } from 'react'
+import { memo, useCallback, useEffect, useRef } from 'react'
 import { useNodes } from 'reactflow'
 import type { CommonNodeType } from '../types'
 import { Panel as NodePanel } from '../nodes'
@@ -29,10 +29,12 @@ const getEntryWidth = (entry: ResizeObserverEntry, element: HTMLElement): number
 
 const useResizeObserver = (
   callback: (width: number) => void,
-  dependencies: React.DependencyList,
+  dependencies: React.DependencyList = [],
 ) => {
   const elementRef = useRef<HTMLDivElement>(null)
 
+  const stableCallback = useCallback(callback, [callback])
+
   useEffect(() => {
     const element = elementRef.current
     if (!element) return
@@ -40,20 +42,19 @@ const useResizeObserver = (
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const width = getEntryWidth(entry, element)
-        callback(width)
+        stableCallback(width)
       }
     })
 
     resizeObserver.observe(element)
 
     const initialWidth = element.getBoundingClientRect().width
-    callback(initialWidth)
+    stableCallback(initialWidth)
 
     return () => {
       resizeObserver.disconnect()
     }
-  }, dependencies)
-
+  }, [stableCallback, ...dependencies])
   return elementRef
 }