why componentDidUpdate run multiple times
I really don't understand the react life cycle. I run console.log in componentDidUpdate() and saw that it ran multiple times
Console showed that componentDidUpdate ran 3 times
reactjs react-lifecycle
asked Nov 15 '18 at 18:05
Neyu NguyenNeyu Nguyen
83
add a comment |
I really don't understand the react life cycle. I run console.log in componentDidUpdate() and saw that it ran multiple times
Console showed that componentDidUpdate ran 3 times
reactjs react-lifecycle
asked Nov 15 '18 at 18:05
Neyu NguyenNeyu Nguyen
83
1
Please include a Minimal, Complete, and Verifiable example, or it will be very difficult to help you.
– Tholle
Nov 15 '18 at 18:09
The reason for a component to call componentDidUpdate() is this its state or props has been updated. This is caused by calling setState() in your component or the parent's component changing its props to your component.
– Shawn Andrews
Nov 15 '18 at 18:17
...or parent is re-rendered and this concrete child is notPureComponentso it's re-rendered too
– skyboyer
Nov 15 '18 at 18:37
add a comment |
I really don't understand the react life cycle. I run console.log in componentDidUpdate() and saw that it ran multiple times
Console showed that componentDidUpdate ran 3 times
reactjs react-lifecycle
asked Nov 15 '18 at 18:05
Neyu NguyenNeyu Nguyen
83
I really don't understand the react life cycle. I run console.log in componentDidUpdate() and saw that it ran multiple times
Console showed that componentDidUpdate ran 3 times
reactjs react-lifecycle
reactjs react-lifecycle
asked Nov 15 '18 at 18:05
Neyu NguyenNeyu Nguyen
83
asked Nov 15 '18 at 18:05
Neyu NguyenNeyu Nguyen
83
asked Nov 15 '18 at 18:05
Neyu NguyenNeyu Nguyen
83
asked Nov 15 '18 at 18:05
Neyu NguyenNeyu Nguyen
83
asked Nov 15 '18 at 18:05
Neyu NguyenNeyu Nguyen
83
83
1
Please include a Minimal, Complete, and Verifiable example, or it will be very difficult to help you.
– Tholle
Nov 15 '18 at 18:09
The reason for a component to call componentDidUpdate() is this its state or props has been updated. This is caused by calling setState() in your component or the parent's component changing its props to your component.
– Shawn Andrews
Nov 15 '18 at 18:17
...or parent is re-rendered and this concrete child is notPureComponentso it's re-rendered too
– skyboyer
Nov 15 '18 at 18:37
add a comment |
1
Please include a Minimal, Complete, and Verifiable example, or it will be very difficult to help you.
– Tholle
Nov 15 '18 at 18:09
The reason for a component to call componentDidUpdate() is this its state or props has been updated. This is caused by calling setState() in your component or the parent's component changing its props to your component.
– Shawn Andrews
Nov 15 '18 at 18:17
...or parent is re-rendered and this concrete child is notPureComponentso it's re-rendered too
– skyboyer
Nov 15 '18 at 18:37
1
1
Please include a Minimal, Complete, and Verifiable example, or it will be very difficult to help you.
– Tholle
Nov 15 '18 at 18:09
Please include a Minimal, Complete, and Verifiable example, or it will be very difficult to help you.
– Tholle
Nov 15 '18 at 18:09
The reason for a component to call componentDidUpdate() is this its state or props has been updated. This is caused by calling setState() in your component or the parent's component changing its props to your component.
– Shawn Andrews
Nov 15 '18 at 18:17
The reason for a component to call componentDidUpdate() is this its state or props has been updated. This is caused by calling setState() in your component or the parent's component changing its props to your component.
– Shawn Andrews
Nov 15 '18 at 18:17
...or parent is re-rendered and this concrete child is not
PureComponent so it's re-rendered too– skyboyer
Nov 15 '18 at 18:37
...or parent is re-rendered and this concrete child is not
PureComponent so it's re-rendered too– skyboyer
Nov 15 '18 at 18:37
add a comment |
2 Answers
2
active
oldest
votes
componentDidUpdate() is invoked immediately after updating occurs.
your problem may be accorded because the state has been changed, props received or parent re-rendred.
if you are new with React, I recommend you to read the following article:
Post-Render with componentDidUpdate()
answered Nov 24 '18 at 10:32
Nir BerkoNir Berko
654112
add a comment |
Maybe I can give you an extra example when your issue happens since I cannot see your code.
componentDidUpdate(prevProps, prevState)
const something = this.props;
if (prevProps.something !== something) this.apiCall();
console.log('something')
when you change your state or props, componentDidUpdate is being invoked, and apiCall function makes http request via fetch or axios, and change the state twice using setState function.
whenever state gets changed, new render() is being invoked and componentDidUpdate follows.
but the condition
if (prevProps.something !== something) this.apiCall();
may not be satisfied anymore, just console logging at this time instead of calling apiCall function which would trigger inifinite loop.
hope it helps.
answered Mar 1 at 6:40
kookoo
31113
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%2f53325455%2fwhy-componentdidupdate-run-multiple-times%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
componentDidUpdate() is invoked immediately after updating occurs.
your problem may be accorded because the state has been changed, props received or parent re-rendred.
if you are new with React, I recommend you to read the following article:
Post-Render with componentDidUpdate()
answered Nov 24 '18 at 10:32
Nir BerkoNir Berko
654112
add a comment |
componentDidUpdate() is invoked immediately after updating occurs.
your problem may be accorded because the state has been changed, props received or parent re-rendred.
if you are new with React, I recommend you to read the following article:
Post-Render with componentDidUpdate()
answered Nov 24 '18 at 10:32
Nir BerkoNir Berko
654112
add a comment |
componentDidUpdate() is invoked immediately after updating occurs.
your problem may be accorded because the state has been changed, props received or parent re-rendred.
if you are new with React, I recommend you to read the following article:
Post-Render with componentDidUpdate()
answered Nov 24 '18 at 10:32
Nir BerkoNir Berko
654112
componentDidUpdate() is invoked immediately after updating occurs.
your problem may be accorded because the state has been changed, props received or parent re-rendred.
if you are new with React, I recommend you to read the following article:
Post-Render with componentDidUpdate()
answered Nov 24 '18 at 10:32
Nir BerkoNir Berko
654112
answered Nov 24 '18 at 10:32
Nir BerkoNir Berko
654112
answered Nov 24 '18 at 10:32
Nir BerkoNir Berko
654112
answered Nov 24 '18 at 10:32
Nir BerkoNir Berko
654112
654112
add a comment |
add a comment |
Maybe I can give you an extra example when your issue happens since I cannot see your code.
componentDidUpdate(prevProps, prevState)
const something = this.props;
if (prevProps.something !== something) this.apiCall();
console.log('something')
when you change your state or props, componentDidUpdate is being invoked, and apiCall function makes http request via fetch or axios, and change the state twice using setState function.
whenever state gets changed, new render() is being invoked and componentDidUpdate follows.
but the condition
if (prevProps.something !== something) this.apiCall();
may not be satisfied anymore, just console logging at this time instead of calling apiCall function which would trigger inifinite loop.
hope it helps.
answered Mar 1 at 6:40
kookoo
31113
add a comment |
Maybe I can give you an extra example when your issue happens since I cannot see your code.
componentDidUpdate(prevProps, prevState)
const something = this.props;
if (prevProps.something !== something) this.apiCall();
console.log('something')
when you change your state or props, componentDidUpdate is being invoked, and apiCall function makes http request via fetch or axios, and change the state twice using setState function.
whenever state gets changed, new render() is being invoked and componentDidUpdate follows.
but the condition
if (prevProps.something !== something) this.apiCall();
may not be satisfied anymore, just console logging at this time instead of calling apiCall function which would trigger inifinite loop.
hope it helps.
answered Mar 1 at 6:40
kookoo
31113
add a comment |
Maybe I can give you an extra example when your issue happens since I cannot see your code.
componentDidUpdate(prevProps, prevState)
const something = this.props;
if (prevProps.something !== something) this.apiCall();
console.log('something')
when you change your state or props, componentDidUpdate is being invoked, and apiCall function makes http request via fetch or axios, and change the state twice using setState function.
whenever state gets changed, new render() is being invoked and componentDidUpdate follows.
but the condition
if (prevProps.something !== something) this.apiCall();
may not be satisfied anymore, just console logging at this time instead of calling apiCall function which would trigger inifinite loop.
hope it helps.
answered Mar 1 at 6:40
kookoo
31113
Maybe I can give you an extra example when your issue happens since I cannot see your code.
componentDidUpdate(prevProps, prevState)
const something = this.props;
if (prevProps.something !== something) this.apiCall();
console.log('something')
when you change your state or props, componentDidUpdate is being invoked, and apiCall function makes http request via fetch or axios, and change the state twice using setState function.
whenever state gets changed, new render() is being invoked and componentDidUpdate follows.
but the condition
if (prevProps.something !== something) this.apiCall();
may not be satisfied anymore, just console logging at this time instead of calling apiCall function which would trigger inifinite loop.
hope it helps.
answered Mar 1 at 6:40
kookoo
31113
edited Mar 1 at 7:01
answered Mar 1 at 6:40
kookoo
31113
answered Mar 1 at 6:40
kookoo
31113
answered Mar 1 at 6:40
kookoo
31113
31113
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%2f53325455%2fwhy-componentdidupdate-run-multiple-times%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
Please include a Minimal, Complete, and Verifiable example, or it will be very difficult to help you.
– Tholle
Nov 15 '18 at 18:09
The reason for a component to call componentDidUpdate() is this its state or props has been updated. This is caused by calling setState() in your component or the parent's component changing its props to your component.
– Shawn Andrews
Nov 15 '18 at 18:17
...or parent is re-rendered and this concrete child is not
PureComponentso it's re-rendered too– skyboyer
Nov 15 '18 at 18:37