React Import Modules using best practices

Question

In your experience what's the best practice when importing large modules into your component. Could you please tell me which and the reason why from the example below?

import * from './foo'

or

import {bar, beer, brew } from './foo'

The question of which to use is opinion based. And the question of what the differences are is potentially a duplicate of this question: [Import Statements in ES6 from MDN docs](https://stackoverflow.com/q/51215691/691711). — zero298, Apr 10 '19 at 17:11

score 4 · Accepted Answer · answered Apr 10 '19 at 17:07

import * as name from './foo' will import everything from foo, but the second statement will only import three exports from the module.

It's very context specific, but in my opinion it's much easier to see what is actually imported in the second example, and you will also be able to take advantage of tree shaking if e.g. not all exports from a library are used.

React Import Modules using best practices

1 Answers1