Note: These notes are taken from Colt steele’s Modern React Bootcamp course

React Component Lifecycle

• Each component has several “lifecycle methods” that one can override to run code at particular times in the process.

• These components comes with methods which allows developers to update application state and reflect the changes to the UI before/after key react “events”.

• There are three main phases in a component’s lifecycle:

  • mounting
  • updating
  • unmounting

Mounting

These methods are called in the following order

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

constructor()

Often used for initializing state or binding event handlers to class instance.

 1class MyComponent extends Component {
 2  constructor(props) {
 3    super(props);
 4    this.state = {
 5      count: 0,
 6      value: "Hey There!",
 7    };
 8
 9    this.handleClick = this.handleClick.bind(this);
10  }
11}

render()

After the constructor, React calls render(). It tells React what should be displayed. React updates the DOM to match the output of render().

componentDidMount()

• This method runs after the component is mounted.

• Mounting is the first time the component is rendered to DOM.

• This is a good place to load any data via AJAX or set up subscriptions/timers.

• Calling setState() here will trigger rerender, so be cautious.

• componentDidMount() method runs after the component has been rendered.

1class Clock extends Component {
2  componentDidMount() {
3    this.timerID = setInterval(() => {
4      this.tick();
5    }, 1000);
6  }
7
8  // ...
9}

componentDidMount is also quite useful for making AJAX requests when the component is mounted

 1class GitHubUserInfo extends Component {
 2  componentDidMount() {
 3    axios.get("https://api.github.com/users/facebook").then((response) => {
 4      let user = response.data;
 5      this.setState({ user });
 6    });
 7  }
 8
 9  // ...
10}

• We can also make componentDidMount an async function:

1class GitHubUserInfo extends Component {
2  async componentDidMount() {
3    let response = await axios.get("https://api.github.com/users/elie");
4    let user = response.data;
5    this.setState({ user });
6  }
7
8  // ...
9}

Updating

This a suitable place to implement any side effect operations.

• syncing up with localStorage
• auto-saving
• updating DOM for uncontrolled components

This is the order of methods called when a component is being re-rendered:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

componentDidUpdate()

• This method is called after every render occurs.
• You can do a comparison between the previous and current props and state:

1componentDidUpdate(prevProps, prevState) {
2  // you can call setState here as well if you need!
3}

• Note : componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.

Unmounting

componentWillUnmount()

• When component is unmounted or destroyed, this will be called.
• This is a place to do some clean up like:
  • Invalidating timers
  • Canceling network request
  • Removing event handlers directly put on DOM
  • Cleaning up subscriptions
• Calling setState here is useless — there will be no re-rendering after this!

 1class Clock extends Component {
 2  componentDidMount() {
 3    this.timerID = setInterval(() => {
 4      this.tick();
 5    }, 1000);
 6  }
 7
 8  componentWillUnmount() {
 9    clearInterval(this.timerID);
10  }
11
12  // ...
13}

Error Handling

These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

• static getDerivedStateFromError()
• componentDidCatch()

Visualize component lifecycle