All of our Components that we create in React have a Lifecycle which outlines their interaction with the DOM. By using Lifecycle methods, developers are given control to decide which React events cause actual changes (or prohibit changes) to the DOM. For example, we may want to retrieve a user’s data from an API just after the component initially mounts to the DOM. For this, we’d use the Lifecycle method “componentDidMount”.
The first event to occur is simply the component first mounting itself to the DOM. There are also events such as Component’s State changing which will need to trigger an update to the DOM so that the user can see the State change. Another Lifecycle phase is when the component removes itself, or unmounts, from the DOM. We’ve just described the 3 Lifecycle phases that occur: Mounting, Updating, and Unmounting.
Note: There is an additional Lifecycle phase that we will not cover called Error Handling.
There are Lifecycle methods that we can use for each of these phases which allow us the flexibility to decide what the user sees at specific points in the Component’s Lifecycle. For example, we can specify what the Component should be doing just before it mounts, directly after it mounts, before it unmounts, etc. We will go through the Lifecycle phases and their specific methods.
Mounting Phase Lifecycle Methods
componentWillMount()
-This method was deprecated in React 16.3 (early 2018)
-Executed right before the component is initially rendered to the DOM
-Since the component is not yet mounted to the DOM, changing a State will not trigger a re-render of the DOM. Instead, the initial render of the DOM will be changed
-Commonly used for connecting to an external API
componentDidMount()
-One of the most popular Lifecyle methods!
-Executed right after the component is initially rendered to the DOM
-Commonly used for AJAX requests or API calls. Such calls/requests will not run until/unless the component actually is mounted. Therefore, this allows us to render the component even if these calls are not successful.
componentWillReceiveProps()
-Executed before a component receives updated props
-This method actually gets the updated props passed to it:
componentWillReceiveProps(someProps) {
console.log(“Component will receive props”, someProps);
}
Updating Phase Lifecycle Methods
shouldComponentUpdate()
-Tells React whether a component should/shouldn’t re-render
-Executed before re-rending to the DOM, but after receiving new props or new state (by comparing new Virtual DOM to old Virtual DOM)
-Commonly used to tell a component that re-renders a large number of times not to re-render for specific occasions so that the app’s performance is better
-This method actually gets the updated props and state passed to it:
shouldComponentUpdate(someProps, someState) {
console.log(“Should component update”, someProps, someState);
return true;
}
componentWillUpdate()
– Similar to shouldComponentUpdate(), this executes before re-rending to the DOM, but after receiving new props or new state. This executes if shouldComponentUpdate doesn’t return “False”
-This method actually gets the updated props and state passed to it:
componentWillUpdate(someProps, someState) {
console.log(“Component Will update”, someProps, someState);
}
componentDidUpdate()
-Executed right after the component is re-rendered to the DOM
-Commonly used to get updates for third-party libraries to make sure these third-party libraries update as well
-This method actually gets the previous props and state passed to it:
componenDidUpdate(prevProps, prevState) {
console.log(“Component Did update”, prevProps, prevState);
}
Unmounting Phase Lifecycle Methods
componentWillUnmount()
-Executed right before the component unmounts from the DOM
-Commonly used to clean up the component. For example, automatically logging out a user and clearing their user auth tokens/details before the component unmounts.
Now that we know the different Lifecycles and their Methods, we can use them in our components to have better control of our data displaying on the DOM. Before we go, it is important to understand how React is able to manipulate the DOM. In terms of our application’s performance, the worst case would be that the entire DOM gets re-rendered upon every State change in any component. This is why React uses a concept called the Virtual DOM. The Virtual DOM is a representation of the actual DOM. The actual DOM is what gets rendered by the browser. Accessing/re-rending the actual DOM is very slow. So, React creates for us a Virtual DOM which is faster (a JavaScript representation of the actual DOM). And when we make a change to the Virtual DOM (for example, changing the State of a component), it will make a change to the Virtual DOM and compare it to the old Virtual DOM (which was made from the actual DOM). It then compares the new Virtual DOM to the old Virtual DOM and if there is a difference, it will trigger an update to the actual DOM (i.e. the “Updating Phase” Lifecycle is triggered). If it needs to make a change to the actual DOM, it will only trigger a re-render for the specific piece of the DOM that needs updated, which saves a lot of performance time! Now that we’ve cleared that up, check out the helpful resource below and happy coding!
Resources:
The following YouTube video (and series) very clearly explains React Component Lifecycle: