Reduce bundle size from 'react-use'

[Dosant]

react-use is often used in Kibana for react hooks.

There are 2 ways to import a hook

import {useDebounce} from 'react-use' // import the whole lib
import useDebounce from 'react-use/lib/useDebounce' // imports a specific hook

The whole lib is pretty heavy (20kb gzipped over network), example of visDefaultEditor bundle:

There are ~50 occurrences of importing lib in non optimal way in different plugins:

Fixing this should be an easy win, even though initial bundle size likely won't be affected that much (because hooks are mostly used in already code splitted UI code), but it is still nice to cut on async chunks.

---

@elastic/kibana-operations, what would be a preferred way?

1. Single global react-use instance like we did with lodash
2. Or a lint rule that forbids to import from react-use directly? ( I would vote for this one, because I think only 10% of hooks are really used)

[spalger]

I would prefer that we use tree-shaking to remove unnecessary portions of react-use automatically (though we've had issues getting that working #62390, webpack 5 upgrade might help with that).

Another option I like is an extension to the module-migration rule that automatically rewrites the imports to use the sub-modules similar to how imports for react-router and numeral are rewritten during development.

[Dosant]

this was done via linting that restricts importing from the root of the lib