fix(eslint): fix react-hooks/preserve-manual-memoization issues (#7617)

Author: gribnoysup

configs/eslint-config-compass/index.js

@@ -7,7 +7,6 @@ const chaiFriendly = require('eslint-plugin-chai-friendly');
 
 // TODO(COMPASS-9459): disabling a bunch of new rules to unblock automatic updates
 const tempNewEslintRulesDisabled = {
-  'react-hooks/preserve-manual-memoization': 'off',
   '@typescript-eslint/no-unsafe-enum-comparison': 'off',
 };
 

packages/compass-components/src/components/file-picker-dialog.tsx

@@ -397,7 +397,7 @@ function FilePickerDialog({
       });
       onChange(files);
     },
-    [onChange]
+    [backend, onChange]
   );
 
   const handleOpenFileInput = useCallback(() => {

packages/compass-crud/src/components/document-list.tsx

@@ -432,12 +432,17 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
     {}
   );
 
-  const onColumnWidthChange = useCallback((newColumnWidths) => {
-    setColumnWidths({
-      ...columnWidths,
-      ...newColumnWidths,
-    });
-  }, []);
+  const onColumnWidthChange = useCallback(
+    (newColumnWidths: Record<string, number>) => {
+      setColumnWidths((columnWidths) => {
+        return {
+          ...columnWidths,
+          ...newColumnWidths,
+        };
+      });
+    },
+    [setColumnWidths]
+  );
 
   const renderContent = useCallback(
     (scrollTriggerRef: React.Ref<HTMLDivElement>) => {
@@ -523,6 +528,8 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
       query,
       scrollRef,
       currentViewInitialScrollTop,
+      columnWidths,
+      onColumnWidthChange,
     ]
   );
 

packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx

@@ -1,5 +1,5 @@
 import type { ChangeEvent } from 'react';
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import type { ConnectionOptions } from 'mongodb-data-service';
 import {
   Label,
@@ -125,17 +125,22 @@ function ProxyAndSshTunnelTab({
     connectionStringUrl,
     connectionOptions
   );
-
-  const options = [...tabOptions];
   const showProxySettings = useConnectionFormSetting('showProxySettings');
-  if (showProxySettings) {
-    options.push({
-      title: 'Application-level Proxy',
-      id: 'app-proxy',
-      type: 'app-proxy',
-      component: AppProxy,
-    });
-  }
+  const options = useMemo(() => {
+    if (showProxySettings) {
+      return [
+        ...tabOptions,
+        {
+          title: 'Application-level Proxy',
+          id: 'app-proxy',
+          type: 'app-proxy',
+          component: AppProxy,
+        } as const,
+      ];
+    } else {
+      return [...tabOptions];
+    }
+  }, [showProxySettings]);
 
   const selectedOptionIndex =
     options.findIndex((x) => x.type === selectedTunnelType) ?? 0;
@@ -177,15 +182,15 @@ function ProxyAndSshTunnelTab({
   );
 
   const optionSelected = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      event.preventDefault();
-      const item = options.find(({ id }) => id === event.target.value);
+    (evt: ChangeEvent<HTMLInputElement>) => {
+      evt.preventDefault();
+      const item = options.find(({ id }) => id === evt.target.value);
       if (item) {
         handleOptionChanged(selectedOption.type, item.type);
         setSelectedOption(item);
       }
     },
-    [selectedOption, handleOptionChanged]
+    [handleOptionChanged, options, selectedOption.type]
   );
 
   const TunnelContent = selectedOption.component;