One of the advantages of using class components over regular functions is being able to use special React methods or hooks that allow us to update the UI and application state. Understanding when to use each of the methods is important in loading your application the way you want it to.
There are 3 categories that we’ll go over:
We’ll cover all of the lifecycle methods listed above and demonstrate with examples so we can see and understand when the methods are getting called.
Note: The methods highlighted pink are rarely used.
Mounting
When the component is initially created, it gets mounted onto the DOM.
constructor()
- Called first and only once when the page loads
- Used to set initial state
static getDerivedStateFromProps(nextProps, prevState)
- Called right before the initial render and all re-renders
- Rarely used
render()
- This is the only required method in a class component.
- Called every time React updates and commits to the DOM
- Used for writing JSX for components
componentDidMount()
- Called once when component is constructed and gets added to the DOM (right after render).
- Could be used to fetch data and have it displayed right after rendering is done
Updating
Whenever a component’s state or props are changed, it gets re-rendered on the page.
static getDerivedStateFromProps(nextProps, prevState)
- Called before every render
- Rarely used — copy props into state
shouldComponentUpdate(nextProps, nextState)
- Returns a boolean — default is set to true
- Runs immediately before render or when new props and/or state is received by the component.
- Called before every re-render but not initially
- Could be used to stop unnecessary re-renders for performance optimization
render()
- This is the only required method in a class component.
- For updates, render() will not be invoked if shouldComponentUpdate() returns false.
getSnapshotBeforeUpdate(prevProps, prevState)
- This method is to allow us to capture some properties that are not stored in the state before we render that component. (i.e. if user scrolled to a specific location on the page and you want to store the position and use it later)
- Called just before React updates and commits new content to the DOM
- Rarely used but can capture data that may be changing rapidly
componentDidUpdate(previousProps, previousState, snapshot)
- Called just after a re-render has finished
- Used for any DOM updates following a render
Unmounting
At this stage, the component gets deleted and cleared out of the DOM.
When we first load the page, this component gets mounted. When we increment or decrement the counter, it gets re-rendered. Notice the code on line 13 in the App.js file:
{this.state.visible ? <Counter /> : null}
When we toggle the counter off, null gets displayed and no longer rendering the counter in the return statement. This triggers the componentWillUnmount method, which gets called right before the component gets unmounted from the DOM. This results in losing the state and resetting the counter back its initial state — zero.
Deprecated Methods
Avoid using the following methods as they will be removed in the React 17.0 release:
- componentWillMount()
- componentWillUpdate(nextProps, nextState)
- componentWillReceiveProps(nextProps)
