Memoize context menu provider

src/renderer/features/context-menu/context-menu-provider.tsx

@@ -83,7 +83,7 @@ const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
 const remote = isElectron() ? window.electron.remote : null;
 
 export interface ContextMenuProviderProps {
-    children: React.ReactNode;
+    children: ReactNode;
 }
 
 export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
@@ -107,9 +107,19 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
 
     const handlePlayQueueAdd = usePlayQueueAdd();
 
-    const openContextMenu = (args: OpenContextMenuProps) => {
+    const openContextMenu = useCallback(
-        const { xPos, yPos, menuItems, data, type, tableApi, dataNodes, context, resetGridCache } =
+        (args: OpenContextMenuProps) => {
-            args;
+            const {
+                xPos,
+                yPos,
+                menuItems,
+                data,
+                type,
+                tableApi,
+                dataNodes,
+                context,
+                resetGridCache,
+            } = args;
 
             const serverType = data[0]?.serverType || useAuthStore.getState().currentServer?.type;
             let validMenuItems = menuItems;
@@ -143,9 +153,11 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                 yPos: calculatedYPos,
             });
             setOpened(true);
-    };
+        },
+        [menuRect.height, menuRect.width, setCtx, viewport.height, viewport.width],
+    );
 
-    const closeContextMenu = () => {
+    const closeContextMenu = useCallback(() => {
         setOpened(false);
         setCtx({
             data: [],
@@ -156,7 +168,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
             xPos: 0,
             yPos: 0,
         });
-    };
+    }, [setCtx]);
 
     useContextMenuEvents({
         closeContextMenu,
@@ -763,13 +775,16 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
 
     const mergedRef = useMergedRef(ref, clickOutsideRef);
 
-    return (
+    const providerValue = useMemo(
-        <ContextMenuContext.Provider
+        () => ({
-            value={{
             closeContextMenu,
             openContextMenu,
-            }}
+        }),
-        >
+        [closeContextMenu, openContextMenu],
+    );
+
+    return (
+        <ContextMenuContext.Provider value={providerValue}>
             <Portal>
                 <AnimatePresence>
                     {opened && (