[Lens] Clean and inline disabling of react-hooks/exhaustive-deps esli…

…nt rule (#70010)
elastic · Aug 6, 2020 · 626fbc2 · 626fbc2
1 parent aa75f80
commit 626fbc2
Show file tree

Hide file tree

Showing 15 changed files with 285 additions and 241 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -132,12 +132,6 @@ module.exports = {
         'react-hooks/rules-of-hooks': 'off',
       },
     },
-    {
-      files: ['x-pack/plugins/lens/**/*.{js,mjs,ts,tsx}'],
-      rules: {
-        'react-hooks/exhaustive-deps': 'off',
-      },
-    },
     {
       files: ['x-pack/plugins/ml/**/*.{js,mjs,ts,tsx}'],
       rules: {

diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx
@@ -163,7 +163,13 @@ export function App({
       filterSubscription.unsubscribe();
       timeSubscription.unsubscribe();
     };
-  }, [data.query.filterManager, data.query.timefilter.timefilter]);
+  }, [
+    data.query.filterManager,
+    data.query.timefilter.timefilter,
+    core.uiSettings,
+    data.query,
+    history,
+  ]);
 
   useEffect(() => {
     onAppLeave((actions) => {
@@ -210,57 +216,61 @@ export function App({
     ]);
   }, [core.application, core.chrome, core.http.basePath, state.persistedDoc]);
 
-  useEffect(() => {
-    if (docId && (!state.persistedDoc || state.persistedDoc.id !== docId)) {
-      setState((s) => ({ ...s, isLoading: true }));
-      docStorage
-        .load(docId)
-        .then((doc) => {
-          getAllIndexPatterns(
-            doc.state.datasourceMetaData.filterableIndexPatterns,
-            data.indexPatterns,
-            core.notifications
-          )
-            .then((indexPatterns) => {
-              // Don't overwrite any pinned filters
-              data.query.filterManager.setAppFilters(doc.state.filters);
-              setState((s) => ({
-                ...s,
-                isLoading: false,
-                persistedDoc: doc,
-                lastKnownDoc: doc,
-                query: doc.state.query,
-                indexPatternsForTopNav: indexPatterns,
-              }));
-            })
-            .catch(() => {
-              setState((s) => ({ ...s, isLoading: false }));
-
-              redirectTo();
-            });
-        })
-        .catch(() => {
-          setState((s) => ({ ...s, isLoading: false }));
-
-          core.notifications.toasts.addDanger(
-            i18n.translate('xpack.lens.app.docLoadingError', {
-              defaultMessage: 'Error loading saved document',
-            })
-          );
-
-          redirectTo();
-        });
-    }
-  }, [
-    core.notifications,
-    data.indexPatterns,
-    data.query.filterManager,
-    docId,
-    // TODO: These dependencies are changing too often
-    // docStorage,
-    // redirectTo,
-    // state.persistedDoc,
-  ]);
+  useEffect(
+    () => {
+      if (docId && (!state.persistedDoc || state.persistedDoc.id !== docId)) {
+        setState((s) => ({ ...s, isLoading: true }));
+        docStorage
+          .load(docId)
+          .then((doc) => {
+            getAllIndexPatterns(
+              doc.state.datasourceMetaData.filterableIndexPatterns,
+              data.indexPatterns,
+              core.notifications
+            )
+              .then((indexPatterns) => {
+                // Don't overwrite any pinned filters
+                data.query.filterManager.setAppFilters(doc.state.filters);
+                setState((s) => ({
+                  ...s,
+                  isLoading: false,
+                  persistedDoc: doc,
+                  lastKnownDoc: doc,
+                  query: doc.state.query,
+                  indexPatternsForTopNav: indexPatterns,
+                }));
+              })
+              .catch(() => {
+                setState((s) => ({ ...s, isLoading: false }));
+
+                redirectTo();
+              });
+          })
+          .catch(() => {
+            setState((s) => ({ ...s, isLoading: false }));
+
+            core.notifications.toasts.addDanger(
+              i18n.translate('xpack.lens.app.docLoadingError', {
+                defaultMessage: 'Error loading saved document',
+              })
+            );
+
+            redirectTo();
+          });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      core.notifications,
+      data.indexPatterns,
+      data.query.filterManager,
+      docId,
+      // TODO: These dependencies are changing too often
+      // docStorage,
+      // redirectTo,
+      // state.persistedDoc,
+    ]
+  );
 
   const runSave = async (
     saveProps: Omit<OnSaveProps, 'onTitleDuplicate' | 'newDescription'> & {

diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
@@ -160,6 +160,7 @@ export function DatatableComponent(props: DatatableRenderProps) {
     formatters[column.id] = props.formatFactory(column.formatHint);
   });
 
+  const { onClickValue } = props;
   const handleFilterClick = useMemo(
     () => (field: string, value: unknown, colIndex: number, negate: boolean = false) => {
       const col = firstTable.columns[colIndex];
@@ -180,9 +181,9 @@ export function DatatableComponent(props: DatatableRenderProps) {
         ],
         timeFieldName,
       };
-      props.onClickValue(desanitizeFilterContext(data));
+      onClickValue(desanitizeFilterContext(data));
     },
-    [firstTable]
+    [firstTable, onClickValue]
   );
 
   const bucketColumns = firstTable.columns

diff --git a/x-pack/plugins/lens/public/debounced_component/debounced_component.tsx b/x-pack/plugins/lens/public/debounced_component/debounced_component.tsx
@@ -17,13 +17,11 @@ export function debouncedComponent<TProps>(component: FunctionComponent<TProps>,
 
   return (props: TProps) => {
     const [cachedProps, setCachedProps] = useState(props);
-    const debouncePropsChange = debounce(setCachedProps, delay);
-    const delayRender = useMemo(() => debouncePropsChange, []);
+    const debouncePropsChange = useMemo(() => debounce(setCachedProps, delay), [setCachedProps]);
 
     // cancel debounced prop change if component has been unmounted in the meantime
-    useEffect(() => () => debouncePropsChange.cancel(), []);
-
-    delayRender(props);
+    useEffect(() => () => debouncePropsChange.cancel(), [debouncePropsChange]);
+    debouncePropsChange(props);
 
     return React.createElement(MemoizedComponent, cachedProps);
   };

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
@@ -39,29 +39,29 @@ function LayerPanels(
   } = props;
   const setVisualizationState = useMemo(
     () => (newState: unknown) => {
-      props.dispatch({
+      dispatch({
         type: 'UPDATE_VISUALIZATION_STATE',
         visualizationId: activeVisualization.id,
         newState,
         clearStagedPreview: false,
       });
     },
-    [props.dispatch, activeVisualization]
+    [dispatch, activeVisualization]
   );
   const updateDatasource = useMemo(
     () => (datasourceId: string, newState: unknown) => {
-      props.dispatch({
+      dispatch({
         type: 'UPDATE_DATASOURCE_STATE',
         updater: () => newState,
         datasourceId,
         clearStagedPreview: false,
       });
     },
-    [props.dispatch]
+    [dispatch]
   );
   const updateAll = useMemo(
     () => (datasourceId: string, newDatasourceState: unknown, newVisualizationState: unknown) => {
-      props.dispatch({
+      dispatch({
         type: 'UPDATE_STATE',
         subType: 'UPDATE_ALL_STATES',
         updater: (prevState) => {
@@ -83,7 +83,7 @@ function LayerPanels(
         },
       });
     },
-    [props.dispatch]
+    [dispatch]
   );
   const layerIds = activeVisualization.getLayerIds(visualizationState);
 

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx
@@ -27,16 +27,17 @@ interface DataPanelWrapperProps {
 }
 
 export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
+  const { dispatch, activeDatasource } = props;
   const setDatasourceState: StateSetter<unknown> = useMemo(
     () => (updater) => {
-      props.dispatch({
+      dispatch({
         type: 'UPDATE_DATASOURCE_STATE',
         updater,
-        datasourceId: props.activeDatasource!,
+        datasourceId: activeDatasource!,
         clearStagedPreview: true,
       });
     },
-    [props.dispatch, props.activeDatasource]
+    [dispatch, activeDatasource]
   );
 
   const datasourceProps: DatasourceDataPanelProps = {