Don't use React imports like this. Use Wrapper Pattern instead

Updated version. Read on: https://medium.com/@perisicnikola37/dont-use-react-imports-like-this-use-wrapper-pattern-instead-b7a49b864ff4

Comments

[Aron Schüler]

This has nothing to do with wrapper files or components, its just comparing importing everything from a library with importing only what you really need.
E.g. you compare

import _ from 'lodash'

with

import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle'; 

but wrongfully suggest that you need a new file to benefit from bundling - you don't. Just don't import the whole library when you need two functions.

[manuel fernando gallego arias]

Great to know, thanks Nikola.

[Syed Salman]

what is the use of wrapper here, when you are changing completely what you are importing from the library.

[Nikola Perišić]

There are multiple benefits:

• Developers in the codebase know what to use and import -With a wrapper, developers don’t need to think about the best way to import a library each time. They just use the predefined optimized wrapper.
• Avoiding Redundant Imports - If every component manually imports specific thing from lodash for example, there’s a risk that different components may import some different parts of the library.
• Ease of Maintenance - If a library updates its exports or introduces a more optimized way to import, you only need to update the wrapper file instead of refactoring every single component.

[Andrew K]

However, if this import is used across multiple component files, the bundle size can quickly grow up to around 40% or even more for smaller projects (~2mb)

I don't think that's how modern bundling work.
For your problem the wrapper is just redundant. The article is misleading, trying to state that by putting something in another file you can "optimize" something.
Also I couldn't find it being used in the repo you, can you point to the exact file?

[Nikola Perišić]

yep, this is still the old version
check new one on: medium.com/@perisicnikola37/dont-u...

[Andrew K]

Yeah, this makes more sense now.

[Laode Muhammad Al Fatih]

It's a bundler issue. Not worth for changing.

[Nikola Perišić]

Well, many people who liked this article on Medium would argue with you xD

[Guyllaume Doyer]

I also think that this article is misleading as it let the reader think that the suggested wrapper pattern is the actual solution to fix the presented issue.
Like @thraizz says in his comment, no need for the wrapper to fix the issue. The real fix is to load only the necessary modules, assuming the library export them independentely.

Plus, grouping several unique modules into 1 unique "wrapper" file like the given example for Lodash, though in some cases could be a good idea (like to be able to replace any third party tool by an equivalent one), could load to creating "barrel files" which may lead to loading superfluous modules when used in combination with code splitting.

[Nikola Perišić]

New version on: medium.com/@perisicnikola37/dont-u...