Slide 16.16: React lifecycle

React Lifecycle

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: (i) mounting, (ii) updating, and (iii) unmounting.

Mounting
Mounting means putting elements into the DOM. React has four built-in methods that gets called, in this order, when mounting a component:

The render() method is required and will always be called, the others are optional and will be called if you define them.

Updating
The next phase in the lifecycle is when a component is updated. A component is updated whenever there is a change in the component’s state or props. React has five built-in methods that gets called, in this order, when a component is updated:

The render() method is required and will always be called, the others are optional and will be called if you define them.

Unmounting
The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it. React has only one built-in method that gets called when a component is unmounted:

componentWillUnmount()

<html>
 <head>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <title>React lifecycle</title>
 </head>
 <body> 
  <div id="root">Hello, World!</div>

class Child extends React.Component {
    componentWillUnmount( ) {
     alert( "The component named Header is about to be unmounted." );
    }
    render( ) {
     return (
      <h3>Hello World!</h3>
     );
    }
   }
   ReactDOM.render( <Container />, document.getElementById( 'root' ) );
  </script>

</body>
</html>