dots Created with Sketch.
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(),
     1000
  );
}


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() {
    clearInterval(this.timerID);
}


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?

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
CSS Attribute SelectorsCSSHow to get the full URL of current page in PHP?PHP2 Ways We Can Write Multiple Line Commands in PHPPHPHow to apply style only to first child and/or only to children other than the first child?CSSHow destructuring works in React?ReactHow to import MySQL small sample database into phpMySQL?SQL/MySQL