Difference between "import {Something} from somelib" and "import Something from somelib" React.js

Question

I do not understand the difference between:

import {Something} from somelib

and

import Something from somelib

in React.js.

Could someone, please, explain it?

Answer 1

When working with ES6 modules, you have two types of exports:

export Something
export default Something

The difference between these is how you import them. If you have a single file with multiple modules, it makes sense to give each module a name and be able to import each of them individually, without having to import the entire contents of the file.

For example, say you have 3 modules in one file, and you export them as export A; export B; export C;. You can then import any one of them using the curly brackets import syntax. So import {A, B}, for example will import module A and B only.

The default export syntax is commonly used in React when you want to export a component, and nothing else from a file. By exporting something with export default A, you can import that module by using the import X from ../file, where X is an alias and can be anything (but usually the same name is used for consistency).

You can read more about ES6 import & export here and here.

Answer 2

It totally depends on how the library is exporting objects / functions.

See the following cases:

---

Consider a library which exports this way:

export default func1() {...}
export func2() {...}
export func3() {...}

When importing from above library:

Syntax 1

To import func1 we would write

import x from 'lib'; // x is func1

Syntax 2

To import func2 / func3,

import {func3} from 'lib' // only func3 is imported

Now, if you do

Syntax 3

import * as x from 'lib';

You would get x = { func2, func3, default: { func1 } }

---

A library without default export:

export func1() {...}
export func2() {...}
export func3() {...}

Import Syntaxes:

Syntax 1

If we write

import x from 'lib'; // x is undefined, see Syntax 3

Syntax 2

To import func2 / func3,

import {func3} from 'lib' // only func3 is imported

Syntax 3

To import all,

import * as x from 'lib';

You would get x = { func2, func3, func1 }

---

Now consider a library which uses module.exports

const func1 = function() { }
module.exports = func1;

When importing

import x from 'lib' // x = func1

---

Now consider another library:

const func1 = function() { }
module.exports = { func1 };

Now to import func1 you would do:

import {func1} from 'lib';

---

So, if you wish to import the complete library (or its default export) you would use

import x from 'lib';

If the library exports an object and you only want some keys of that object, you would use

import {key} from 'lib';

If you want all the keys as another object x, you would use

import * as x from 'lib';

Answer 3

There is a huge difference though :)

import {Something} from somelib -> import specific export "Something" from the library

import Something from somelib -> import only default export and give the alias name as Somthing.