Remove large dependencies

[Cretezy]

This library minified is almost 52kb, which is huge for what it is. 60% of the bundle size is solely based on dependencies, all of which are only used in a few hook.

I would suggest making turning those into peerDependencies and requiring users to include the libraries in their own package.json. This would make the size of this library ~21kB.

Although tree shaking should take care of this, not all environments support it, and forcing dependencies on users isn't the best course of action, especially if it's for a small functionality.

If this is a go, I could make the PR with the changes (code & docs) required for this.

[streamich]

That would be great! Sorry, for bloating dependencies.

[ctrlplusb]

Always a great reference site:

https://bundlephobia.com/result?p=react-use@5.13.0

Could also be a good idea to update the build configuration for this package so that it additionally outputs an ES6 version (pointed at by the module key within package.json).

I do this in my library, for example here is the package output:
https://unpkg.com/easy-peasy@2.1.1/

Some build systems (e.g. create-react-app) will then automatically use the ES6 version and treeshake accordingly.

[Cretezy]

@ctrlplusb bundlephobia is what prompted me to open this ticket, and is preventing us to use this because we don't want to bloat our bundle!

Is there any progress on this?

[streamich]

Is there any progress on this?

@Cretezy Well, on Feb 7 you volunteered to make a PR 😄:

If this is a go, I could make the PR with the changes (code & docs) required for this.

[Cretezy]

Ah damn I had never seen that comment! I'll start working on something when I have free time

[Cretezy]

Opened PR: #161

[wardoost]

I have been using babel-plugin-import for util packages like this one. Might be good to add something in the docs about this? .babelrc is pretty straight forward:

{
  "plugins": [
    [
      "import", {
        "libraryName": "react-use",
        "libraryDirectory": "lib",
        "camel2DashComponentName": false
      }
    ]
  ]
}

[streamich]

1. react-use now has "sideEffects": false set, which should enable Webpack tree-shaking.
2. See Usage readme if your bundler does not support tree-shaking.
3. Big dependencies are now in peerDependencies there are few dependencies this library installs but all of those are very minor:
   • copy-to-clipboard — this is just one file and used only if you use copy-to-clipboard hook.
   • nano-css — this should add less than 1Kb to your bundle and only if you use useCss hook.
   • react-fast-compare — this is just one function for deep comparison of objects.
   • react-wait — this is useWait hook, will be included in your bundle only if you use useWait hook.
   • screenfull — used for cross-browser compatibility only in useFullscreen hook.
   • throttle-debounce — just two functions: throttle and debounce.
   • ts-easing — list of easing functions for animations.

[huchenme]

@streamich I believe create-react-app have tree shaking enabled, but still not able to use es module syntax, getting keyboardjs missing error without installing those peerDependencies

import { useAsync } from 'react-use';

Error:

./node_modules/react-use/esm/useKeyboardJs.js
Module not found: Can't resolve 'keyboardjs' in '/Users/chen/projects/github/open_source/hacker-tab-extension/node_modules/react-use/esm'