componentDidUpdate is not firing
As per the DOC:
An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUpdate:
componentWillUpdate() is invoked immediately before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render.
In Home component you didn't define any state
and you are not using any props
also, that't why that function
will not get called.
Check this example componentDidUpdate
will get called when you click on Click Me text:
class Home extends React.Component {
constructor(){
super();
this.state = {a: false}
}
componentDidUpdate() {
console.log("Updated!");
}
render() {
return (
<div>
<h2>Home</h2>
<p onClick={()=>this.setState({a: !this.state.a})}>Click Me</p>
</div>
);
}
}
ReactDOM.render(<Home/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>