Clean up generic hooks, use react-use instead (elastic#53822)

As we recently added react-use as a dependency, makes sense to clean up those generic hooks from Kibana repo.

Removed custom hooks from kibana_react and other places:
useObservable
useUnmount
useShallowCompareEffect

react-use should be used instead:
import useObservable from 'react-use/lib/useObservable'

package.json

@@ -234,7 +234,7 @@
     "react-resize-detector": "^4.2.0",
     "react-router-dom": "^5.1.2",
     "react-sizeme": "^2.3.6",
-    "react-use": "^13.10.2",
+    "react-use": "^13.13.0",
     "reactcss": "1.2.3",
     "redux": "4.0.0",
     "redux-actions": "2.2.1",

src/legacy/ui/public/vis/editors/default/components/agg_params.tsx

@@ -20,10 +20,11 @@
 import React, { useReducer, useEffect, useMemo } from 'react';
 import { EuiForm, EuiAccordion, EuiSpacer, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import useUnmount from 'react-use/lib/useUnmount';
 
 import { VisState } from 'ui/vis';
-import { aggTypes, AggType, AggParam, AggConfig } from 'ui/agg_types/';
 import { IndexPattern } from 'ui/index_patterns';
+import { aggTypes, AggType, AggParam, AggConfig } from 'ui/agg_types/';
 
 import { DefaultEditorAggSelect } from './agg_select';
 import { DefaultEditorAggParam } from './agg_param';
@@ -44,9 +45,6 @@ import {
 } from './agg_params_state';
 import { editorConfigProviders } from '../../config/editor_config_providers';
 import { FixedParam, TimeIntervalParam, EditorParamConfig } from '../../config/types';
-// TODO: Below import is temporary, use `react-use` lib instead.
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { useUnmount } from '../../../../../../../plugins/kibana_react/public/util/use_unmount';
 import { AggGroupNames } from '../agg_groups';
 import { OnAggParamsChange } from './agg_common_props';
 

src/plugins/expressions/public/expression_renderer.tsx

@@ -22,9 +22,9 @@ import React from 'react';
 import classNames from 'classnames';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
+import useShallowCompareEffect from 'react-use/lib/useShallowCompareEffect';
 import { EuiLoadingChart, EuiProgress } from '@elastic/eui';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
-import { useShallowCompareEffect } from '../../kibana_react/public';
 import { IExpressionLoaderParams, IInterpreterRenderHandlers, RenderError } from './types';
 import { ExpressionAST } from '../common/types';
 import { ExpressionLoader } from './loader';

src/plugins/kibana_react/public/index.ts

@@ -25,4 +25,4 @@ export * from './overlays';
 export * from './ui_settings';
 export * from './field_icon';
 export * from './table_list_view';
-export { toMountPoint, useObservable, useShallowCompareEffect } from './util';
+export { toMountPoint } from './util';

src/plugins/kibana_react/public/ui_settings/use_ui_setting.test.tsx

@@ -24,10 +24,10 @@ import { useUiSetting$ } from './use_ui_setting';
 import { createKibanaReactContext } from '../context';
 import { KibanaServices } from '../context/types';
 import { Subject } from 'rxjs';
-import { useObservable } from '../util/use_observable';
 import { coreMock } from '../../../../core/public/mocks';
+import useObservable from 'react-use/lib/useObservable';
 
-jest.mock('../util/use_observable');
+jest.mock('react-use/lib/useObservable');
 const useObservableSpy = (useObservable as any) as jest.SpyInstance;
 useObservableSpy.mockImplementation((observable, def) => def);
 

src/plugins/kibana_react/public/ui_settings/use_ui_setting.ts

@@ -18,8 +18,8 @@
  */
 
 import { useCallback, useMemo } from 'react';
+import useObservable from 'react-use/lib/useObservable';
 import { useKibana } from '../context';
-import { useObservable } from '../util/use_observable';
 
 /**
  * Returns the current UI-settings value.

src/plugins/kibana_react/public/util/index.ts

@@ -17,7 +17,4 @@
  * under the License.
  */
 
-export * from './use_observable';
-export * from './use_unmount';
 export * from './react_mount';
-export * from './use_shallow_compare_effect';

x-pack/legacy/plugins/apm/public/context/LicenseContext/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { useObservable } from '../../../../../../../src/plugins/kibana_react/public';
+import useObservable from 'react-use/lib/useObservable';
 import { ILicense } from '../../../../../../plugins/licensing/public';
 import { useApmPluginContext } from '../../hooks/useApmPluginContext';
 import { InvalidLicenseNotification } from './InvalidLicenseNotification';

x-pack/legacy/plugins/infra/public/utils/use_kibana_ui_setting.ts

@@ -7,7 +7,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { npSetup } from 'ui/new_platform';
-import { useObservable } from './use_observable';
+import useObservable from 'react-use/lib/useObservable';
 
 /**
  * This hook behaves like a `useState` hook in that it provides a requested