Lifecycle Methods in Practice
Use your knowledge of lifecycle methods learned so far and see them in action.
We'll cover the following...
Implementing lifecycle methods
Let’s have a look at how lifecycle methods behave in a simple component. The code implements a component that updates its own state every second and displays the current time. As soon as the component mounts, an interval is started which updates the state of our component in the componentDidMount()
method. A re-render is triggered, and the current time is shown again.
import React from 'react'; require('./style.css'); import ReactDOM from 'react-dom'; import Clock from './app.js'; ReactDOM.render( <Clock />, document.getElementById('root') );
setState()
We see that the lifecycle methods componentDidMount()
and componentWillUnmount()
...