React Component Lifecycle Methods Cheatsheet

Each component in React has a lifecycle which you can monitor and manipulate.

Lifecycle Explanation:

• Mounting: Called before your component is displayed on the UI.
• Updating: Caused by a change to props or state and rerendered the UI.
• Unmounting: Called when your UI will no longer display the component.

Mounting

constructor

• Lifecycle: Mount immediately before render.
• Purpose: Initialize state.

// Commonly Used Lifecycle Methods constructor() { } 

componentDidMount

• Lifecycle: Mount immediately after render.
• Purpose: Initialize state that requires DOM nodes, Network requests and side effects.

componentDidMount() { } 

Updating

shouldComponentUpdate

• Lifecycle: Update immediately before render.
• Purpose: Allows developer to prevent rendering.

shouldComponentUpdate(nextProps, nextState) { // Optional Parameters } 

render

Code to display the component.

// Required render() { } 

getSnapshotBeforeUpdate

• Lifecycle: Update immediately before render output is committed to DOM.
• Purpose: Capture DOM information such as scroll position which could change.

getSnapshotBeforeUpdate(prevProps, prevState) { // Optional Parameters } 

componentDidUpdate

• Lifecycle: Update immediately after render.
• Purpose: Operate on updated DOM or handle network requests.

componentDidUpdate(prevProps, prevState, snapshot) { // Optional Parameters } 

Mounting & Updating

getDerivedStateFromProps

• Lifecycle: Mount and update immediately before render.
• Purpose: When your state depends on props (should be avoided).

// Rarely Used Lifecycle Methods static getDerivedStateFromProps(props, state) { // Optional Parameters } 

Unmounting

componentWillUnmount

• Lifecycle: Unmount.
• Purpose: Clean up things such as event handlers, cancel network request, etc.

componentWillUnmount() { } 

Other Methods

componentDidCatch

Creates an error boundary to captures errors from child components.

// Special Use Cases componentDidCatch(error, info) { // Optional Parameters } 

References

React.Component - React

Thanks for reading ❤ Say Hello! Github | LinkedIn | Twitter