Component Life Cycle

1. Component Life Cycle Phases

Every React Component goes through three phases throughout its lifetime:

Mounting Phase
Updating Phase
Unmounting phase

2. Mounting Phase

In this phase, the instance of a component is created and inserted into the DOM.

2.1 Methods

We mainly use the three methods. The three methods are called in the given order:

constructor()
render()
componentDidMount()

2.1.1 constructor()

The

constructor()

method is used to set up the initial

state

and class variables.

Syntax:

1
2
3
4
constructor(props) {
  super(props)
  //state and class variables
}

JSX

We must call the

super(props)

method before any other statement. Calling

super(props)

makes sure that

constructor()

of the

React.Component

gets called and initializes the instance.

Initialising State through props

1
2
3
4
constructor(props) {
  super(props)
  this.state = { date: props.date }
}

JSX

2.1.2 render()

The

render()

method is used to return the JSX that is displayed in the UI.

2.1.3 componentDidMount()

The

componentDidMount()

method is used to run statements that require that the component is already placed in the DOM.

Example: set timers, initiate API calls, etc.

3. Updating Phase

In this phase, the component is updated whenever there is a change in the component's state.

3.1 Methods

3.1.1 render()

The

render()

method is called whenever there is a change in the component's state.

4. Unmounting Phase

In this phase, the component instance is removed from the DOM.

4.1 Methods

4.1.1 componentWillUnmount()

The

componentWillUnmount()

method is used to cleanup activities performed.

Example: clearing timers, cancelling API calls, etc.

5. Clock Example

File: src/App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import {Component} from 'react'
import Clock from './components/Clock'
import './App.css'
class App extends Component {
  state = {
    showClock: false
  }
  onToggleClock = () => {
    this.setState( prevState => {
      const { showClock } = prevState
      return {
        showClock: !showClock
      }
    })
  }
  render() {
    const { showClock } = this.state
    return (
      <div className="app-container">
        <button onClick={ this.onToggleClock } type="button" className="toggle-button">
          {showClock ? 'Show Clock' : 'Hide Clock'}
        </button>
        {showClock && <Clock />}
      </div>
    )
  }
}
export default App
 

JSX

Collapse

Note

The logical

operator can be handy for conditionally including an element or component.

File: src/components/Clock/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import {Component} from 'react'
import './index.css'
class Clock extends Component {
  constructor(props) {
    super(props)
    this.state = { date: new Date() }
  }
  componentDidMount() {
    this.timerID = setInterval(this.tick, 1000)
  }
  componentWillUnmount() {
    clearInterval(this.timerID)
  }
  tick = () => {
    this.setState({
      date: new Date()
    })
  }
  render() {
    const { date } = this.state
    return (
      <div className="clock-container">
        <h1 className="heading">Clock</h1>
        <p className="time">{date.toLocaleTimeString()}</p>
      </div>
    )
  }
}
export default Clock

JSX