React Component LifeCycle Methods


 In this section, we going to learn what is the component lifecycle method. In many situations in which you need more granular control over a component. for instance, if you are creating a checkbox which changes the size when we click on its base on the screen width.

Or wanted to create a component which calls an ajax request when we load the page mount the component. The best approach is to use component lifecycle events. By mounting events, you can inject the necessary logic into components.

Moreover, you can use other events to make components smarter by providing specific logic about whether or not to re-render their views.

Each component has several “lifecycle methods” that you can override to run code at particular times in the process. These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

let’s say you created a component and start your development server.

The react lifecycle event will first call the constructor of the class which creates an instance of the component. then it will call the getDerivedStateFromProps()method this will return an object to update the state, or null to update nothing and just after that the render method is called.

The react component event lifecycle belongs to three categories.
  • Mounting events — Happen when a React element (an instance of a component class) is attached to a DOM node
  • Updating events — Happen when a React element is updated as a result of new values of its properties or state
  • Unmounting events — Happen when a React element is detached from the DOM

Each and every React component has lifecycle events that are triggered at certain moments depending on what a component has done or will do. 

In these three categories react defines several component events.

Mounting events

React invokes events only once.

  • componentWillMount()—Happens before mounting to the DOM
  • componentDidMount()—Happens after mounting and rendering

Updating events

React can invoke events many times.

  • componentWillReceiveProps(nextProps)—Happens when the component is about to receive properties.
  • shouldComponentUpdate(nextProps, nextState)-> bool—Lets you optimize the component’s rerendering by determining when to update and when to not update
  • componentWillUpdate(nextProps, nextState)—Happens right before the component is updated
  • componentDidUpdate(prevProps, prevState)—Happens right after the component updated

Unmounting events

React invokes events only once.

  • componentWillUnmount function()—Lets you unbind and detach any event listeners or do other cleanup work before the component is unmounted.
  • It has only one method componentWillUnmount which executed just before ReactJS component removed.
  • It is called as “cleanup method”. Because, here we can remove the unused data, unwanted network requests, etc.
  • We should not call method setState here because the component will never be re-rendered.

Each of these functions gives you more granular control over a component. event’s name makes clear to developers when the event is triggered. For example, componentDidUpdate() is fired when the component is updated. I hope you know how component lifecycle events work.

From the following example, you will understand how these methods work. Create a new Component in react application. 

LifeCycle.jsx

If you execute this program then you will see. how component lifecycle methods are called. Whenever you type anything in the textbox you can notice on the console window component lifecycle events are called. All the messages are printed on the console so don’t forget to open the console window.

We know that these methods are called independently. So you can control it when you want.

Leave a Reply

Your email address will not be published. Required fields are marked *