fix(eslint): fix react-hooks/refs issues (#7618)

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/refs': 'off',
   'react-hooks/preserve-manual-memoization': 'off',
   '@typescript-eslint/no-unsafe-enum-comparison': 'off',
 };

package-lock.json

@@ -9,6 +9,7 @@ import {
   useDarkMode,
   cx,
   useRequiredURLSearchParams,
+  useCurrentValueRef,
 } from '@mongodb-js/compass-components';
 import {
   createAggregationAutocompleter,
@@ -83,8 +84,7 @@ export const PipelineEditor: React.FunctionComponent<PipelineEditorProps> = ({
   const track = useTelemetry();
   const connectionInfoRef = useConnectionInfoRef();
   const editorInitialValueRef = useRef<string>(pipelineText);
-  const editorCurrentValueRef = useRef<string>(pipelineText);
-  editorCurrentValueRef.current = pipelineText;
+  const editorCurrentValueRef = useCurrentValueRef<string>(pipelineText);
 
   const { utmSource, utmMedium } = useRequiredURLSearchParams();
 
@@ -112,7 +112,7 @@ export const PipelineEditor: React.FunctionComponent<PipelineEditorProps> = ({
       );
       editorInitialValueRef.current = editorCurrentValueRef.current;
     }
-  }, [num_stages, track, connectionInfoRef]);
+  }, [editorCurrentValueRef, track, num_stages, connectionInfoRef]);
 
   const annotations: Annotation[] = useMemo(() => {
     return syntaxErrors

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-editor.tsx

@@ -14,6 +14,7 @@ import {
   Banner,
   useDarkMode,
   useRequiredURLSearchParams,
+  useCurrentValueRef,
 } from '@mongodb-js/compass-components';
 import {
   changeStageValue,
@@ -99,8 +100,7 @@ export const StageEditor = ({
   const connectionInfoRef = useConnectionInfoRef();
   const darkMode = useDarkMode();
   const editorInitialValueRef = useRef<string | null>(stageValue);
-  const editorCurrentValueRef = useRef<string | null>(stageValue);
-  editorCurrentValueRef.current = stageValue;
+  const editorCurrentValueRef = useCurrentValueRef<string | null>(stageValue);
 
   const fields = useAutocompleteFields(namespace);
 
@@ -150,6 +150,7 @@ export const StageEditor = ({
       editorInitialValueRef.current = editorCurrentValueRef.current;
     }
   }, [
+    editorCurrentValueRef,
     track,
     num_stages,
     index,

packages/compass-aggregations/src/components/stage-editor/stage-editor.tsx

@@ -50,6 +50,7 @@
     "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
   },
   "dependencies": {
+    "@mongodb-js/compass-components": "^1.56.0",
     "eventemitter3": "^4.0.0",
     "react": "^17.0.2",
     "react-redux": "^8.1.3",

packages/compass-app-registry/package.json

@@ -1,10 +1,5 @@
-import React, {
-  createContext,
-  useEffect,
-  useRef,
-  useContext,
-  useState,
-} from 'react';
+import React, { createContext, useEffect, useContext, useState } from 'react';
+import { useInitialValue } from '@mongodb-js/compass-components';
 import { globalAppRegistry, AppRegistry } from './app-registry';
 
 /**
@@ -57,7 +52,7 @@ export function GlobalAppRegistryProvider({
   value?: AppRegistry;
   children?: React.ReactNode;
 }) {
-  const appRegistry = useRef(value ?? globalAppRegistry).current;
+  const appRegistry = useInitialValue(value ?? globalAppRegistry);
   return (
     <GlobalAppRegistryContext.Provider value={appRegistry}>
       {children}
@@ -73,11 +68,11 @@ export function AppRegistryProvider({
   children,
   ...props
 }: AppRegistryProviderProps) {
-  const initialPropsRef = useRef(props);
+  const initialProps = useInitialValue(props);
   const {
     localAppRegistry: initialLocalAppRegistry,
     deactivateOnUnmount = true,
-  } = initialPropsRef.current;
+  } = initialProps;
 
   const globalAppRegistry = useGlobalAppRegistry();
   const isTopLevelProvider = useIsTopLevelProvider();

packages/compass-app-registry/src/react-context.tsx

@@ -92,7 +92,7 @@ function LegacyRefluxProvider({
 }) {
   const storeRef = useRef(store);
   const [state, setState] = useState(() => {
-    return storeRef.current.state;
+    return store.state;
   });
 
   React.useEffect(() => {

packages/compass-app-registry/src/register-plugin.tsx

@@ -12,7 +12,10 @@ import {
   atlasServiceLocator,
 } from '@mongodb-js/atlas-service/provider';
 import { DocsProviderTransport } from './docs-provider-transport';
-import { useDrawerActions } from '@mongodb-js/compass-components';
+import {
+  useDrawerActions,
+  useInitialValue,
+} from '@mongodb-js/compass-components';
 import {
   buildConnectionErrorPrompt,
   buildExplainPlanPrompt,
@@ -180,56 +183,12 @@ export const AssistantProvider: React.FunctionComponent<
   const { openDrawer } = useDrawerActions();
   const track = useTelemetry();
 
-  const createEntryPointHandler = useRef(function <T>(
-    entryPointName:
-      | 'explain plan'
-      | 'performance insights'
-      | 'connection error',
-    builder: (props: T) => EntryPointMessage
-  ) {
-    return (props: T) => {
-      if (!assistantActionsContext.current.ensureOptInAndSend) {
-        return;
-      }
-
-      const { prompt, metadata } = builder(props);
-      void assistantActionsContext.current.ensureOptInAndSend(
-        {
-          text: prompt,
-          metadata: {
-            ...metadata,
-            source: entryPointName,
-          },
-        },
-        {},
-        () => {
-          openDrawer(ASSISTANT_DRAWER_ID);
-
-          track('Assistant Entry Point Used', {
-            source: entryPointName,
-          });
-        }
-      );
-    };
-  }).current;
-  const assistantActionsContext = useRef<AssistantActionsContextType>({
-    interpretExplainPlan: createEntryPointHandler(
-      'explain plan',
-      buildExplainPlanPrompt
-    ),
-    interpretConnectionError: createEntryPointHandler(
-      'connection error',
-      buildConnectionErrorPrompt
-    ),
-    tellMoreAboutInsight: createEntryPointHandler(
-      'performance insights',
-      buildProactiveInsightsPrompt
-    ),
-    ensureOptInAndSend: async (
+  const ensureOptInAndSend = useInitialValue(() => {
+    return async function (
       message: SendMessage,
       options: SendOptions,
       callback: () => void
-    ) => {
+    ) {
       try {
         await atlasAiService.ensureAiFeatureAccess();
       } catch {
@@ -246,12 +205,59 @@ export const AssistantProvider: React.FunctionComponent<
       }
 
       await chat.sendMessage(message, options);
-    },
+    };
+  });
+
+  const createEntryPointHandler = useInitialValue(() => {
+    return function <T>(
+      entryPointName:
+        | 'explain plan'
+        | 'performance insights'
+        | 'connection error',
+      builder: (props: T) => EntryPointMessage
+    ) {
+      return function (props: T) {
+        const { prompt, metadata } = builder(props);
+        void ensureOptInAndSend(
+          {
+            text: prompt,
+            metadata: {
+              ...metadata,
+              source: entryPointName,
+            },
+          },
+          {},
+          () => {
+            openDrawer(ASSISTANT_DRAWER_ID);
+
+            track('Assistant Entry Point Used', {
+              source: entryPointName,
+            });
+          }
+        );
+      };
+    };
+  });
+
+  const assistantActionsContext = useInitialValue<AssistantActionsContextType>({
+    interpretExplainPlan: createEntryPointHandler(
+      'explain plan',
+      buildExplainPlanPrompt
+    ),
+    interpretConnectionError: createEntryPointHandler(
+      'connection error',
+      buildConnectionErrorPrompt
+    ),
+    tellMoreAboutInsight: createEntryPointHandler(
+      'performance insights',
+      buildProactiveInsightsPrompt
+    ),
+    ensureOptInAndSend,
   });
 
   return (
     <AssistantContext.Provider value={chat}>
-      <AssistantActionsContext.Provider value={assistantActionsContext.current}>
+      <AssistantActionsContext.Provider value={assistantActionsContext}>
         {children}
       </AssistantActionsContext.Provider>
     </AssistantContext.Provider>

packages/compass-assistant/src/compass-assistant-provider.tsx

@@ -1,7 +1,8 @@
-import React, { useContext, useRef } from 'react';
+import React, { useContext } from 'react';
 import type { CollectionTabPluginMetadata } from '../modules/collection-tab';
 import type { CompassPluginComponent } from '@mongodb-js/compass-app-registry';
 import type { CollectionSubtab } from '@mongodb-js/compass-workspaces';
+import { useInitialValue } from '@mongodb-js/compass-components';
 
 export interface CollectionTabPlugin {
   name: CollectionSubtab;
@@ -28,9 +29,9 @@ const CollectionTabComponentsContext =
 export const CollectionTabsProvider: React.FunctionComponent<
   Partial<CollectionTabComponentsProviderValue>
 > = ({ children, ...props }) => {
-  const valueRef = useRef({ ...defaultComponents, ...props });
+  const valueRef = useInitialValue({ ...defaultComponents, ...props });
   return (
-    <CollectionTabComponentsContext.Provider value={valueRef.current}>
+    <CollectionTabComponentsContext.Provider value={valueRef}>
       {children}
     </CollectionTabComponentsContext.Provider>
   );

packages/compass-collection/src/components/collection-tab-provider.tsx

@@ -1,11 +1,12 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { spacing } from '@leafygreen-ui/tokens';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { useId } from '@react-aria/utils';
 import { useDarkMode } from '../hooks/use-theme';
 
 import { Description, Icon } from './leafygreen';
+import { useCurrentValueRef } from '../hooks/use-current-value-ref';
 
 const buttonStyles = css({
   fontWeight: 'bold',
@@ -94,15 +95,14 @@ function Accordion({
 }: React.PropsWithChildren<AccordionProps>): React.ReactElement {
   const darkMode = useDarkMode();
   const [localOpen, setLocalOpen] = useState(_open ?? defaultOpen);
-  const setOpenRef = useRef(_setOpen);
-  setOpenRef.current = _setOpen;
+  const setOpenRef = useCurrentValueRef(_setOpen);
   const onOpenChange = useCallback(() => {
     setLocalOpen((prevValue) => {
       const newValue = !prevValue;
       setOpenRef.current?.(newValue);
       return newValue;
     });
-  }, []);
+  }, [setOpenRef]);
   const regionId = useId();
   const labelId = useId();
   const open = typeof _open !== 'undefined' ? _open : localOpen;