Redux - what component gets rendered when store state has changed?
0
If i'm changing my Redux store's state by dispatching an action, which component would get rendered?
If i have in my code:
ReactDOM.render(, document.getElementById('root'));
Does it mean that App and all of its children components would get re-rendered? Or just the components i'm currently viewing in my browser? (those are the components that are currently mounted on the DOM right?)
redux
asked Nov 12 '18 at 17:07
Gambit2007
394624
|
show 2 more comments
0
If i'm changing my Redux store's state by dispatching an action, which component would get rendered?
If i have in my code:
ReactDOM.render(, document.getElementById('root'));
Does it mean that App and all of its children components would get re-rendered? Or just the components i'm currently viewing in my browser? (those are the components that are currently mounted on the DOM right?)
redux
asked Nov 12 '18 at 17:07
Gambit2007
394624
It really depends on how your component tree is set up (PureComponent, shouldComponentUpdate, etc). But as I understand it, React will run all the render methods for all the components and that will create a virtual dom representation. That is then diffed with n-1 version. Finally, the diff changes will create DOM changes. So, no, the App and all its children will not get re-rendered in the DOM.
– Davin Tryon
Nov 12 '18 at 17:16
So essentially if, for example, i have aMaincomponent that passes state as props to aLogincomponent and then the state changes,Loginwill "automatically" get re-rendered since a new updated state has been passed to it byMain?
– Gambit2007
Nov 12 '18 at 17:22
Yes, that is correct, but re-rendered doesn't mean the entire DOM gets replaced. Only the minimum required set of DOM changes get applied.
– Davin Tryon
Nov 12 '18 at 17:26
Ok got it, thanks!
– Gambit2007
Nov 12 '18 at 17:28
Please see our new React-Redux docs page on writingmapStateToPropsfunctions for a detailed description of when your component will re-render.
– markerikson
Nov 12 '18 at 20:31
|
show 2 more comments
0
0
0
If i'm changing my Redux store's state by dispatching an action, which component would get rendered?
If i have in my code:
ReactDOM.render(, document.getElementById('root'));
Does it mean that App and all of its children components would get re-rendered? Or just the components i'm currently viewing in my browser? (those are the components that are currently mounted on the DOM right?)
redux
asked Nov 12 '18 at 17:07
Gambit2007
394624
If i'm changing my Redux store's state by dispatching an action, which component would get rendered?
If i have in my code:
ReactDOM.render(, document.getElementById('root'));
Does it mean that App and all of its children components would get re-rendered? Or just the components i'm currently viewing in my browser? (those are the components that are currently mounted on the DOM right?)
redux
redux
asked Nov 12 '18 at 17:07
Gambit2007
394624
asked Nov 12 '18 at 17:07
Gambit2007
394624
asked Nov 12 '18 at 17:07
Gambit2007
394624
asked Nov 12 '18 at 17:07
Gambit2007
394624
asked Nov 12 '18 at 17:07
Gambit2007
394624
394624
It really depends on how your component tree is set up (PureComponent, shouldComponentUpdate, etc). But as I understand it, React will run all the render methods for all the components and that will create a virtual dom representation. That is then diffed with n-1 version. Finally, the diff changes will create DOM changes. So, no, the App and all its children will not get re-rendered in the DOM.
– Davin Tryon
Nov 12 '18 at 17:16
So essentially if, for example, i have aMaincomponent that passes state as props to aLogincomponent and then the state changes,Loginwill "automatically" get re-rendered since a new updated state has been passed to it byMain?
– Gambit2007
Nov 12 '18 at 17:22
Yes, that is correct, but re-rendered doesn't mean the entire DOM gets replaced. Only the minimum required set of DOM changes get applied.
– Davin Tryon
Nov 12 '18 at 17:26
Ok got it, thanks!
– Gambit2007
Nov 12 '18 at 17:28
Please see our new React-Redux docs page on writingmapStateToPropsfunctions for a detailed description of when your component will re-render.
– markerikson
Nov 12 '18 at 20:31
|
show 2 more comments
It really depends on how your component tree is set up (PureComponent, shouldComponentUpdate, etc). But as I understand it, React will run all the render methods for all the components and that will create a virtual dom representation. That is then diffed with n-1 version. Finally, the diff changes will create DOM changes. So, no, the App and all its children will not get re-rendered in the DOM.
– Davin Tryon
Nov 12 '18 at 17:16
So essentially if, for example, i have aMaincomponent that passes state as props to aLogincomponent and then the state changes,Loginwill "automatically" get re-rendered since a new updated state has been passed to it byMain?
– Gambit2007
Nov 12 '18 at 17:22
Yes, that is correct, but re-rendered doesn't mean the entire DOM gets replaced. Only the minimum required set of DOM changes get applied.
– Davin Tryon
Nov 12 '18 at 17:26
Ok got it, thanks!
– Gambit2007
Nov 12 '18 at 17:28
Please see our new React-Redux docs page on writingmapStateToPropsfunctions for a detailed description of when your component will re-render.
– markerikson
Nov 12 '18 at 20:31
It really depends on how your component tree is set up (PureComponent, shouldComponentUpdate, etc). But as I understand it, React will run all the render methods for all the components and that will create a virtual dom representation. That is then diffed with n-1 version. Finally, the diff changes will create DOM changes. So, no, the App and all its children will not get re-rendered in the DOM.
– Davin Tryon
Nov 12 '18 at 17:16
It really depends on how your component tree is set up (PureComponent, shouldComponentUpdate, etc). But as I understand it, React will run all the render methods for all the components and that will create a virtual dom representation. That is then diffed with n-1 version. Finally, the diff changes will create DOM changes. So, no, the App and all its children will not get re-rendered in the DOM.
– Davin Tryon
Nov 12 '18 at 17:16
So essentially if, for example, i have a
Main component that passes state as props to a Login component and then the state changes, Login will "automatically" get re-rendered since a new updated state has been passed to it by Main?– Gambit2007
Nov 12 '18 at 17:22
So essentially if, for example, i have a
Main component that passes state as props to a Login component and then the state changes, Login will "automatically" get re-rendered since a new updated state has been passed to it by Main?– Gambit2007
Nov 12 '18 at 17:22
Yes, that is correct, but re-rendered doesn't mean the entire DOM gets replaced. Only the minimum required set of DOM changes get applied.
– Davin Tryon
Nov 12 '18 at 17:26
Yes, that is correct, but re-rendered doesn't mean the entire DOM gets replaced. Only the minimum required set of DOM changes get applied.
– Davin Tryon
Nov 12 '18 at 17:26
Ok got it, thanks!
– Gambit2007
Nov 12 '18 at 17:28
Ok got it, thanks!
– Gambit2007
Nov 12 '18 at 17:28
Please see our new React-Redux docs page on writing
mapStateToProps functions for a detailed description of when your component will re-render.– markerikson
Nov 12 '18 at 20:31
Please see our new React-Redux docs page on writing
mapStateToProps functions for a detailed description of when your component will re-render.– markerikson
Nov 12 '18 at 20:31
|
show 2 more comments
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f53266941%2fredux-what-component-gets-rendered-when-store-state-has-changed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53266941%2fredux-what-component-gets-rendered-when-store-state-has-changed%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
It really depends on how your component tree is set up (PureComponent, shouldComponentUpdate, etc). But as I understand it, React will run all the render methods for all the components and that will create a virtual dom representation. That is then diffed with n-1 version. Finally, the diff changes will create DOM changes. So, no, the App and all its children will not get re-rendered in the DOM.
– Davin Tryon
Nov 12 '18 at 17:16
So essentially if, for example, i have a
Maincomponent that passes state as props to aLogincomponent and then the state changes,Loginwill "automatically" get re-rendered since a new updated state has been passed to it byMain?– Gambit2007
Nov 12 '18 at 17:22
Yes, that is correct, but re-rendered doesn't mean the entire DOM gets replaced. Only the minimum required set of DOM changes get applied.
– Davin Tryon
Nov 12 '18 at 17:26
Ok got it, thanks!
– Gambit2007
Nov 12 '18 at 17:28
Please see our new React-Redux docs page on writing
mapStateToPropsfunctions for a detailed description of when your component will re-render.– markerikson
Nov 12 '18 at 20:31