Yogesh Chauhan's Blog

How to add Lifecycle Methods to a Class in React?

in React on April 26, 2021

Let’s catch up what we’ve done so far.

We saw earlier in this Components and Props in React post that you can declare the components in two different ways. No matter which method you use to do so, one thing is clear. It must not modify its props.

That’s where the states concept comes into play.

So, we learned How to convert a function component into a class in React?

Then, we went through the steps on How to add Local State to a Class in React?

Now, it’s time to add Lifecycle Methods.

When any element is rendered to the DOM for the first time, it’s called “mounting” and when it’s removed from the DOM, it’s called “unmounting”.

We need to add some code to run when those events occur. Thankfully, React has a solution.

React has special methods such as componentDidMount and componentWillUnmount for those events. Those are called “lifecycle methods”.

We can use componentDidMount method to start the timer using setInterval:

componentDidMount() {
  this.timerID = setInterval(
     () => this.tick(),

The code above will run after the component is rendered to the DOM.

We have saved the setInterval function into a variable since it’ll be needed to clear the timer later on.

And we can use componentWillUnmount to clear the variable:

componentWillUnmount() {

That’s it we just added the lifecycle methods.

What happens next to this whole process? Find out in this post: How states work in React?

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to make a curtain slider using jQuery and CSS?CSSAvoid using new Array() in JavaScriptJavaScriptHow to float an image around texts?CSSWhat are Class Constants in PHP?PHPDebugging in WordPress Part 1: WP_DEBUGWordPressWindow setInterval() Method in JavaScriptJavaScript