Circle of Life in React

Disclaimer. That an import of my medium blog. All my tech blogs would now be published at Dev.

In my previous blog posts, I forget to mention about the lifecycle of a component in React and methods that we use inside a class component. So let’s fill that gap and knowledge.

Let’s dive in

Before we jump to methods, let discuss what is the life cycle of a component in react.

Belov is the lifecycle of React component

In a nutshell out component has a free life state. The first component is born ( add to virtual react-dom ). The second ( component update, if we computing some data ). And then if needed component died ( if your component placed in inside the main content tag you probably want it to die ( yep all react developers monsters and programming they’re child’s to be killed ).

Ok, we have three states of components but what about methods.

render() {

We already highlighted it in my previous blog about a class component. That the only method strictly required by class component cause without it nothing will be rendered and also, the app will yell at you with all of its power of cyber lungs.

Render method

As we discussed previously that method just renders all your JSX into the DOM. The thing to mention, render method is a pure function ( check out this blog about pure function in JS, click) and it’s not allowing any mutation of data inside it, only rendering of it. Because of that you should call or write other methods outside, before render and after a constructor.

}

componentDidMount () {
Your component mounted, loaded and ready for more action? Let’s make a call for API and bring the data!

No seriously that methods are an ideal place to make an API calls and fetch the data from anywhere and render it on screen. Also here you can setState of the component and it will update it before the browser will update UI. Because of that toying with the state which depends on external data inside of that method is a good idea.

And I’m too lazy for making a screenshot of code example for that component, so let’s go to the next subject.

}

componentWillUpdate (prevProps) {

Another one good method to work with a changing state that invokes immediately after changes are happening.

That method is good in many events that don’t associate with external data like, clicks or typing something in form. One thing to remember when working with this method. You always should check a previous state before the update if you not… an infinite loop will catch you.

}

componentWillUnmount () {

As name methods say, it will unmount, destroy, crush, smash… hmm hmm. The component will be removed from the dom. It’s a healthy practice to clear the timers, canceling API calls inside that method.

Little note. Because component will be destroyed and it never is re-render, so we cant modify state by calling setState() inside this method.

}

A little conclusion. All of this lifecycle is a common practice when working with class components and have some pros and cons in each one. Less common methods exist too but cause I never used them, I don’t include them in the guide. As I say in the previous blog, in my opinion, the future of React lay in the valley of Hooks ( sounds creepy, but promising…. what with me today?). But I anyway will bring the light in the land of a class component.