feat: memoize items for context menu

Author: gagik

configs/eslint-config-compass/index.js

@@ -46,7 +46,7 @@ const tsxRules = {
   'react-hooks/exhaustive-deps': [
     'warn',
     {
-      additionalHooks: 'useTrackOnChange',
+      additionalHooks: '(useTrackOnChange|useContextMenuItems)',
     },
   ],
 };

packages/compass-components/src/components/context-menu.spec.tsx

@@ -18,7 +18,7 @@ describe('useContextMenuItems', function () {
     children?: React.ReactNode;
     'data-testid'?: string;
   }) => {
-    const ref = useContextMenuItems(items);
+    const ref = useContextMenuItems(() => items, [items]);
 
     return (
       <div data-testid={dataTestId} ref={ref}>

packages/compass-components/src/components/context-menu.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Menu, MenuItem, MenuSeparator } from './leafygreen';
 import type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
 import { useContextMenu } from '@mongodb-js/compass-context-menu';
@@ -88,8 +88,10 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
 }
 
 export function useContextMenuItems(
-  items: ContextMenuItem[]
+  getItems: () => ContextMenuItem[],
+  dependencies: React.DependencyList | undefined
 ): React.RefCallback<HTMLElement> {
+  const memoizedItems = useMemo(getItems, dependencies);
   const contextMenu = useContextMenu();
-  return contextMenu.registerItems(items);
+  return contextMenu.registerItems(memoizedItems);
 }