How does React dependency/library management work?

Asked

Viewed 92 times

3

Hey, you guys

How does React dependency/library management work? Do you have a page in the documentation that talks about? Importing a library that has, for the most part, things that I won’t use (i.e., that I use a few things from the library) makes my project heavier?

--

Explaining in more detail and with example:

Let’s assume you’re using UI material in my project. This library has many UI elements of Material Design. But I will only use, for example, Buttons and cards.

Is the fact that I am only using two things from a library that has several other elements bad for the performance of my project? Is React smart enough to upload to my project just what I’m going to use? That is, React carries, in this situation, only the elements that I will use, or it carries the entire lib?

DOUBT 2, BUT FOLLOWING THE THOUGHT OF THE PREVIOUS QUESTIONING

In the example of the import of icons of the Material-UI there is a difference for React when importing the following ways:

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import { AccessAlarm } from '@material-ui/icons';

I don’t know if I was redundant or clear enough. Any further questions, I’m available.

react

2 answers

1

Regarding the first doubt. Yes, React is "smart enough" to only load the elements being imported.

On the second question. The first example will import what is being exported as "default" in the "Accessalarm.js" file and will be used with the alias "Accessalarmicon". The second import will look for a specific export defined as "Accessalarm" in the specified path.

0

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.