Life Cycle Methods In React-PART1

Are you facing trouble in understanding and using the life cycle method of React without a mess. Do not worry with this article I am going to do you a favor with It. Without talking much let’s go into the topic otherwise, you will get bored.

Firstly I should say something with the latest version of React has determined some lifecycle methods are unsafe so I will not talk about them as those will be deprecated in future releases.

What are these Life cycle methods?

You can think of React lifecycle methods as the series of events that happen from the birth of a React component to its death.

Every component in React should go through this lifecycle of events.

Mounting- Birth of your Component

Updating- Growing of your component

Unmounting- Death of your component

Mounting :

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Updating:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Unmounting:

• componentWillUnmount()

Common React Lifecycle Methods

1. render()

This is the most used life cycle method in React as it is the only required method. What it does is it is handling the rendering of your component as it name says while inspecting this.sate and this.props

This method is called when mounting and updating level.

Following is the example for render() method.

class Hello extends Component{
   render(){
      return <div>Hello {this.props.name}</div>
   }
}

When we look at the example it returns a JSX code snippet. If nothing is there to render in the component render() method can return null.

You cannot call setState() inside the render method.

2. constructor()

If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

This method is only used for two purposes.

1. Initializing the state
2. Binding method to the component.

You should not called the setState method inside this. This the only one place your assign values directly to this.state on all other places where you want to set a value to state you should use setState().

This is an example of a constructor method in React.

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

3. componentDidMount()

Now your component has been mounted. This is the place where the next lifecycle method componentDidMount come in to play.

This method is called as soon as the component is mounted and ready. This is the best place to initiate API calls in order to fetch data from remote servers. In this method, you can use setState which will cause another rendering but It will happen before the browser updates the UI. This is to ensure that the user won’t see the intermediate state.

Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the constructor() instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

Now we have discussed all the common mounting Life Cycle methods in React. We will discuss other life cycle methods and uncommon Life Cycle methods incoming articles. I will update the links to those articles in this article when I finished them.

The reason why I am dividing this topic into several articles is sometimes reading a bigger article will lead to getting bored.

If you enjoy the article please give support to me by clapping. And follow me for future articles. Thank you.