[chore] Import common react-use methods in shared bundle (#218640)

## Summary

Similar to #217034, #217202 and #217467 this time applied to
`react-use`.

This is a slightly different approach than #217034 as we're caching here
only the most common/frequently used methods from the `react-use`
library and leaving the rest to be loaded within the specific plugin
chunks.

What this PR does it fundamentally:
* adds `7.x kb` to the shared bundle
* overall the startup bundle size shrinks about `3.5 kb`
* the async bundle size shrinks of about `350 kb` (mainly due to 3
imports which were targeting `react-use/lib`).

An alternative approach would be to just fix the async import strings in
there, but I thought to it was worth it to make the long step here.
Feedback appreciated.

.eslintrc.js

@@ -256,6 +256,10 @@ const RESTRICTED_IMPORTS = [
     name: 'react-use',
     message: 'Please use react-use/lib/{method} instead.',
   },
+  {
+    name: 'react-use/lib',
+    message: 'Please use react-use/lib/{method} instead.',
+  },
   {
     name: 'react-router-dom',
     importNames: ['Router', 'Switch', 'Route'],

examples/portable_dashboards_example/public/app.tsx

@@ -9,7 +9,7 @@
 
 import ReactDOM from 'react-dom';
 import React, { useMemo } from 'react';
-import { useAsync } from 'react-use/lib';
+import useAsync from 'react-use/lib/useAsync';
 import { Redirect } from 'react-router-dom';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { AppMountParameters, CoreStart } from '@kbn/core/public';

packages/kbn-optimizer/limits.yml

@@ -90,7 +90,7 @@ pageLoadAssetSize:
   lens: 76079
   licenseManagement: 41817
   licensing: 29004
-  links: 8000
+  links: 8200
   lists: 22900
   logsDataAccess: 16759
   logsShared: 281060

src/platform/packages/private/kbn-ui-shared-deps-npm/BUILD.bazel

@@ -58,6 +58,7 @@ RUNTIME_DEPS = [
   "@npm//react-router-dom",
   "@npm//react-router-dom-v5-compat",
   "@npm//react-router",
+  "@npm//react-use",
   "@npm//react",
   "@npm//rxjs",
   "@npm//styled-components",

src/platform/packages/private/kbn-ui-shared-deps-src/src/definitions.js

@@ -52,6 +52,7 @@ const externals = {
   'react-router': '__kbnSharedDeps__.ReactRouter',
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
   'react-router-dom-v5-compat': '__kbnSharedDeps__.ReactRouterDomV5Compat',
+  'react-use': '__kbnSharedDeps__.ReactUse',
   'styled-components': '__kbnSharedDeps__.StyledComponents',
   '@kbn/monaco': '__kbnSharedDeps__.KbnMonaco',
   // this is how plugins/consumers from npm load monaco
@@ -75,6 +76,29 @@ const externals = {
   immer: '__kbnSharedDeps__.Immer',
   reselect: '__kbnSharedDeps__.Reselect',
   'fastest-levenshtein': '__kbnSharedDeps__.FastestLevenshtein',
+  // cache some used methods of the react-use library
+  ...[
+    'useAsync',
+    'useAsyncFn',
+    'useDebounce',
+    'useDeepCompareEffect',
+    'useEffectOnce',
+    'useEvent',
+    'useLatest',
+    'useList',
+    'useLocalStorage',
+    'useMount',
+    'useMountedState',
+    'usePrevious',
+    'useSessionStorage',
+    'useTimeoutFn',
+    'useToggle',
+    'useUnmount',
+    'useUpdateEffect',
+  ].reduce((memo, subset) => {
+    memo[`react-use/lib/${subset}`] = `__kbnSharedDeps__.ReactUse.${subset}`;
+    return memo;
+  }, {}),
 
   /**
    * big deps which are locked to a single version

src/platform/packages/private/kbn-ui-shared-deps-src/src/entry.js

@@ -48,6 +48,25 @@ export const ReactRouterDomV5Compat = require('react-router-dom-v5-compat');
 // eslint-disable-next-line @kbn/eslint/module_migration
 export const StyledComponents = require('styled-components');
 export const FastestLevenshtein = require('fastest-levenshtein');
+export const ReactUse = {
+  useAsync: require('react-use/lib/useAsync'),
+  useAsyncFn: require('react-use/lib/useAsyncFn'),
+  useDebounce: require('react-use/lib/useDebounce'),
+  useDeepCompareEffect: require('react-use/lib/useDeepCompareEffect'),
+  useEffectOnce: require('react-use/lib/useEffectOnce'),
+  useEvent: require('react-use/lib/useEvent'),
+  useLatest: require('react-use/lib/useLatest'),
+  useList: require('react-use/lib/useList'),
+  useLocalStorage: require('react-use/lib/useLocalStorage'),
+  useMount: require('react-use/lib/useMount'),
+  useMountedState: require('react-use/lib/useMountedState'),
+  usePrevious: require('react-use/lib/usePrevious'),
+  useSessionStorage: require('react-use/lib/useSessionStorage'),
+  useTimeoutFn: require('react-use/lib/useTimeoutFn'),
+  useToggle: require('react-use/lib/useToggle'),
+  useUnmount: require('react-use/lib/useUnmount'),
+  useUpdateEffect: require('react-use/lib/useUpdateEffect'),
+};
 
 Moment.tz.load(require('moment-timezone/data/packed/latest.json'));
 

x-pack/platform/packages/shared/kbn-ai-assistant/src/hooks/use_functions.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useObservable } from 'react-use/lib';
+import useObservable from 'react-use/lib/useObservable';
 import { useAIAssistantChatService } from './use_ai_assistant_chat_service';
 
 export const useFunctions = () => {

x-pack/platform/packages/shared/kbn-ai-assistant/src/hooks/use_scopes.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useObservable } from 'react-use/lib';
+import useObservable from 'react-use/lib/useObservable';
 import { useAIAssistantAppService } from './use_ai_assistant_app_service';
 
 export const useScopes = () => {

x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/hooks/use_nav_control_scope.ts

@@ -8,7 +8,7 @@
 import { useEffect } from 'react';
 import { useAIAssistantAppService } from '@kbn/ai-assistant';
 import { AssistantScope } from '@kbn/ai-assistant-common';
-import { useObservable } from 'react-use/lib';
+import useObservable from 'react-use/lib/useObservable';
 import { DEFAULT_APP_CATEGORIES } from '@kbn/core/public';
 import { isEqual } from 'lodash';
 import { useKibana } from './use_kibana';

x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_overview/hooks/use_redirect_to_onboarding_start.ts

@@ -8,7 +8,7 @@
 import { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
-import { useObservable } from 'react-use/lib';
+import useObservable from 'react-use/lib/useObservable';
 
 import { SEARCH_INDICES_START } from '@kbn/deeplinks-search';
 import { useKibana } from '@kbn/kibana-react-plugin/public';