React componentDidUpdate() Method
React Component LifecycleThe componentDidUpdate() method format is as follows:
componentDidUpdate(prevProps, prevState, snapshot)
The componentDidUpdate() method is immediately called after the component is updated.
This method is not executed during the initial render.
You can also call setState() directly in componentDidUpdate(), but note that it must be wrapped in a conditional statement.
The following example usescomponentDidUpdate()The method is executed after the component is updated; the component usescomponentDidMount()The method will1The modification operation occurs after seconds:
Example
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: "example"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritesite: "google"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"After the update, the favorite is" + this.state.favoritesite;
}
render() {
return (
<div>
<h1>My favorite website is{this.state.favoritesite}</h1>
<div id="mydiv"></div>
</div>
);
}
}
Try it Yourself »