How to properly use NPM packages in a React app?

Question

React

Hello, I'm interested in this question. Now I'm doing a project on react, and different packages are required. Most often for style. Such as React-select, react-scrollbar, etc. The
question is, how much does this affect the speed of the project? For example, based on experience in layout, installing a cloud of plug-ins on a project, does not end with anything good. And how are things here?
In short, is it correct to install NPM packages, for example, for the same Custom Scrollbar, or is it still better to do it manually in some places, if possible?

Answer 1

If you thoughtlessly act according to the principle “so we’ll stick a bootstrap there now (don’t care that the design is not about bootstrap at all), the fontavesome is all at once because of 2 icons, no jive” then of course there will be an “overload”.
I ask myself 3 questions:
1) Can I "make by hand" better/faster/more reliable/lighter than what npm has?
2) Is the available library (plugin) sufficient? Isn't she redundant?
3) How much will it cost to develop and debug your solution?
So everything is individual. You have to be thoughtful and understand. For example, there is such a lib for working with dates moment.js. It turns out that he drags all the localizations into the bundle at once. You can find how to fix this at the webpack config level (if memory serves). And if you search a little more, you can find a more modern and convenient date-fns and import only the necessary function from it.
And https://www.npmjs.com/package/webpack-bundle-analyzer to help, estimate the weight of modules in the total bundle size