upgrade eslint-plugin-react-hooks from 2.3.0 to 4.0.4

package.json

@@ -429,7 +429,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,
  ]);