Importing class by class or the whole module, which one is the best?

Question

I'm developing a ReactJS application, and I can import classes from a library in two ways. The first is using one import clause and specifying the classes I want in brackets:

import { makeStyles, CssBaseline, Box } from '@material-ui/core';

The second one is specifying each class in a different import clause:

import makeStyles from '@material-ui/core/makeStyles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Box from '@material-ui/core/Box';

What's the difference between these two methods? Which one is best?

Answer 1

Straight from the docs:

For convenience, Material-UI exposes its full API on the top-level material-ui import. If you're using ES6 modules and a bundler that supports tree-shaking (webpack >= 2.x, parcel with a flag) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:

import { Button, TextField } from '@material-ui/core';

Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to slower startup times. This is especially noticeable if you import from @material-ui/icons.

You can use path imports to avoid pulling in unused modules.

// 🚀 Fast
import Button from '@material-ui/core/Button';

https://material-ui.com/guides/minimizing-bundle-size/

Answer 2

In terms of functional difference, the two do exactly the same thing: they load in a specific component. However, the first method is more readable, concise, and (in my opinion) is more professional-looking.

If you have multiple components in a single file it's best practise to load components using the bracketed method. The second method you specified is best only used when you have a default component to export (i.e. you have export default component_name = ...) somewhere in the file.

It also stops you from having to specify a long list of file paths - especially useful if you're working on a bigger project and have hundreds of components!