0

Which of the following should I use:

import { Button } from 'react-bootstrap';

or

import Button from 'react-bootstrap/Button';

The former has the advantage of using the correct name for the component so I do not understand why I should use the latter approach to ES6 imports.

2 Answers 2

2

The difference in this case is how the packages are arranged.

import { Button } from 'react-bootstrap';

This one actually loads the entire bootstrap package - but it only imports the Button section to your module. The {Button} part can be considered destructuring only one property of a large object.

import Button from 'react-bootstrap/Button';

This one only loads the Button section and the it doesn't have to do any destructuring - because, what is loaded is only the Button section.

The second approach is better - because, it has to load only the code that you explicitly specify.

1

It is not a matter of ES6. The two statements do two different things.

import Button from 'react-bootstrap/Button';

This loads the file react-bootstrap/Button.js and returns its default export.

import { Button } from 'react-bootstrap';

This loads the file react-bootstrap/index.js, and returns the Button export. index.js imports the default export from Button.js, and exports it as Button in this line:

export { default as Button } from './Button';

If this line weren't there, you would not be able to use the second form.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.