fix: add react-hooks eslint to catch pitfalls (#1661)

Had a couple of files with large fixes, I tested AutocompleteInput.tsx and SessionSubpanel.tsx quite a bit. Tested most others as well. I didn't act on some due to either a) correct usage or b) they are stable and I don't want to alter it. In both those cases, I added `eslint-disable-next-line` before each relevant line

References HDX-2955

Author: knudtty

.changeset/rotten-kings-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: add react-hooks-eslint-plugin and fix issues across app

packages/app/eslint.config.mjs

@@ -50,6 +50,8 @@ export default [
     rules: {
       ...nextPlugin.configs.recommended.rules,
       ...nextPlugin.configs['core-web-vitals'].rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+      'react-hooks/set-state-in-effect': 'warn',
       '@typescript-eslint/ban-ts-comment': 'warn',
       '@typescript-eslint/no-empty-function': 'warn',
       '@typescript-eslint/no-explicit-any': 'off',

packages/app/package.json

@@ -137,6 +137,7 @@
     "eslint-config-next": "^16.0.10",
     "eslint-plugin-playwright": "^2.4.0",
     "eslint-plugin-react-hook-form": "^0.3.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-storybook": "10.1.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",

packages/app/src/AutocompleteInput.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Fuse from 'fuse.js';
 import { Popover, Textarea, UnstyledButton } from '@mantine/core';
 
@@ -46,9 +46,19 @@ export default function AutocompleteInput({
 }) {
   const suggestionsLimit = 10;
 
-  const [isSearchInputFocused, setIsSearchInputFocused] = useState(false);
+  const [isSearchInputFocused, _setIsSearchInputFocused] = useState(false);
   const [isInputDropdownOpen, setIsInputDropdownOpen] = useState(false);
-  const [showSearchHistory, setShowSearchHistory] = useState(false);
+  const setIsSearchInputFocused = useCallback(
+    (state: boolean) => {
+      _setIsSearchInputFocused(state);
+      setIsInputDropdownOpen(state);
+    },
+    [_setIsSearchInputFocused],
+  );
+  const [rightSectionWidth, setRightSectionWidth] = useState<number | 'auto'>(
+    'auto',
+  );
+  const [inputWidth, setInputWidth] = useState<number>(720);
 
   const [selectedAutocompleteIndex, setSelectedAutocompleteIndex] =
     useState(-1);
@@ -67,25 +77,11 @@ export default function AutocompleteInput({
     });
   }, [queryHistory, queryHistoryType]);
 
-  useEffect(() => {
-    if (isSearchInputFocused) {
-      setIsInputDropdownOpen(true);
-    }
-  }, [isSearchInputFocused]);
-
-  useEffect(() => {
-    // only show search history when: 1.no input, 2.has search type, 3.has history list
-    if (
-      value != null &&
-      value.length === 0 &&
-      queryHistoryList.length > 0 &&
-      queryHistoryType
-    ) {
-      setShowSearchHistory(true);
-    } else {
-      setShowSearchHistory(false);
-    }
-  }, [value, queryHistoryType, queryHistoryList]);
+  const showSearchHistory =
+    value != null &&
+    value.length === 0 &&
+    queryHistoryList.length > 0 &&
+    queryHistoryType;
 
   const fuse = useMemo(
     () =>
@@ -128,6 +124,14 @@ export default function AutocompleteInput({
     inputRef.current?.focus();
   };
   const ref = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      setRightSectionWidth(ref.current.clientWidth);
+    }
+    if (inputRef.current) {
+      setInputWidth(inputRef.current.clientWidth);
+    }
+  }, [language, onLanguageChange, inputRef]);
 
   return (
     <Popover
@@ -141,10 +145,7 @@ export default function AutocompleteInput({
       closeOnEscape
       styles={{
         dropdown: {
-          maxWidth:
-            (inputRef.current?.clientWidth || 0) > 300
-              ? inputRef.current?.clientWidth
-              : 720,
+          maxWidth: inputWidth > 300 ? inputWidth : 720,
           width: '100%',
           zIndex,
         },
@@ -242,7 +243,7 @@ export default function AutocompleteInput({
               }
             }
           }}
-          rightSectionWidth={ref.current?.clientWidth ?? 'auto'}
+          rightSectionWidth={rightSectionWidth}
           rightSection={
             language != null && onLanguageChange != null ? (
               <div ref={ref}>

packages/app/src/DBChartPage.tsx

@@ -164,6 +164,7 @@ function AIAssistant({
       </Group>
       <Collapse in={opened}>
         {opened && (
+          // eslint-disable-next-line react-hooks/refs
           <form onSubmit={handleSubmit(onSubmit)}>
             <Group mb="md">
               <SourceSelectControlled

packages/app/src/DBSearchPage.tsx

@@ -764,19 +764,16 @@ export function useDefaultOrderBy(sourceID: string | undefined | null) {
   const { data: source } = useSource({ id: sourceID });
   const { data: tableMetadata } = useTableMetadata(tcFromSource(source));
 
-  // If no source, return undefined so that the orderBy is not set incorrectly
-  if (!source) return undefined;
-
   // When source changes, make sure select and orderby fields are set to default
-  return useMemo(
-    () =>
-      optimizeDefaultOrderBy(
-        source?.timestampValueExpression ?? '',
-        source?.displayedTimestampValueExpression,
-        tableMetadata?.sorting_key,
-      ),
-    [source, tableMetadata],
-  );
+  return useMemo(() => {
+    // If no source, return undefined so that the orderBy is not set incorrectly
+    if (!source) return undefined;
+    return optimizeDefaultOrderBy(
+      source?.timestampValueExpression ?? '',
+      source?.displayedTimestampValueExpression,
+      tableMetadata?.sorting_key,
+    );
+  }, [source, tableMetadata]);
 }
 
 // This is outside as it needs to be a stable reference

packages/app/src/DOMPlayer.tsx

@@ -264,6 +264,7 @@ export default function DOMPlayer({
       );
     }
 
+    // eslint-disable-next-line react-hooks/immutability
     updatePlayerTimeRafRef.current = requestAnimationFrame(updatePlayerTime);
   }, []);
 

packages/app/src/LandingHeader.tsx

@@ -12,7 +12,7 @@ export default function LandingHeader({
   activeKey: string;
   fixed?: boolean;
 }) {
-  const Wordmark = useWordmark();
+  const wordmark = useWordmark();
   const { data: me } = api.useMe();
   const isLoggedIn = Boolean(me);
 
@@ -36,7 +36,7 @@ export default function LandingHeader({
         <Container fluid px="xl" py="md">
           <Group justify="space-between" align="center">
             <Link href="/" style={{ textDecoration: 'none' }}>
-              <Wordmark />
+              {wordmark}
             </Link>
 
             <Burger

packages/app/src/OnboardingChecklist.tsx

@@ -20,7 +20,6 @@ import {
 } from '@tabler/icons-react';
 
 import { useQueriedChartConfig } from './hooks/useChartConfig';
-import { useLogomark } from './theme/ThemeProvider';
 import api from './api';
 import { useConnections } from './connection';
 import { useSources } from './source';
@@ -36,12 +35,12 @@ interface OnboardingStep {
   onClick?: () => void;
 }
 
+const NOW = Date.now();
 const OnboardingChecklist = ({
   onAddDataClick,
 }: {
   onAddDataClick?: () => void;
 }) => {
-  const Logomark = useLogomark();
   const [isCollapsed, setIsCollapsed] = useLocalStorage(
     'onboardingChecklistCollapsed',
     false,
@@ -55,7 +54,7 @@ const OnboardingChecklist = ({
   // Check if team is new (less than 3 days old)
   const isNewTeam = useMemo(() => {
     if (!team?.createdAt) return false;
-    const threeDaysAgo = new Date(Date.now() - 1000 * 60 * 60 * 24 * 3);
+    const threeDaysAgo = new Date(NOW - 1000 * 60 * 60 * 24 * 3);
     return new Date(team.createdAt) > threeDaysAgo;
   }, [team]);