The React Lifecycle

Wait! React has a lifecycle? Is this the web form of the Terminator? No humankind is safe! React is such a great frontend tool. For those unaware, React uses components to control what is rendered on the screen for the user. If you want to learn more about how React controls this with the Virtual DOM check out my article What is the Virtual DOM in React. React Class Components have a built in lifecycle that gives them even more utility. Every react component has 3 phases of its life.

1. Mounting
2. Updating
3. Unmounting

As a developer we have access to unique methods in each phase of the components lifecycle. In this article I will discuss what each phase is and also some of the common methods we have access to.

Mounting

This is the very first phase in a components life. The lifecycle methods included in this phase are designed to create/setup and put the component in view.

1. constructor()
   • very first lifecycle method called
   • sets the initial state of the component and binds event handler methods
   • if there is no state or methods to bind you don’t need to include this in your component
2. render()
   • only required method in a class component
   • this is where you place your JSX to get rendered onto the DOM.
   • needs to be pure in nature. Meaning that it returns the same thing every time under the same circumstances. If you need to interact with the browser or change state make sure to use other lifecycle methods and not render().
3. componentDidMount()
   • called right after the component is rendered.
   • since its called after its rendered you have access to DOM nodes.
   • place to make network request to APIs etc. only called on initial rendering

Updating

We know that when state or props change in a component it will trigger a re-render. The lifecycle methods in this phase gives us control over the re-render and allows the component to update.

1. shouldComponentUpdate()
   • called when new props are received
   • used to let React know if the new props should trigger a re-render or not.
   • defaults to true and triggers a re-render and if returns false will not re-render
   • used for performance optimization
2. render()
   • automatically gets called
   • same as before. Puts the updated component on the DOM.
3. componentDidUpdate()
   • gets called after the re-render
   • works just like componentDidMount() but gets called during updating phase and re-renders

Unmounting

This phase happens as our component rides off into the sunset. This is were we would preform any clean up operations. Once this phase is complete this component will be destroyed.

1. componentWillUnmount()
   • invoked right before a component is unmounted
   • used to preform any clean up operations that was created earlier. (timers, network request, etc.)

Functional Components and Hooks

Lifecycle methods used to only be available to class components. This has since changed with the introduction of React Hooks. We use the useEffect hook to access these methods. Accessing these lifecycle methods is a bit different from class components. I may do a separate article about this in the future but in the mean time I encourage you to check out the React documentation on this https://reactjs.org/docs/hooks-effect.html.

Thats React components lifecycle in a nutshell. There are more lifecycle methods in each of the phases, but they are used for very specific cases. To learn more detail about the above methods or to dig a little deeper on the more rare lifecycle methods check out the React documentation.
Knowing more about the different phases of a component and the lifecycle methods associated with each phase will do nothing but make you a stronger React developer.