React Lifecycle Methods Cheat Sheet

Eva Yi Zheng
Jun 2 · 2 min read

React.js is a handful, but that’s why cheat sheets are appreciated.

did not include the static methods

During my interviews, I was asked for the React lifecycle a few times, so it seems like the lifecycle methods are quite popular.

I have only included the ones that are more common.

What is Lifecycle?

An object goes through different events in its existence: creation, updating, and deletion. The lifecycle methods of React allow developers to manipulate that object during very specific times of that object’s life. To use the lifecycle methods, you have to use a React class component. Then, just define the method within the class.

import React, { Component } from ‘react’
import fetchAnimes from '../actions/fetchAnimes'
class AnimeContainer extends Component { componentDidMount() {
this.props.fetchAnimes()
}
render() {
return (
<div>
This method must exist.
</div>
)
}
}export default connect(null, {fetchAnimes})(AnimeContainer)

constructor()

This is the first method that a React component will go through. It will only happen once. This method is only needed if you plan on altering the original constructor method or if you plan on setting state.

render()

This is how a component will first mount. After the component is mounted, this method will be invoked whenever React’s virtual DOM detects a change.

This is the one method that has to exist within a React class component. Every other method is optional. This method must return one JSX element.

componentDidMount()

Since a component can only be mounted once, this method will only be called one time and that is when the component is successfully mounted. Typically, fetch requests are made in this method.

shouldComponentUpdate()

Perhaps you don’t want React to re-render after every little change. You can use this method to manually control when a component should update. Should return a boolean value.

componentDidUpdate()

This method can be used when you want to send the update to another library or you want the update to trigger another event.

componentWillUnmount()

This method is called right before a component is unmounted. If you have background fetch requests that have been happening every few seconds, this is the method where you can stop them.

There are a few other methods such as getSnapshotBeforeUpdate and static getDerivedStateFromProps() but they only added to my confusion when I first started learning about React.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Eva Yi Zheng

Written by

I like to write about everything! I also like designing random things! (https://girly-programmer.creator-spring.com/)

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.