Introduction

In the previous chapters, while building our components, we have used lifecycle methods multiple times without knowing it. For example, we have used the constructor() and render() methods in every class component we have built so far. We did not call or overwrite these methods specifically but React has behind-the-scenes functionality for performing this.

In this chapter, we will talk a little bit about what that means and explore the different methods, where they fire off during building a component, mounting them onto the Document Object Model(DOM), rendering them, and then updating them beyond that. You can also implement events that need to occur when a component is removed from the DOM using the unmount lifecycle method.

It's worth noting, however, that you cannot overwrite or call lifecycle methods explicitly in functional components; only class-based components have this functionality. You cannot override them because, being functions, they lack the ability that classes in JavaScript have; classes can define functions on each inpidual instance. There is no inheritance or properties; the functional component just runs the code on render.

Let's start off the chapter with an overview of the component lifecycle methods in class components.