Why React.js

React.js is basically a Javascript library built and maintained by Facebook. React.js is an efficient, declarative and flexible open-source Javascript library for building simple, fast, and scalable frontends of web applications. JSX is the language used to build React applications. React.js inherits React Native which allows us to use the native look and feel to develop any mobile application. Currently React is used by many fortune 500 companies. Airbnb, Tesla, Tencent QQ, and Walmart are among the top brands that built their mobile apps using the React Native frameworks. On the other hand, React web framework is currently being utilized by companies like Netflix, Paypal, NASA, BBC etc.

Life Cycle Methods

When we create a React component, the component goes to several stages in its life cycle. React provide us with built in methods that we can overwrite at particular stages in the life cycles.

Lets look the life cycle methods available for class component

In this article, I am only going to discuss about the life cycle methods for class component and not for function component. These methods do not exists for a functional components. But with the new feature proposal of Hooks, there is useEffect() Hook that partially relate to life cycle methods. So here, I am going to discuss life cycle for class component for React version 16.4 and above.

We can mainly classify the methods into 4 phases as shown in below image:

Knowing when to use which life cycle methods is crucial for proper understanding how to work with React.

Lets see each phases one by one

A) Mounting Life Cycle Methods It has 4 stages i.e constructor, static getDerivedStateFromProps, render and componentDidMount. Lets see and understand all these stages and their flow with the help of below image.

B) Updating Life Cycle Methods It has 5 stages i.e static getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate and componentDidUpdate. Lets see and understand all these stages and their flow with the help of below image.

C) Unmounting Life Cycle Method It has only one stage i.e componentWillUnmount(). Lets see and understand all these stages and their flow with the help of below image.

D) Error Handling Life Cycle Methods It has 2 stages i.e static getDerivedStateFromError(error) and componentDidCatch(error, info). Lets see and understand all these stages and their flow with the help of below image.

So these all are the main phases of life cycle for class components. As I earlier mentioned that, I will cover life cycle methods for functional component in another article.

PS: I read about life cycle methods from youtube. If you want you can search on youtube for further more explanation and for code.

Thank you for reading this article.