chore: add lint rules to treat missing hook dependencies as errors (#1420)

Tested on each of the spots that had hooks that were changed, seems good

Author: knudtty

.changeset/sweet-houses-scream.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+chore: treat missing react hook dependencies as errors

packages/app/.eslintrc.js

@@ -1,7 +1,12 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  plugins: ['simple-import-sort', '@typescript-eslint', 'prettier'],
+  plugins: [
+    'simple-import-sort',
+    '@typescript-eslint',
+    'prettier',
+    'react-hooks',
+  ],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
@@ -23,6 +28,7 @@ module.exports = {
     'react/display-name': 'off',
     'simple-import-sort/exports': 'error',
     'simple-import-sort/imports': 'error',
+    'react-hooks/exhaustive-deps': 'error',
     'no-console': ['error', { allow: ['warn', 'error'] }],
   },
   overrides: [

packages/app/src/AppNav.tsx

@@ -363,7 +363,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
     isLoading: isLogViewsLoading,
     refetch: refetchLogViews,
   } = useSavedSearches();
-  const logViews = logViewsData ?? [];
+  const logViews = useMemo(() => logViewsData ?? [], [logViewsData]);
 
   const updateDashboard = useUpdateDashboard();
   const updateLogView = useUpdateSavedSearch();
@@ -373,7 +373,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
     isLoading: isDashboardsLoading,
     refetch: refetchDashboards,
   } = useDashboards();
-  const dashboards = dashboardsData ?? [];
+  const dashboards = useMemo(() => dashboardsData ?? [], [dashboardsData]);
 
   const router = useRouter();
   const { pathname, query } = router;

packages/app/src/BenchmarkPage.tsx

@@ -176,13 +176,13 @@ function BenchmarkPage() {
     ) {
       return;
     }
-    setQueries(data.queries);
-    setConnections(data.connections);
+    setQueries(data.queries || []);
+    setConnections(data.connections || []);
     setIterations(data.iterations);
   };
 
-  const _queries = queries || [];
-  const _connections = connections || [];
+  const _queries = useMemo(() => queries || [], [queries]);
+  const _connections = useMemo(() => connections || [], [connections]);
 
   const { data: estimates } = useEstimates(
     { queries: _queries, connections: _connections },

packages/app/src/DBDashboardPage.tsx

@@ -149,7 +149,7 @@ const Tile = forwardRef(
           .getElementById(`chart-${chart.id}`)
           ?.scrollIntoView({ behavior: 'smooth' });
       }
-    }, []);
+    }, [chart.id, isHighlighed]);
 
     const [queriedConfig, setQueriedConfig] = useState<
       ChartConfigWithDateRange | undefined
@@ -776,6 +776,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
       where,
       whereLanguage,
       onTimeRangeSelect,
+      filterQueries,
     ],
   );
 

packages/app/src/DBSearchPage.tsx

@@ -530,6 +530,7 @@ function useSearchedConfigToChartConfig({
     where,
     whereLanguage,
     defaultOrderBy,
+    orderBy,
   ]);
 }
 
@@ -1072,7 +1073,7 @@ function DBSearchPage() {
       ...chartConfig,
       dateRange: searchedTimeRange,
     };
-  }, [me?.team, chartConfig, searchedTimeRange]);
+  }, [chartConfig, searchedTimeRange]);
 
   const displayedColumns = splitAndTrimWithBracket(
     dbSqlRowTableConfig?.select ??
@@ -1243,7 +1244,7 @@ function DBSearchPage() {
       onTimeRangeSelect(d1, d2);
       setIsLive(false);
     },
-    [onTimeRangeSelect],
+    [onTimeRangeSelect, setIsLive],
   );
 
   const filtersChartConfig = useMemo<ChartConfigWithDateRange>(() => {

packages/app/src/DOMPlayer.tsx

@@ -243,7 +243,7 @@ export default function DOMPlayer({
   }, [setPlayerTime]);
 
   const updatePlayerTimeRafRef = useRef(0);
-  const updatePlayerTime = () => {
+  const updatePlayerTime = useCallback(() => {
     if (
       replayer.current != null &&
       replayer.current.service.state.matches('playing')
@@ -257,15 +257,15 @@ export default function DOMPlayer({
     }
 
     updatePlayerTimeRafRef.current = requestAnimationFrame(updatePlayerTime);
-  };
+  }, []);
 
   // Update timestamp ui in timeline
   useEffect(() => {
     updatePlayerTimeRafRef.current = requestAnimationFrame(updatePlayerTime);
     return () => {
       cancelAnimationFrame(updatePlayerTimeRafRef.current);
     };
-  }, []);
+  }, [updatePlayerTime]);
 
   // Manage playback pause/play state, rrweb only
   useEffect(() => {
@@ -398,6 +398,7 @@ export default function DOMPlayer({
     isInitialEventsLoaded,
     playerState,
     play,
+    debug,
   ]);
 
   // Set player to the correct time based on focus
@@ -440,7 +441,7 @@ export default function DOMPlayer({
       }
       abort();
     };
-  }, []);
+  }, [abort]);
 
   const isLoading = isInitialEventsLoaded === false && isSearchResultsFetching;
   // TODO: Handle when ts is set to a value that's outside of this session

packages/app/src/Playbar.tsx

@@ -36,7 +36,7 @@ export default function Playbar({
       queryKey: ['PlayBar', queriedConfig],
     },
   );
-  const events: any[] = data?.data ?? [];
+  const events: any[] = useMemo(() => data?.data ?? [], [data?.data]);
 
   const markers = useMemo<PlaybarMarker[]>(() => {
     return uniqBy(

packages/app/src/PodDetailsSidePanel.tsx

@@ -320,10 +320,10 @@ export default function PodDetailsSidePanel({
     }
     return _where;
   }, [
-    nodeName,
     logSource,
     doesPrimaryOrSortingKeysContainServiceExpression,
     logServiceNames,
+    podName,
   ]);
 
   const handleClose = React.useCallback(() => {

packages/app/src/ServicesDashboardPage.tsx

@@ -906,7 +906,13 @@ function ServicesDashboardPage() {
     ) {
       onSubmit();
     }
-  }, [service, sourceId]);
+  }, [
+    service,
+    sourceId,
+    appliedConfig.service,
+    appliedConfig.source,
+    onSubmit,
+  ]);
 
   return (
     <Box p="sm">