Best practices for importing multiple components from react-bootstrap?

Question

For performance reasons the React-Bootstrap documentation suggests importing individual components rather than the whole library. So:

import Button from 'react-bootstrap/Button';

instead of

import { Button } from 'react-bootstrap';

My question is whether there is a limit to this when importing numerous components? i.e.

import Alert from 'react-bootstrap/Alert';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
import Badge from 'react-bootstrap/Badge';

as opposed to:

import { Alert, Row, Col, ProgressBar, Popover, OverlayTrigger, Button, Badge } from 'react-bootstrap';

Is there still such a performance gain that it's better to have the individual import statements, or is there a cutoff that others follow, where more than a certain number of components gets included in one line instead of multiple?

Answer 1

Just use named imports and tree shake not used code. For example with Create-React-App tree shaking is automatically configured. Then using

import { Alert, Row, Col, ProgressBar, Popover, OverlayTrigger, Button, Badge } from 'react-bootstrap';

is in the end the same as

import Alert from 'react-bootstrap/Alert';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
import Badge from 'react-bootstrap/Badge';

To anwser your question directly: Yes, it always better to get rid of not used code. Even if you use ten components from react-bootstrap - this library has A LOT more and I can't imagine a single component where you would use even 70-80% of them.