chore: update watch uses to useWatch (#1516)

Fixes: HDX-3101

Co-authored-by: Brandon Pereira <[email protected]>

Author: teeohhem

.changeset/yellow-files-deny.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Update some forms to work better with React 19

packages/app/eslint.config.mjs

@@ -8,6 +8,8 @@ import prettierConfig from 'eslint-config-prettier';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import prettierPlugin from 'eslint-plugin-prettier/recommended';
 import playwrightPlugin from 'eslint-plugin-playwright';
+import reactHookFormPlugin from 'eslint-plugin-react-hook-form';
+import { fixupPluginRules } from '@eslint/compat';
 
 export default [
   js.configs.recommended,
@@ -39,6 +41,7 @@ export default [
       react: reactPlugin,
       'react-hooks': reactHooksPlugin,
       'simple-import-sort': simpleImportSort,
+      'react-hook-form': fixupPluginRules(reactHookFormPlugin), // not compatible with eslint 9 yet
     },
     rules: {
       ...nextPlugin.configs.recommended.rules,
@@ -81,6 +84,7 @@ export default [
       ],
       'react-hooks/exhaustive-deps': 'error',
       'no-console': ['error', { allow: ['warn', 'error'] }],
+      'react-hook-form/no-use-watch': 'error',
     },
     languageOptions: {
       parser: tseslint.parser,

packages/app/package.json

@@ -104,6 +104,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
+    "@eslint/compat": "^2.0.0",
     "@hookform/devtools": "^4.3.1",
     "@jedmao/location": "^3.0.0",
     "@playwright/test": "^1.57.0",
@@ -135,6 +136,7 @@
     "@types/sqlstring": "^2.3.2",
     "eslint-config-next": "^16.0.10",
     "eslint-plugin-playwright": "^2.4.0",
+    "eslint-plugin-react-hook-form": "^0.3.1",
     "eslint-plugin-storybook": "10.1.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",

packages/app/src/AuthPage.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { NextSeo } from 'next-seo';
 import cx from 'classnames';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import {
   Button,
   Notification,
@@ -45,7 +45,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
     handleSubmit,
     formState: { errors, isSubmitting },
     setError,
-    watch,
+    control,
   } = useForm<FormData>({
     reValidateMode: 'onSubmit',
   });
@@ -67,8 +67,16 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
     }
   }, [installation, isRegister, router]);
 
