upgrade eslint-plugin-react-hooks from 2.3.0 to 4.0.4 (#68295) (#68410)

* updates `eslint-plugin-react-hooks` from `v2.3.0` to `v4.0.4`. 
* Disable rules on failing lines

package.json

@@ -423,7 +423,7 @@
     "eslint-plugin-prefer-object-spread": "^1.2.1",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "eslint-plugin-react-perf": "^3.2.3",
     "exit-hook": "^2.2.0",
     "faker": "1.1.0",

src/plugins/charts/public/services/theme/theme.ts

@@ -42,8 +42,10 @@ export class ThemeService {
 
   /** A React hook for consuming the charts theme */
   public useChartsTheme = () => {
+    /* eslint-disable-next-line react-hooks/rules-of-hooks */
     const [value, update] = useState(this.chartsDefaultTheme);
 
+    /* eslint-disable-next-line react-hooks/rules-of-hooks */
     useEffect(() => {
       const s = this.chartsTheme$.subscribe(update);
       return () => s.unsubscribe();

src/plugins/console/public/application/containers/editor/editor.tsx

@@ -47,6 +47,7 @@ export const Editor = memo(({ loading }: Props) => {
     INITIAL_PANEL_WIDTH,
   ]);
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const onPanelWidthChange = useCallback(
     debounce((widths: number[]) => {
       storage.set(StorageKeys.WIDTH, widths);

src/plugins/console/public/application/hooks/use_save_current_text_object.ts

@@ -32,6 +32,7 @@ export const useSaveCurrentTextObject = () => {
 
   const { currentTextObject } = useEditorReadContext();
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   return useCallback(
     throttle(
       (text: string) => {

src/plugins/data/public/ui/search_bar/create_search_bar.tsx

@@ -135,12 +135,14 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
         queryRef.current = props.query;
         setQuery(props.query || defaultQuery);
       }
+      /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [defaultQuery, props.query]);
 
     useEffect(() => {
       if (props.onQuerySubmit !== onQuerySubmitRef.current) {
         onQuerySubmitRef.current = props.onQuerySubmit;
       }
+      /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [props.onQuerySubmit]);
 
     // handle service state updates.

src/plugins/vis_default_editor/public/components/controls/has_extended_bounds.tsx

@@ -38,6 +38,7 @@ function HasExtendedBoundsParamEditor(props: AggParamEditorProps<boolean>) {
 
       setValue(value && agg.params.min_doc_count);
     }
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [agg.params.min_doc_count, setValue, value]);
 
   return (

src/plugins/vis_default_editor/public/components/controls/utils/agg_utils.ts

@@ -33,6 +33,7 @@ const CUSTOM_METRIC = {
 };
 
 function useCompatibleAggCallback(aggFilter: AggFilter) {
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   return useCallback(isCompatibleAggregation(aggFilter), [aggFilter]);
 }
 

src/plugins/vis_type_timelion/public/components/panel.tsx

@@ -102,6 +102,7 @@ function Panel({ interval, seriesList, renderComplete }: PanelProps) {
     [chartElem]
   );
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const highlightSeries = useCallback(
     debounce(({ currentTarget }: JQuery.TriggeredEvent) => {
       const id = Number(currentTarget.getAttribute(SERIES_ID_ATTR));
@@ -295,6 +296,7 @@ function Panel({ interval, seriesList, renderComplete }: PanelProps) {
     [plot, legendValueNumbers, unhighlightSeries, legendCaption]
   );
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const debouncedSetLegendNumbers = useCallback(
     debounce(setLegendNumbers, DEBOUNCE_DELAY, {
       maxWait: DEBOUNCE_DELAY,

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.tsx

@@ -79,6 +79,7 @@ export function AgentConfigurationCreateEdit({
       ..._newConfig,
       settings: existingConfig?.settings || {},
     }));
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [existingConfig]);
 
   // update newConfig when existingConfig has loaded

x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx

@@ -109,10 +109,12 @@ export const TransactionDistribution: FunctionComponent<Props> = (
     bucketIndex,
   } = props;
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const formatYShort = useCallback(getFormatYShort(transactionType), [
     transactionType,
   ]);
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const formatYLong = useCallback(getFormatYLong(transactionType), [
     transactionType,
   ]);

x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx

@@ -66,6 +66,7 @@ export const TransactionActionMenu: FunctionComponent<Props> = ({
         { key: 'transaction.name', value: transaction?.transaction.name },
         { key: 'transaction.type', value: transaction?.transaction.type },
       ].filter((filter): filter is Filter => typeof filter.value === 'string'),
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [transaction]
   );
 

x-pack/plugins/apm/public/hooks/useFetcher.test.tsx

@@ -106,6 +106,7 @@ describe('useFetcher', () => {
       jest.useFakeTimers();
 
       const hook = renderHook(
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
         ({ callback, args }) => useFetcher(callback, args),
         {
           initialProps: {
@@ -165,6 +166,7 @@ describe('useFetcher', () => {
 
     it('should return the same object reference when data is unchanged between rerenders', async () => {
       const hook = renderHook(
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
         ({ callback, args }) => useFetcher(callback, args),
         {
           initialProps: {

x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx

@@ -41,6 +41,7 @@ export const MetricsAlertDropdown = () => {
         <FormattedMessage id="xpack.infra.alerting.manageAlerts" defaultMessage="Manage alerts" />
       </EuiContextMenuItem>,
     ];
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [kibana.services]);
 
   return (

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx

@@ -90,6 +90,7 @@ export const Expressions: React.FC<Props> = (props) => {
         aggregation: 'avg',
       };
     }
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [alertsContext.metadata]);
 
   const updateParams = useCallback(
@@ -109,6 +110,7 @@ export const Expressions: React.FC<Props> = (props) => {
       timeUnit: timeUnit ?? defaultExpression.timeUnit,
     });
     setAlertParams('criteria', exp);
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [setAlertParams, alertParams.criteria, timeSize, timeUnit]);
 
   const removeExpression = useCallback(
@@ -119,6 +121,7 @@ export const Expressions: React.FC<Props> = (props) => {
         setAlertParams('criteria', exp);
       }
     },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [setAlertParams, alertParams.criteria]
   );
 
@@ -133,6 +136,7 @@ export const Expressions: React.FC<Props> = (props) => {
     [setAlertParams, derivedIndexPattern]
   );
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const debouncedOnFilterChange = useCallback(debounce(onFilterChange, FILTER_TYPING_DEBOUNCE_MS), [
     onFilterChange,
   ]);
@@ -162,6 +166,7 @@ export const Expressions: React.FC<Props> = (props) => {
       setTimeSize(ts || undefined);
       setAlertParams('criteria', criteria);
     },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [alertParams.criteria, setAlertParams]
   );
 
@@ -175,6 +180,7 @@ export const Expressions: React.FC<Props> = (props) => {
       setTimeUnit(tu as TimeUnit);
       setAlertParams('criteria', criteria);
     },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [alertParams.criteria, setAlertParams]
   );
 

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx

@@ -90,6 +90,7 @@ export const ExpressionChart: React.FC<Props> = ({
       : (value: number) => `${value}`;
   }, [data]);
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const yAxisFormater = useCallback(createFormatterForMetric(metric), [expression]);
 
   if (loading || !data) {

x-pack/plugins/infra/public/components/alerting/inventory/alert_dropdown.tsx

@@ -41,6 +41,7 @@ export const InventoryAlertDropdown = () => {
         <FormattedMessage id="xpack.infra.alerting.manageAlerts" defaultMessage="Manage alerts" />
       </EuiContextMenuItem>,
     ];
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [kibana.services]);
 
   return (

x-pack/plugins/infra/public/components/alerting/inventory/expression.tsx

@@ -117,6 +117,7 @@ export const Expressions: React.FC<Props> = (props) => {
       timeUnit: timeUnit ?? defaultExpression.timeUnit,
     });
     setAlertParams('criteria', exp);
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [setAlertParams, alertParams.criteria, timeSize, timeUnit]);
 
   const removeExpression = useCallback(
@@ -141,6 +142,7 @@ export const Expressions: React.FC<Props> = (props) => {
     [derivedIndexPattern, setAlertParams]
   );
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const debouncedOnFilterChange = useCallback(debounce(onFilterChange, FILTER_TYPING_DEBOUNCE_MS), [
     onFilterChange,
   ]);

x-pack/plugins/infra/public/components/alerting/logs/expression_editor/editor.tsx

@@ -137,6 +137,7 @@ export const Editor: React.FC<Props> = (props) => {
     } else {
       return [];
     }
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [sourceStatus]);
 
   const updateCount = useCallback(
@@ -176,6 +177,7 @@ export const Editor: React.FC<Props> = (props) => {
       ? [...alertParams.criteria, DEFAULT_CRITERIA]
       : [DEFAULT_CRITERIA];
     setAlertParams('criteria', nextCriteria);
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [alertParams, setAlertParams]);
 
   const removeCriterion = useCallback(
@@ -185,6 +187,7 @@ export const Editor: React.FC<Props> = (props) => {
       });
       setAlertParams('criteria', nextCriteria);
     },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [alertParams, setAlertParams]
   );
 

x-pack/plugins/infra/public/components/header/header.tsx

@@ -31,10 +31,12 @@ export const Header = ({ breadcrumbs = [], readOnlyBadge = false }: HeaderProps)
 
   const setBreadcrumbs = useCallback(() => {
     return chrome?.setBreadcrumbs(breadcrumbs || []);
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [breadcrumbs, chrome]);
 
   const setBadge = useCallback(() => {
     return chrome?.setBadge(badge);
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [badge, chrome]);
 
   useEffect(() => {

x-pack/plugins/infra/public/containers/logs/log_entries/index.ts

@@ -269,6 +269,7 @@ const useFetchEntriesEffect = (
     }
   };
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const fetchNewerEntries = useCallback(
     throttle(() => runFetchMoreEntriesRequest(ShouldFetchMoreEntries.After), 500),
     [props, state.bottomCursor]
@@ -330,10 +331,12 @@ const useFetchEntriesEffect = (
     props.timestampsLastUpdate,
   ];
 
+  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(fetchNewEntriesEffect, fetchNewEntriesEffectDependencies);
   useEffect(fetchMoreEntriesEffect, fetchMoreEntriesEffectDependencies);
   useEffect(streamEntriesEffect, streamEntriesEffectDependencies);
   useEffect(expandRangeEffect, expandRangeEffectDependencies);
+  /* eslint-enable react-hooks/exhaustive-deps */
 
   return { fetchNewerEntries, checkForNewEntries: runFetchNewEntriesRequest };
 };

x-pack/plugins/infra/public/containers/logs/log_filter/log_filter_state.ts

@@ -82,6 +82,7 @@ export const useLogFilterState: (props: {
     }
 
     return true;
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [filterQueryDraft]);
 
   const serializedFilterQuery = useMemo(() => (filterQuery ? filterQuery.serializedQuery : null), [

x-pack/plugins/infra/public/containers/logs/log_source/log_source.ts

@@ -78,6 +78,7 @@ export const useLogSource = ({
     [sourceId, fetch]
   );
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const logIndicesExist = useMemo(() => (sourceStatus?.logIndexNames?.length ?? 0) > 0, [
     sourceStatus,
   ]);
@@ -87,6 +88,7 @@ export const useLogSource = ({
       fields: sourceStatus?.logIndexFields ?? [],
       title: sourceConfiguration?.configuration.name ?? 'unknown',
     }),
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [sourceConfiguration, sourceStatus]
   );
 

x-pack/plugins/infra/public/containers/source/use_source_via_http.ts

@@ -76,6 +76,7 @@ export const useSourceViaHttp = ({
         title: pickIndexPattern(response?.source, indexType),
       };
     },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [response, type]
   );
 

x-pack/plugins/infra/public/hooks/use_bulk_get_saved_object.tsx

@@ -35,6 +35,7 @@ export const useBulkGetSavedObject = (type: string) => {
       };
       fetchData();
     },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [type, kibana.services.savedObjects]
   );
 

x-pack/plugins/infra/public/hooks/use_create_saved_object.tsx

@@ -40,6 +40,7 @@ export const useCreateSavedObject = (type: string) => {
       };
       save();
     },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [type, kibana.services.savedObjects]
   );
 

x-pack/plugins/infra/public/hooks/use_delete_saved_object.tsx

@@ -29,6 +29,7 @@ export const useDeleteSavedObject = (type: string) => {
       };
       dobj();
     },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [type, kibana.services.savedObjects]
   );
 

x-pack/plugins/infra/public/hooks/use_find_saved_object.tsx

@@ -37,6 +37,7 @@ export const useFindSavedObject = <SavedObjectType extends SavedObjectAttributes
       };
       fetchData();
     },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [type, kibana.services.savedObjects]
   );
 

x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_results_content.tsx

@@ -68,6 +68,7 @@ export const LogEntryCategoriesResultsContent: React.FunctionComponent = () => {
         title: loadDataErrorTitle,
       });
     },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [services.notifications]
   );
 

x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx

@@ -127,6 +127,7 @@ export const LogEntryRateResultsContent: React.FunctionComponent = () => {
     [setAutoRefresh]
   );
 
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const hasResults = useMemo(() => (logEntryRate?.histogramBuckets?.length ?? 0) > 0, [
     logEntryRate,
   ]);

x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx

@@ -29,6 +29,7 @@ export const AnomaliesTableExpandedRow: React.FunctionComponent<{
   const logEntryRateSeries = useMemo(
     () =>
       results?.histogramBuckets ? getLogEntryRateSeriesForPartition(results, partitionId) : [],
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [results, partitionId]
   );
   const anomalyAnnotations = useMemo(
@@ -41,13 +42,15 @@ export const AnomaliesTableExpandedRow: React.FunctionComponent<{
             major: [],
             critical: [],
           },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [results, partitionId]
   );
   const totalNumberOfLogEntries = useMemo(
     () =>
       results?.histogramBuckets
         ? getTotalNumberOfLogEntriesForPartition(results, partitionId)
         : undefined,
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [results, partitionId]
   );
   return (

x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx

@@ -42,6 +42,7 @@ export const LogsSettingsPage = () => {
 
   const availableFields = useMemo(
     () => sourceStatus?.logIndexFields.map((field) => field.name) ?? [],
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
     [sourceStatus]
   );
 

x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx

@@ -28,6 +28,7 @@ const MODAL_MARGIN = 25;
 export const PageViewLogInContext: React.FC = () => {
   const { sourceConfiguration } = useLogSourceContext();
   const { textScale, textWrap } = useContext(LogViewConfiguration.Context);
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
   const columnConfigurations = useMemo(() => sourceConfiguration?.configuration.logColumns ?? [], [
     sourceConfiguration,
   ]);