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 '18 at 15:02
Roman RomanRoman 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 '18 at 15:02
Roman RomanRoman 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 '18 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 '18 at 15:02
Roman RomanRoman 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 '18 at 15:02
Roman RomanRoman Roman
30711
asked Nov 12 '18 at 15:02
Roman RomanRoman Roman
30711
asked Nov 12 '18 at 15:02
Roman RomanRoman Roman
30711
asked Nov 12 '18 at 15:02
Roman RomanRoman Roman
30711
asked Nov 12 '18 at 15:02
Roman RomanRoman 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 '18 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 '18 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 '18 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 '18 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 '18 at 15:07
Sagiv b.gSagiv b.g
16k32054
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 '18 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 '18 at 15:06
vijaystvijayst
6,04393875
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 '18 at 15:09
DmitriyDmitriy
485112
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 '18 at 15:06
Bhojendra RauniyarBhojendra Rauniyar
50.8k2079125
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 '18 at 15:07
Sagiv b.gSagiv b.g
16k32054
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 '18 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 '18 at 15:07
Sagiv b.gSagiv b.g
16k32054
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 '18 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 '18 at 15:07
Sagiv b.gSagiv b.g
16k32054
"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 '18 at 15:07
Sagiv b.gSagiv b.g
16k32054
edited Nov 12 '18 at 15:08
answered Nov 12 '18 at 15:07
Sagiv b.gSagiv b.g
16k32054
answered Nov 12 '18 at 15:07
Sagiv b.gSagiv b.g
16k32054
answered Nov 12 '18 at 15:07
Sagiv b.gSagiv b.g
16k32054
16k32054
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 '18 at 15:07
add a comment |
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 '18 at 15:07
1
1
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 '18 at 15:07
Thanks. It's what I wanted to know
– Roman Roman
Nov 12 '18 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 '18 at 15:06
vijaystvijayst
6,04393875
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 '18 at 15:06
vijaystvijayst
6,04393875
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 '18 at 15:06
vijaystvijayst
6,04393875
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 '18 at 15:06
vijaystvijayst
6,04393875
answered Nov 12 '18 at 15:06
vijaystvijayst
6,04393875
answered Nov 12 '18 at 15:06
vijaystvijayst
6,04393875
answered Nov 12 '18 at 15:06
vijaystvijayst
6,04393875
6,04393875
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 '18 at 15:09
DmitriyDmitriy
485112
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 '18 at 15:09
DmitriyDmitriy
485112
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 '18 at 15:09
DmitriyDmitriy
485112
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 '18 at 15:09
DmitriyDmitriy
485112
answered Nov 12 '18 at 15:09
DmitriyDmitriy
485112
answered Nov 12 '18 at 15:09
DmitriyDmitriy
485112
answered Nov 12 '18 at 15:09
DmitriyDmitriy
485112
485112
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 '18 at 15:06
Bhojendra RauniyarBhojendra Rauniyar
50.8k2079125
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 '18 at 15:06
Bhojendra RauniyarBhojendra Rauniyar
50.8k2079125
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 '18 at 15:06
Bhojendra RauniyarBhojendra Rauniyar
50.8k2079125
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 '18 at 15:06
Bhojendra RauniyarBhojendra Rauniyar
50.8k2079125
edited Nov 12 '18 at 15:16
answered Nov 12 '18 at 15:06
Bhojendra RauniyarBhojendra Rauniyar
50.8k2079125
answered Nov 12 '18 at 15:06
Bhojendra RauniyarBhojendra Rauniyar
50.8k2079125
answered Nov 12 '18 at 15:06
Bhojendra RauniyarBhojendra Rauniyar
50.8k2079125
50.8k2079125
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%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 '18 at 15:05