Why is it not ideal to import react-bootstrap using destructuring
The documentation page suggests to only import the components needed. There are 2 examples given here https://react-bootstrap.netlify.com/getting-started/introduction#importing:
import Button from 'react-bootstrap/lib/Button';
// or less ideally
import Button from 'react-bootstrap';
What makes the 2nd method 'less ideal'?
javascript reactjs ecmascript-6 react-bootstrap
asked Nov 14 '18 at 18:51
Max KMax K
34
|
show 1 more comment
The documentation page suggests to only import the components needed. There are 2 examples given here https://react-bootstrap.netlify.com/getting-started/introduction#importing:
import Button from 'react-bootstrap/lib/Button';
// or less ideally
import Button from 'react-bootstrap';
What makes the 2nd method 'less ideal'?
javascript reactjs ecmascript-6 react-bootstrap
asked Nov 14 '18 at 18:51
Max KMax K
34
1
Take a look at this. github.com/react-bootstrap/react-bootstrap/issues/2683 may give you some insight.
– Chaim Friedman
Nov 14 '18 at 18:56
According to the ticket, that 2nd method will have to import the whole library, but only make Button available. Thanks for a quick reply!
– Max K
Nov 14 '18 at 19:02
If you're using webpack then treeshaking will take care of it
– Ajay Gaur
Nov 14 '18 at 19:07
I am using webpack, but that ticket suggests that the tree-shaking itself is broken somehow.
– Max K
Nov 14 '18 at 19:40
You cannot possibly rely on webpack's treeshaking as that depends on marking all your code assideeffect-freewhich is hardly possible.
– connexo
Nov 14 '18 at 19:51
|
show 1 more comment
The documentation page suggests to only import the components needed. There are 2 examples given here https://react-bootstrap.netlify.com/getting-started/introduction#importing:
import Button from 'react-bootstrap/lib/Button';
// or less ideally
import Button from 'react-bootstrap';
What makes the 2nd method 'less ideal'?
javascript reactjs ecmascript-6 react-bootstrap
asked Nov 14 '18 at 18:51
Max KMax K
34
The documentation page suggests to only import the components needed. There are 2 examples given here https://react-bootstrap.netlify.com/getting-started/introduction#importing:
import Button from 'react-bootstrap/lib/Button';
// or less ideally
import Button from 'react-bootstrap';
What makes the 2nd method 'less ideal'?
javascript reactjs ecmascript-6 react-bootstrap
javascript reactjs ecmascript-6 react-bootstrap
asked Nov 14 '18 at 18:51
Max KMax K
34
asked Nov 14 '18 at 18:51
Max KMax K
34
asked Nov 14 '18 at 18:51
Max KMax K
34
asked Nov 14 '18 at 18:51
Max KMax K
34
asked Nov 14 '18 at 18:51
Max KMax K
34
34
1
Take a look at this. github.com/react-bootstrap/react-bootstrap/issues/2683 may give you some insight.
– Chaim Friedman
Nov 14 '18 at 18:56
According to the ticket, that 2nd method will have to import the whole library, but only make Button available. Thanks for a quick reply!
– Max K
Nov 14 '18 at 19:02
If you're using webpack then treeshaking will take care of it
– Ajay Gaur
Nov 14 '18 at 19:07
I am using webpack, but that ticket suggests that the tree-shaking itself is broken somehow.
– Max K
Nov 14 '18 at 19:40
You cannot possibly rely on webpack's treeshaking as that depends on marking all your code assideeffect-freewhich is hardly possible.
– connexo
Nov 14 '18 at 19:51
|
show 1 more comment
1
Take a look at this. github.com/react-bootstrap/react-bootstrap/issues/2683 may give you some insight.
– Chaim Friedman
Nov 14 '18 at 18:56
According to the ticket, that 2nd method will have to import the whole library, but only make Button available. Thanks for a quick reply!
– Max K
Nov 14 '18 at 19:02
If you're using webpack then treeshaking will take care of it
– Ajay Gaur
Nov 14 '18 at 19:07
I am using webpack, but that ticket suggests that the tree-shaking itself is broken somehow.
– Max K
Nov 14 '18 at 19:40
You cannot possibly rely on webpack's treeshaking as that depends on marking all your code assideeffect-freewhich is hardly possible.
– connexo
Nov 14 '18 at 19:51
1
1
Take a look at this. github.com/react-bootstrap/react-bootstrap/issues/2683 may give you some insight.
– Chaim Friedman
Nov 14 '18 at 18:56
Take a look at this. github.com/react-bootstrap/react-bootstrap/issues/2683 may give you some insight.
– Chaim Friedman
Nov 14 '18 at 18:56
According to the ticket, that 2nd method will have to import the whole library, but only make Button available. Thanks for a quick reply!
– Max K
Nov 14 '18 at 19:02
According to the ticket, that 2nd method will have to import the whole library, but only make Button available. Thanks for a quick reply!
– Max K
Nov 14 '18 at 19:02
If you're using webpack then treeshaking will take care of it
– Ajay Gaur
Nov 14 '18 at 19:07
If you're using webpack then treeshaking will take care of it
– Ajay Gaur
Nov 14 '18 at 19:07
I am using webpack, but that ticket suggests that the tree-shaking itself is broken somehow.
– Max K
Nov 14 '18 at 19:40
I am using webpack, but that ticket suggests that the tree-shaking itself is broken somehow.
– Max K
Nov 14 '18 at 19:40
You cannot possibly rely on webpack's treeshaking as that depends on marking all your code as
sideeffect-free which is hardly possible.– connexo
Nov 14 '18 at 19:51
You cannot possibly rely on webpack's treeshaking as that depends on marking all your code as
sideeffect-free which is hardly possible.– connexo
Nov 14 '18 at 19:51
|
show 1 more comment
1 Answer
1
active
oldest
votes
In the first case you are only importing the code for that particular component.
In the second case you are importing the whole library and inserting only a particular component into the current scope.
answered Nov 14 '18 at 19:49
StundjiStundji
477212
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306947%2fwhy-is-it-not-ideal-to-import-react-bootstrap-using-destructuring%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
In the first case you are only importing the code for that particular component.
In the second case you are importing the whole library and inserting only a particular component into the current scope.
answered Nov 14 '18 at 19:49
StundjiStundji
477212
add a comment |
In the first case you are only importing the code for that particular component.
In the second case you are importing the whole library and inserting only a particular component into the current scope.
answered Nov 14 '18 at 19:49
StundjiStundji
477212
add a comment |
In the first case you are only importing the code for that particular component.
In the second case you are importing the whole library and inserting only a particular component into the current scope.
answered Nov 14 '18 at 19:49
StundjiStundji
477212
In the first case you are only importing the code for that particular component.
In the second case you are importing the whole library and inserting only a particular component into the current scope.
answered Nov 14 '18 at 19:49
StundjiStundji
477212
answered Nov 14 '18 at 19:49
StundjiStundji
477212
answered Nov 14 '18 at 19:49
StundjiStundji
477212
answered Nov 14 '18 at 19:49
StundjiStundji
477212
477212
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306947%2fwhy-is-it-not-ideal-to-import-react-bootstrap-using-destructuring%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Take a look at this. github.com/react-bootstrap/react-bootstrap/issues/2683 may give you some insight.
– Chaim Friedman
Nov 14 '18 at 18:56
According to the ticket, that 2nd method will have to import the whole library, but only make Button available. Thanks for a quick reply!
– Max K
Nov 14 '18 at 19:02
If you're using webpack then treeshaking will take care of it
– Ajay Gaur
Nov 14 '18 at 19:07
I am using webpack, but that ticket suggests that the tree-shaking itself is broken somehow.
– Max K
Nov 14 '18 at 19:40
You cannot possibly rely on webpack's treeshaking as that depends on marking all your code as
sideeffect-freewhich is hardly possible.– connexo
Nov 14 '18 at 19:51