this.setState() in callback of this.setState()
up vote
0
down vote
favorite
Can I explicitly call this.setState() in the definition of the callback passed to this.setState()?
this.setState(
{
openA:true
},
() => {
this.setState({
openB: false
})
}
)
javascript reactjs setstate
asked Nov 10 at 5:50
Haider Ali Anjum
194316
add a comment |
up vote
0
down vote
favorite
Can I explicitly call this.setState() in the definition of the callback passed to this.setState()?
this.setState(
{
openA:true
},
() => {
this.setState({
openB: false
})
}
)
javascript reactjs setstate
asked Nov 10 at 5:50
Haider Ali Anjum
194316
1
You can but likely shouldn't. Why do you think you need this?
– estus
Nov 10 at 6:40
No requirement, needs to know if we can do this. there will be 2 re-renders (one after each this.setState()) or only 1 re-render after the callback ends?
– Haider Ali Anjum
Nov 10 at 7:30
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Can I explicitly call this.setState() in the definition of the callback passed to this.setState()?
this.setState(
{
openA:true
},
() => {
this.setState({
openB: false
})
}
)
javascript reactjs setstate
asked Nov 10 at 5:50
Haider Ali Anjum
194316
Can I explicitly call this.setState() in the definition of the callback passed to this.setState()?
this.setState(
{
openA:true
},
() => {
this.setState({
openB: false
})
}
)
javascript reactjs setstate
javascript reactjs setstate
asked Nov 10 at 5:50
Haider Ali Anjum
194316
asked Nov 10 at 5:50
Haider Ali Anjum
194316
edited Nov 10 at 5:52
asked Nov 10 at 5:50
Haider Ali Anjum
194316
asked Nov 10 at 5:50
Haider Ali Anjum
194316
asked Nov 10 at 5:50
Haider Ali Anjum
194316
194316
1
You can but likely shouldn't. Why do you think you need this?
– estus
Nov 10 at 6:40
No requirement, needs to know if we can do this. there will be 2 re-renders (one after each this.setState()) or only 1 re-render after the callback ends?
– Haider Ali Anjum
Nov 10 at 7:30
add a comment |
1
You can but likely shouldn't. Why do you think you need this?
– estus
Nov 10 at 6:40
No requirement, needs to know if we can do this. there will be 2 re-renders (one after each this.setState()) or only 1 re-render after the callback ends?
– Haider Ali Anjum
Nov 10 at 7:30
1
1
You can but likely shouldn't. Why do you think you need this?
– estus
Nov 10 at 6:40
You can but likely shouldn't. Why do you think you need this?
– estus
Nov 10 at 6:40
No requirement, needs to know if we can do this. there will be 2 re-renders (one after each this.setState()) or only 1 re-render after the callback ends?
– Haider Ali Anjum
Nov 10 at 7:30
No requirement, needs to know if we can do this. there will be 2 re-renders (one after each this.setState()) or only 1 re-render after the callback ends?
– Haider Ali Anjum
Nov 10 at 7:30
add a comment |
2 Answers
2
active
oldest
votes
up vote
2
down vote
This can be done, and this will result in 2 re-renders instead of 1. Usually there is no need to do this.
If setState are independent, it can be:
this.setState({ openA:true });
this.setState({ openB:false });
If updated states depend on each other, updater function should be used:
this.setState({ openA:true });
this.setState(state => ({ openB: !state.openA }));
answered Nov 10 at 7:39
estus
65.9k2198208
In the case above the setState functions will be batched, But using funtional approach for setState will do it seperately?
– Haider Ali Anjum
Nov 10 at 7:52
That's correct. At least in current React version.
– estus
Nov 10 at 7:56
completely understood, nice explanation. An upvote will help more :)
– Haider Ali Anjum
Nov 10 at 7:58
Two different setState may rerender twice, you can do it in a single setStatethis.setState({ openA:true, openB: false });and for dependent values you have to use callback, since the setState is asynchronous, @estus mentioned answer will not work as expected, you have use the following methodthis.setState({ openA:true }, ()=>this.setState({openB: this.state.openB}));.
– Hafeez Hamza
Nov 10 at 8:10
Above callback is only for demonstration, for Boolean values you can set in single setState, use the above method only for complicated calculated values
– Hafeez Hamza
Nov 10 at 8:12
|
show 2 more comments
up vote
1
down vote
Yes. It will run it after the first setState is complete.
answered Nov 10 at 5:55
Jordan
849
This is something I know, how will it act. the component update will be called after first set state or after second set state?
– Haider Ali Anjum
Nov 10 at 7:18
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',
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%2f53236352%2fthis-setstate-in-callback-of-this-setstate%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
This can be done, and this will result in 2 re-renders instead of 1. Usually there is no need to do this.
If setState are independent, it can be:
this.setState({ openA:true });
this.setState({ openB:false });
If updated states depend on each other, updater function should be used:
this.setState({ openA:true });
this.setState(state => ({ openB: !state.openA }));
answered Nov 10 at 7:39
estus
65.9k2198208
In the case above the setState functions will be batched, But using funtional approach for setState will do it seperately?
– Haider Ali Anjum
Nov 10 at 7:52
That's correct. At least in current React version.
– estus
Nov 10 at 7:56
completely understood, nice explanation. An upvote will help more :)
– Haider Ali Anjum
Nov 10 at 7:58
Two different setState may rerender twice, you can do it in a single setStatethis.setState({ openA:true, openB: false });and for dependent values you have to use callback, since the setState is asynchronous, @estus mentioned answer will not work as expected, you have use the following methodthis.setState({ openA:true }, ()=>this.setState({openB: this.state.openB}));.
– Hafeez Hamza
Nov 10 at 8:10
Above callback is only for demonstration, for Boolean values you can set in single setState, use the above method only for complicated calculated values
– Hafeez Hamza
Nov 10 at 8:12
|
show 2 more comments
up vote
2
down vote
This can be done, and this will result in 2 re-renders instead of 1. Usually there is no need to do this.
If setState are independent, it can be:
this.setState({ openA:true });
this.setState({ openB:false });
If updated states depend on each other, updater function should be used:
this.setState({ openA:true });
this.setState(state => ({ openB: !state.openA }));
answered Nov 10 at 7:39
estus
65.9k2198208
In the case above the setState functions will be batched, But using funtional approach for setState will do it seperately?
– Haider Ali Anjum
Nov 10 at 7:52
That's correct. At least in current React version.
– estus
Nov 10 at 7:56
completely understood, nice explanation. An upvote will help more :)
– Haider Ali Anjum
Nov 10 at 7:58
Two different setState may rerender twice, you can do it in a single setStatethis.setState({ openA:true, openB: false });and for dependent values you have to use callback, since the setState is asynchronous, @estus mentioned answer will not work as expected, you have use the following methodthis.setState({ openA:true }, ()=>this.setState({openB: this.state.openB}));.
– Hafeez Hamza
Nov 10 at 8:10
Above callback is only for demonstration, for Boolean values you can set in single setState, use the above method only for complicated calculated values
– Hafeez Hamza
Nov 10 at 8:12
|
show 2 more comments
up vote
2
down vote
up vote
2
down vote
This can be done, and this will result in 2 re-renders instead of 1. Usually there is no need to do this.
If setState are independent, it can be:
this.setState({ openA:true });
this.setState({ openB:false });
If updated states depend on each other, updater function should be used:
this.setState({ openA:true });
this.setState(state => ({ openB: !state.openA }));
answered Nov 10 at 7:39
estus
65.9k2198208
This can be done, and this will result in 2 re-renders instead of 1. Usually there is no need to do this.
If setState are independent, it can be:
this.setState({ openA:true });
this.setState({ openB:false });
If updated states depend on each other, updater function should be used:
this.setState({ openA:true });
this.setState(state => ({ openB: !state.openA }));
answered Nov 10 at 7:39
estus
65.9k2198208
answered Nov 10 at 7:39
estus
65.9k2198208
answered Nov 10 at 7:39
estus
65.9k2198208
answered Nov 10 at 7:39
estus
65.9k2198208
65.9k2198208
In the case above the setState functions will be batched, But using funtional approach for setState will do it seperately?
– Haider Ali Anjum
Nov 10 at 7:52
That's correct. At least in current React version.
– estus
Nov 10 at 7:56
completely understood, nice explanation. An upvote will help more :)
– Haider Ali Anjum
Nov 10 at 7:58
Two different setState may rerender twice, you can do it in a single setStatethis.setState({ openA:true, openB: false });and for dependent values you have to use callback, since the setState is asynchronous, @estus mentioned answer will not work as expected, you have use the following methodthis.setState({ openA:true }, ()=>this.setState({openB: this.state.openB}));.
– Hafeez Hamza
Nov 10 at 8:10
Above callback is only for demonstration, for Boolean values you can set in single setState, use the above method only for complicated calculated values
– Hafeez Hamza
Nov 10 at 8:12
|
show 2 more comments
In the case above the setState functions will be batched, But using funtional approach for setState will do it seperately?
– Haider Ali Anjum
Nov 10 at 7:52
That's correct. At least in current React version.
– estus
Nov 10 at 7:56
completely understood, nice explanation. An upvote will help more :)
– Haider Ali Anjum
Nov 10 at 7:58
Two different setState may rerender twice, you can do it in a single setStatethis.setState({ openA:true, openB: false });and for dependent values you have to use callback, since the setState is asynchronous, @estus mentioned answer will not work as expected, you have use the following methodthis.setState({ openA:true }, ()=>this.setState({openB: this.state.openB}));.
– Hafeez Hamza
Nov 10 at 8:10
Above callback is only for demonstration, for Boolean values you can set in single setState, use the above method only for complicated calculated values
– Hafeez Hamza
Nov 10 at 8:12
In the case above the setState functions will be batched, But using funtional approach for setState will do it seperately?
– Haider Ali Anjum
Nov 10 at 7:52
In the case above the setState functions will be batched, But using funtional approach for setState will do it seperately?
– Haider Ali Anjum
Nov 10 at 7:52
That's correct. At least in current React version.
– estus
Nov 10 at 7:56
That's correct. At least in current React version.
– estus
Nov 10 at 7:56
completely understood, nice explanation. An upvote will help more :)
– Haider Ali Anjum
Nov 10 at 7:58
completely understood, nice explanation. An upvote will help more :)
– Haider Ali Anjum
Nov 10 at 7:58
Two different setState may rerender twice, you can do it in a single setState
this.setState({ openA:true, openB: false }); and for dependent values you have to use callback, since the setState is asynchronous, @estus mentioned answer will not work as expected, you have use the following method this.setState({ openA:true }, ()=>this.setState({openB: this.state.openB}));.– Hafeez Hamza
Nov 10 at 8:10
Two different setState may rerender twice, you can do it in a single setState
this.setState({ openA:true, openB: false }); and for dependent values you have to use callback, since the setState is asynchronous, @estus mentioned answer will not work as expected, you have use the following method this.setState({ openA:true }, ()=>this.setState({openB: this.state.openB}));.– Hafeez Hamza
Nov 10 at 8:10
Above callback is only for demonstration, for Boolean values you can set in single setState, use the above method only for complicated calculated values
– Hafeez Hamza
Nov 10 at 8:12
Above callback is only for demonstration, for Boolean values you can set in single setState, use the above method only for complicated calculated values
– Hafeez Hamza
Nov 10 at 8:12
|
show 2 more comments
up vote
1
down vote
Yes. It will run it after the first setState is complete.
answered Nov 10 at 5:55
Jordan
849
This is something I know, how will it act. the component update will be called after first set state or after second set state?
– Haider Ali Anjum
Nov 10 at 7:18
add a comment |
up vote
1
down vote
Yes. It will run it after the first setState is complete.
answered Nov 10 at 5:55
Jordan
849
This is something I know, how will it act. the component update will be called after first set state or after second set state?
– Haider Ali Anjum
Nov 10 at 7:18
add a comment |
up vote
1
down vote
up vote
1
down vote
Yes. It will run it after the first setState is complete.
answered Nov 10 at 5:55
Jordan
849
Yes. It will run it after the first setState is complete.
answered Nov 10 at 5:55
Jordan
849
answered Nov 10 at 5:55
Jordan
849
answered Nov 10 at 5:55
Jordan
849
answered Nov 10 at 5:55
Jordan
849
849
This is something I know, how will it act. the component update will be called after first set state or after second set state?
– Haider Ali Anjum
Nov 10 at 7:18
add a comment |
This is something I know, how will it act. the component update will be called after first set state or after second set state?
– Haider Ali Anjum
Nov 10 at 7:18
This is something I know, how will it act. the component update will be called after first set state or after second set state?
– Haider Ali Anjum
Nov 10 at 7:18
This is something I know, how will it act. the component update will be called after first set state or after second set state?
– Haider Ali Anjum
Nov 10 at 7:18
add a comment |
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%2f53236352%2fthis-setstate-in-callback-of-this-setstate%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
You can but likely shouldn't. Why do you think you need this?
– estus
Nov 10 at 6:40
No requirement, needs to know if we can do this. there will be 2 re-renders (one after each this.setState()) or only 1 re-render after the callback ends?
– Haider Ali Anjum
Nov 10 at 7:30