What is “updating” in React?
As React Documentation says:
componentDidUpdate()is invoked immediately after updating occurs
But I've noticed that componentDidUpdate() is invoked even a browser DOM element isn't updated.
So, what does the React Documentation mean by updating occurs?
javascript reactjs
asked Nov 12 at 15:02
Roman Roman
30711
add a comment |
As React Documentation says:
componentDidUpdate()is invoked immediately after updating occurs
But I've noticed that componentDidUpdate() is invoked even a browser DOM element isn't updated.
So, what does the React Documentation mean by updating occurs?
javascript reactjs
asked Nov 12 at 15:02
Roman Roman
30711
2
It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
– DBS
Nov 12 at 15:05
add a comment |
As React Documentation says:
componentDidUpdate()is invoked immediately after updating occurs
But I've noticed that componentDidUpdate() is invoked even a browser DOM element isn't updated.
So, what does the React Documentation mean by updating occurs?
javascript reactjs
asked Nov 12 at 15:02
Roman Roman
30711
As React Documentation says:
componentDidUpdate()is invoked immediately after updating occurs
But I've noticed that componentDidUpdate() is invoked even a browser DOM element isn't updated.
So, what does the React Documentation mean by updating occurs?
javascript reactjs
javascript reactjs
asked Nov 12 at 15:02
Roman Roman
30711
asked Nov 12 at 15:02
Roman Roman
30711
asked Nov 12 at 15:02
Roman Roman
30711
asked Nov 12 at 15:02
Roman Roman
30711
asked Nov 12 at 15:02
Roman Roman
30711
30711
2
It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
– DBS
Nov 12 at 15:05
add a comment |
2
It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
– DBS
Nov 12 at 15:05
2
2
It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
– DBS
Nov 12 at 15:05
It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
– DBS
Nov 12 at 15:05
add a comment |
4 Answers
4
active
oldest
votes
"updating" is not DOM updates only but is part of the life cycle.
It occurs when there are new props, state updates and force updates
You can see this part in this diagram taken from the DOCS
answered Nov 12 at 15:07
Sagiv b.g
15.8k21954
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 at 15:07
add a comment |
componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.
Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.
answered Nov 12 at 15:06
vijayst
5,97893775
add a comment |
componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.
answered Nov 12 at 15:09
Dmitriy
477112
add a comment |
The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.
This picture should give you detailed information on updates:
So, you can see componentDidUpdate() is invoked immediately after updating occurs.
answered Nov 12 at 15:06
Bhojendra Rauniyar
50.6k1979124
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%2f53264873%2fwhat-is-updating-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
"updating" is not DOM updates only but is part of the life cycle.
It occurs when there are new props, state updates and force updates
You can see this part in this diagram taken from the DOCS
answered Nov 12 at 15:07
Sagiv b.g
15.8k21954
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 at 15:07
add a comment |
"updating" is not DOM updates only but is part of the life cycle.
It occurs when there are new props, state updates and force updates
You can see this part in this diagram taken from the DOCS
answered Nov 12 at 15:07
Sagiv b.g
15.8k21954
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 at 15:07
add a comment |
"updating" is not DOM updates only but is part of the life cycle.
It occurs when there are new props, state updates and force updates
You can see this part in this diagram taken from the DOCS
answered Nov 12 at 15:07
Sagiv b.g
15.8k21954
"updating" is not DOM updates only but is part of the life cycle.
It occurs when there are new props, state updates and force updates
You can see this part in this diagram taken from the DOCS
answered Nov 12 at 15:07
Sagiv b.g
15.8k21954
edited Nov 12 at 15:08
answered Nov 12 at 15:07
Sagiv b.g
15.8k21954
answered Nov 12 at 15:07
Sagiv b.g
15.8k21954
answered Nov 12 at 15:07
Sagiv b.g
15.8k21954
15.8k21954
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 at 15:07
add a comment |
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 at 15:07
1
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 at 15:07
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 at 15:07
add a comment |
componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.
Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.
answered Nov 12 at 15:06
vijayst
5,97893775
add a comment |
componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.
Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.
answered Nov 12 at 15:06
vijayst
5,97893775
add a comment |
componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.
Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.
answered Nov 12 at 15:06
vijayst
5,97893775
componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.
Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.
answered Nov 12 at 15:06
vijayst
5,97893775
answered Nov 12 at 15:06
vijayst
5,97893775
answered Nov 12 at 15:06
vijayst
5,97893775
answered Nov 12 at 15:06
vijayst
5,97893775
5,97893775
add a comment |
add a comment |
componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.
answered Nov 12 at 15:09
Dmitriy
477112
add a comment |
componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.
answered Nov 12 at 15:09
Dmitriy
477112
add a comment |
componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.
answered Nov 12 at 15:09
Dmitriy
477112
componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.
answered Nov 12 at 15:09
Dmitriy
477112
answered Nov 12 at 15:09
Dmitriy
477112
answered Nov 12 at 15:09
Dmitriy
477112
answered Nov 12 at 15:09
Dmitriy
477112
477112
add a comment |
add a comment |
The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.
This picture should give you detailed information on updates:
So, you can see componentDidUpdate() is invoked immediately after updating occurs.
answered Nov 12 at 15:06
Bhojendra Rauniyar
50.6k1979124
add a comment |
The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.
This picture should give you detailed information on updates:
So, you can see componentDidUpdate() is invoked immediately after updating occurs.
answered Nov 12 at 15:06
Bhojendra Rauniyar
50.6k1979124
add a comment |
The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.
This picture should give you detailed information on updates:
So, you can see componentDidUpdate() is invoked immediately after updating occurs.
answered Nov 12 at 15:06
Bhojendra Rauniyar
50.6k1979124
The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.
This picture should give you detailed information on updates:
So, you can see componentDidUpdate() is invoked immediately after updating occurs.
answered Nov 12 at 15:06
Bhojendra Rauniyar
50.6k1979124
edited Nov 12 at 15:16
answered Nov 12 at 15:06
Bhojendra Rauniyar
50.6k1979124
answered Nov 12 at 15:06
Bhojendra Rauniyar
50.6k1979124
answered Nov 12 at 15:06
Bhojendra Rauniyar
50.6k1979124
50.6k1979124
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.
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.
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%2f53264873%2fwhat-is-updating-in-react%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
2
It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
– DBS
Nov 12 at 15:05