-  const currentPassword = watch('password', '');
-  const confirmPassword = watch('confirmPassword', '');
+  const currentPassword = useWatch({
+    control,
+    name: 'password',
+    defaultValue: '',
+  });
+  const confirmPassword = useWatch({
+    control,
+    name: 'confirmPassword',
+    defaultValue: '',
+  });
 
   const confirmPass = () => {
     return currentPassword === confirmPassword;

packages/app/src/ClickhousePage.tsx

@@ -1,12 +1,12 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import dynamic from 'next/dynamic';
 import {
   parseAsFloat,
   parseAsStringEnum,
   useQueryState,
   useQueryStates,
 } from 'nuqs';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { sql } from '@codemirror/lang-sql';
 import { format as formatSql } from '@hyperdx/common-utils/dist/sqlFormatter';
 import { DisplayType } from '@hyperdx/common-utils/dist/types';
@@ -436,17 +436,19 @@ function ClickhousePage() {
 
   const connection = _connection ?? connections?.[0]?.id ?? '';
 
-  const { control, watch } = useForm({
+  const { control } = useForm({
     values: {
       connection,
     },
   });
 
-  watch((data, { name, type }) => {
-    if (name === 'connection' && type === 'change') {
-      setConnection(data.connection ?? null);
+  const watchedConnection = useWatch({ control, name: 'connection' });
+
+  useEffect(() => {
+    if (watchedConnection !== connection) {
+      setConnection(watchedConnection ?? null);
     }
-  });
+  }, [watchedConnection, connection, setConnection]);
   const DEFAULT_INTERVAL = 'Past 1h';
   const [displayedTimeInputValue, setDisplayedTimeInputValue] =
     useState(DEFAULT_INTERVAL);

packages/app/src/DBChartPage.tsx

@@ -2,7 +2,7 @@ import { useCallback, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { parseAsJson, parseAsStringEnum, useQueryState } from 'nuqs';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { SavedChartConfig, SourceKind } from '@hyperdx/common-utils/dist/types';
 import {
@@ -57,7 +57,7 @@ function AIAssistant({
     'ai-assistant-alert-dismissed',
     false,
   );
-  const { control, watch, setValue, handleSubmit } = useForm<{
+  const { control, setValue, handleSubmit } = useForm<{
     text: string;
     source: string;
   }>({

packages/app/src/DBDashboardImportPage.tsx

@@ -3,7 +3,7 @@ import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { filter } from 'lodash';
-import { Controller, useForm } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -191,7 +191,7 @@ function Mapping({ input }: { input: Input }) {
   const { data: sources } = useSources();
   const [dashboardId] = useQueryParam('dashboardId', StringParam);
 
-  const { handleSubmit, getFieldState, control, setValue, watch } =
+  const { handleSubmit, getFieldState, control, setValue } =
     useForm<SourceResolutionFormValues>({
       resolver: zodResolver(SourceResolutionForm),
       defaultValues: {
@@ -226,16 +226,24 @@ function Mapping({ input }: { input: Input }) {
   }, [setValue, sources, input]);
 
   const isUpdatingRef = useRef(false);
-  watch((a, { name }) => {
+  const sourceMappings = useWatch({ control, name: 'sourceMappings' });
+  const prevSourceMappingsRef = useRef(sourceMappings);
+
+  useEffect(() => {
     if (isUpdatingRef.current) return;
-    if (!a.sourceMappings || !input.tiles) return;
-    const [, inputIdx] = name?.split('.') || [];
-    if (!inputIdx) return;
+    if (!sourceMappings || !input.tiles) return;
+
+    // Find which mapping changed
+    const changedIdx = sourceMappings.findIndex(
+      (mapping, idx) => mapping !== prevSourceMappingsRef.current?.[idx],
+    );
+    if (changedIdx === -1) return;
 
-    const idx = Number(inputIdx);
-    const inputTile = input.tiles[idx];
+    prevSourceMappingsRef.current = sourceMappings;
+
+    const inputTile = input.tiles[changedIdx];
     if (!inputTile) return;
-    const sourceId = a.sourceMappings[idx] ?? '';
+    const sourceId = sourceMappings[changedIdx] ?? '';
     const keysForTilesWithMatchingSource = input.tiles
       .map((tile, index) => ({ ...tile, index }))
       .filter(tile => tile.config.source === inputTile.config.source)
@@ -263,7 +271,7 @@ function Mapping({ input }: { input: Input }) {
     }
 
     isUpdatingRef.current = false;
-  });
+  }, [sourceMappings, input.tiles, input.filters, getFieldState, setValue]);
 
   const createDashboard = useCreateDashboard();
   const updateDashboard = useUpdateDashboard();

packages/app/src/DBDashboardPage.tsx

@@ -14,7 +14,7 @@ import produce from 'immer';
 import { parseAsString, useQueryState } from 'nuqs';
 import { ErrorBoundary } from 'react-error-boundary';
 import RGL, { WidthProvider } from 'react-grid-layout';
-import { Controller, useForm } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { TableConnection } from '@hyperdx/common-utils/dist/core/metadata';
 import { convertToDashboardTemplate } from '@hyperdx/common-utils/dist/core/utils';
 import {
@@ -644,7 +644,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
 
   const [isLive, setIsLive] = useState(false);
 
-  const { control, watch, setValue, handleSubmit } = useForm<{
+  const { control, setValue, handleSubmit } = useForm<{
     granularity: SQLInterval | 'auto';
     where: SearchCondition;
     whereLanguage: SearchConditionLanguage;
@@ -660,11 +660,14 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
       whereLanguage: (whereLanguage as SearchConditionLanguage) ?? 'lucene',
     },
   });
-  watch((data, { name, type }) => {
-    if (name === 'granularity' && type === 'change') {
-      setGranularity(data.granularity as SQLInterval);
+
+  const watchedGranularity = useWatch({ control, name: 'granularity' });
+
+  useEffect(() => {
+    if (watchedGranularity && watchedGranularity !== granularity) {
+      setGranularity(watchedGranularity as SQLInterval);
     }
-  });
+  }, [watchedGranularity, granularity, setGranularity]);
 
   const [displayedTimeInputValue, setDisplayedTimeInputValue] =
     useState('Past 1h');

packages/app/src/DBSearchPage.tsx

@@ -843,7 +843,6 @@ function DBSearchPage() {
 
   const {
     control,
-    watch,
     setValue,
     reset,
     handleSubmit,
@@ -1004,31 +1003,31 @@ function DBSearchPage() {
     onFilterChange: handleSetFilters,
   });
 
+  const watchedSource = useWatch({ control, name: 'source' });
+  const prevSourceRef = useRef(watchedSource);
+
   useEffect(() => {
-    const { unsubscribe } = watch((data, { name, type }) => {
-      // If the user changes the source dropdown, reset the select and orderby fields
-      // to match the new source selected
-      if (name === 'source' && type === 'change') {
-        const newInputSourceObj = inputSourceObjs?.find(
-          s => s.id === data.source,
+    // If the user changes the source dropdown, reset the select and orderby fields
+    // to match the new source selected
+    if (watchedSource !== prevSourceRef.current) {
+      prevSourceRef.current = watchedSource;
+      const newInputSourceObj = inputSourceObjs?.find(
+        s => s.id === watchedSource,
+      );
+      if (newInputSourceObj != null) {
+        // Save the selected source ID to localStorage
+        setLastSelectedSourceId(newInputSourceObj.id);
+
+        setValue(
+          'select',
+          newInputSourceObj?.defaultTableSelectExpression ?? '',
         );
-        if (newInputSourceObj != null) {
-          // Save the selected source ID to localStorage
-          setLastSelectedSourceId(newInputSourceObj.id);
-
-          setValue(
-            'select',
-            newInputSourceObj?.defaultTableSelectExpression ?? '',
-          );
-          // Clear all search filters
-          searchFilters.clearAllFilters();
-        }
+        // Clear all search filters
+        searchFilters.clearAllFilters();
       }
-    });
-    return () => unsubscribe();
+    }
   }, [
-    watch,
-    inputSourceObj,
+    watchedSource,
     setValue,
     inputSourceObjs,
     searchFilters,

packages/app/src/DBSearchPageAlertModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import router from 'next/router';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { NativeSelect, NumberInput } from 'react-hook-form-mantine';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -92,7 +92,7 @@ const AlertForm = ({
 }) => {
   const { data: source } = useSource({ id: sourceId });
 
-  const { control, handleSubmit, watch } = useForm<Alert>({
+  const { control, handleSubmit } = useForm<Alert>({
     defaultValues: defaultValues || {
       interval: '5m',
       threshold: 1,
@@ -106,8 +106,13 @@ const AlertForm = ({
     resolver: zodResolver(SavedSearchAlertFormSchema),
   });
 
-  const groupBy = watch('groupBy');
-  const thresholdType = watch('thresholdType');
+  const groupBy = useWatch({ control, name: 'groupBy' });
+  const thresholdType = useWatch({ control, name: 'thresholdType' });
+  const channelType = useWatch({ control, name: 'channel.type' });
+  const interval = useWatch({ control, name: 'interval' });
+  const groupByValue = useWatch({ control, name: 'groupBy' });
+  const threshold = useWatch({ control, name: 'threshold' });
+  const thresholdTypeValue = useWatch({ control, name: 'thresholdType' });
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -168,7 +173,7 @@ const AlertForm = ({
           <Text size="xxs" opacity={0.5} mb={4}>
             Send to
           </Text>
-          <AlertChannelForm control={control} type={watch('channel.type')} />
+          <AlertChannelForm control={control} type={channelType} />
         </Paper>
         {groupBy && thresholdType === AlertThresholdType.BELOW && (
           <MantineAlert
@@ -197,10 +202,10 @@ const AlertForm = ({
                 where={where}
                 whereLanguage={whereLanguage}
                 select={select}
-                interval={watch('interval')}
-                groupBy={watch('groupBy')}
-                threshold={watch('threshold')}
-                thresholdType={watch('thresholdType')}
+                interval={interval}
+                groupBy={groupByValue}
+                threshold={threshold}
+                thresholdType={thresholdTypeValue}
               />
             )}
           </Accordion.Panel>