What is the difference between these ES6 import statements?

Question

import { A, B, C } from 'somecomponent/components'

import { A } from "somecomponent/components/A";
import { B } from "somecomponent/components/B";
import { C } from "somecomponent/components/C";

Does both the import statements above and below import only A, B, C? Is there any difference between these statements? Is there a preference to use either of them?

Answer 1

Yes, both imports do import A , B and C into the current module. However, the first imports them from one module, the second imports them from three different modules - which might have different values.

The two ways are only equivalent if - and only if - the module at 'somecomponent/components' does

export { A } from "somecomponent/components/A";
export { B } from "somecomponent/components/B";
export { C } from "somecomponent/components/C";

(and iff these resolve to the same modules).

Answer 2

There is no difference whatsoever. And yes, only A , B , and C are visible to you.

As for preference... whatever you like. Myself, less typing is better.