eslint --fix fixes for missing dependencies for react hooks

client/app/components/EditParameterSettingsDialog.jsx

@@ -92,7 +92,7 @@ function EditParameterSettingsDialog(props) {
         setInitialQuery(query);
       });
     }
-  }, []);
+  }, [props.parameter]);
 
   function isFulfilled() {
     // name

client/app/components/TimeAgo.jsx

@@ -26,7 +26,7 @@ export function TimeAgo({ date, placeholder, autoUpdate }) {
       const timer = setInterval(forceUpdate, 30 * 1000);
       return () => clearInterval(timer);
     }
-  }, [autoUpdate]);
+  }, [autoUpdate, forceUpdate]);
 
   return (
     <Tooltip title={title}>

client/app/components/Timer.jsx

@@ -12,7 +12,7 @@ export function Timer({ from }) {
   useEffect(() => {
     const timer = setInterval(forceUpdate, 1000);
     return () => clearInterval(timer);
-  }, []);
+  }, [forceUpdate]);
 
   const diff = moment.now() - startTime;
   const format = diff > 1000 * 60 * 60 ? 'HH:mm:ss' : 'mm:ss'; // no HH under an hour

client/app/components/app-header/components/FavoritesDropdown.jsx

@@ -27,7 +27,7 @@ export default function FavoritesDropdown({ fetch, urlTemplate }) {
   }, [fetch]);
 
   // fetch items on init
-  useEffect(() => fetchItems(false), []);
+  useEffect(() => fetchItems(false), [fetchItems]);
 
   // fetch items on click
   const onVisibleChange = visible => visible && fetchItems();

client/app/components/permissions-editor/PermissionsEditorDialog.jsx

@@ -77,7 +77,7 @@ function UserSelect({ onSelect, shouldShowUser }) {
   useEffect(() => {
     setLoadingUsers(true);
     debouncedSearchUsers(searchTerm);
-  }, [searchTerm]);
+  }, [debouncedSearchUsers, searchTerm]);
 
   return (
     <Select
@@ -117,16 +117,16 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
       .then(setGrantees)
       .catch(() => notification.error('Failed to load grantees list'))
       .finally(() => setLoadingGrantees(false));
-  }, []);
+  }, [loadGrantees]);
 
   const userHasPermission = useCallback(
     user => (user.id === author.id || !!get(find(grantees, { id: user.id }), 'accessType')),
-    [grantees],
+    [author.id, grantees],
   );
 
   useEffect(() => {
     loadUsersWithPermissions();
-  }, [aclUrl]);
+  }, [aclUrl, loadUsersWithPermissions]);
 
   return (
     <Modal

client/app/pages/alert/components/MenuButton.jsx

@@ -34,7 +34,7 @@ export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
       maskClosable: true,
       autoFocusButton: null,
     });
-  }, []);
+  }, [doDelete]);
 
   return (
     <Dropdown

client/app/pages/alert/components/Rearm.jsx

@@ -28,7 +28,7 @@ function RearmByDuration({ value, onChange, editMode }) {
         break;
       }
     }
-  }, []);
+  }, [value]);
 
   if (!isNumber(count) || !isNumber(durationIdx)) {
     return null;

client/app/pages/home/Home.jsx

@@ -68,7 +68,7 @@ function FavoriteList({ title, resource, itemUrl, emptyState }) {
     resource.favorites().$promise
       .then(({ results }) => setItems(results))
       .finally(() => setLoading(false));
-  }, []);
+  }, [resource]);
 
   return (
     <>

client/app/visualizations/EditVisualizationDialog.jsx

@@ -84,7 +84,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
         originalOptions: options,
       };
     },
-    [visualization],
+    [data, isNew, visualization],
   );
 
   const [type, setType] = useState(defaultState.type);

client/app/visualizations/VisualizationRenderer.jsx

@@ -32,12 +32,12 @@ export function VisualizationRenderer(props) {
   // Reset local filters when query results updated
   useEffect(() => {
     setFilters(combineFilters(data.filters, props.filters));
-  }, [data]);
+  }, [data, props.filters]);
 
   // Update local filters when global filters changed
   useEffect(() => {
     setFilters(combineFilters(filters, props.filters));
-  }, [props.filters]);
+  }, [filters, props.filters]);
 
   const filteredData = useMemo(() => ({
     columns: data.columns,

client/app/visualizations/chart/Editor/SeriesSettings.jsx

@@ -89,7 +89,7 @@ export default function SeriesSettings({ options, data, onOptionsChange }) {
     const seriesOptions = [...series];
     seriesOptions.splice(newIndex, 0, ...seriesOptions.splice(oldIndex, 1));
     onOptionsChange({ seriesOptions: fromPairs(map(seriesOptions, ({ key }, zIndex) => ([key, { zIndex }]))) });
-  }, [series]);
+  }, [onOptionsChange, series]);
 
   const updateSeriesOption = useCallback((key, prop, value) => {
     onOptionsChange({

client/app/visualizations/chart/Renderer/CustomPlotlyChart.jsx

@@ -33,7 +33,7 @@ export default function CustomPlotlyChart({ options, data }) {
       });
       return unwatch;
     }
-  }, [container, plotlyData]);
+  }, [container, plotlyData, renderCustomChart]);
 
   // Cleanup when component destroyed
   useEffect(() => {

client/app/visualizations/choropleth/Editor/BoundsSettings.jsx

@@ -28,7 +28,7 @@ export default function BoundsSettings({ options, onOptionsChange }) {
       setBounds(newBounds);
       onOptionsChangeDebounced({ bounds: newBounds });
     }
-  }, [bounds]);
+  }, [bounds, onOptionsChangeDebounced]);
 
   return (
     <React.Fragment>

client/app/visualizations/choropleth/Renderer/index.jsx

@@ -58,7 +58,7 @@ export default function Renderer({ data, options, onOptionsChange }) {
         options, // detect changes for all options except bounds, but pass them all!
       );
     }
-  }, [map, geoJson, data, optionsWithoutBounds]);
+  }, [map, geoJson, data, optionsWithoutBounds, options]);
 
   useEffect(() => {
     if (map) {

client/app/visualizations/cohort/Cornelius.jsx

@@ -156,7 +156,7 @@ export default function Cornelius({ data, options }) {
   const maxRowLength = useMemo(() => min([
     max(map(data, d => d.length)) || 0,
     options.maxColumns + 1, // each row includes totals, but `maxColumns` is only for stage columns
-  ]), [data]);
+  ]), [data, options.maxColumns]);
 
   if (data.length === 0) {
     return null;

client/app/visualizations/funnel/Renderer/index.jsx

@@ -16,7 +16,7 @@ function generateRowKeyPrefix() {
 
 export default function Renderer({ data, options }) {
   const funnelData = useMemo(() => prepareData(data.rows, options), [data, options]);
-  const rowKeyPrefix = useMemo(() => generateRowKeyPrefix(), [funnelData]);
+  const rowKeyPrefix = useMemo(() => generateRowKeyPrefix(), []);
 
   const formatValue = useMemo(() => createNumberFormatter(options.numberFormat), [options.numberFormat]);