DEV Community

React Hunter
React Hunter

Posted on

Optimization in importing

I want to discuss about optimization.
Here are 2 kinds of importing components.

  • first case
    import { Accordion, Button, Modal } from 'react-bootstrap';

  • second case

import Accordion from 'react-bootstrap/Accordion';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

Which is better in optimization scope? Or same?
Thanks

Top comments (2)

Collapse
 
ankushppie profile image
Ankush Lokhande • Edited

Hi @reacthunter0324
Both ways of importing the Accordion component from the react-bootstrap library are valid. The first case imports all exports from the react-bootstrap library and then specifically pulls out the Accordion component. The second case only imports the Accordion component directly.

The choice between the two would depend on the specific use case and project structure. If you only need to use the Accordion component and not any other exports from the react-bootstrap library, the second case would be more efficient. If you plan to use multiple exports from the react-bootstrap library, the first case would be more convenient.

Collapse
 
reacthunter0324 profile image
React Hunter

Hi @ankushppie
Thanks for your comment.
Yeah, above code are gonna use 3 components from react-bootstrap library, so the first code should be better, right?
Thank you very much!