Let's explore the lifecycle of a React component and to use it to your advantage!

To explain the lifecycle of a React component, we'll break it down into three phases

During the mounting phase, the component is first rendered and committed to the browser. At this stage, all HTML is visible to the user. After committing, a callback is called.

During the updating phase the component re-renders due to state or prop changes. This process has three phases. First, a cleanup after the previous update is performed. Then, the component is rendered and then the changes are committed to DOM.

During the unmounting phase, the component is removed from the DOM, performing the cleanup. Let's break it down using an example!

Let's consider a simple component that renders a count value and a button that changes the count value. Note that the count value is rendered in the p element.

We can show or hide this component by clicking the Toggle button.

We also create a helper function getCount, that returns the value rendered in the p element, or null, if the p element does not exist.

Now, we see several logs in the console. The first message shows that the component is rendering, and the p element showing the count value does not exist. This is correct, as during this phase, the rendering is done in React's VDOM, and nothing has been committed or rendered in the browser.

We will now use useEffect hook to render a message when this component initially renders into your browser.

Particularly, note that the second message in the console shows that the component has been mounted and that the value in the p element shows the correct value! At this stage everything is rendered in the dom.

The useEffect comes equipped with a dependency array and executes only variables provided in this dependency array change. Since nothing is provided to this array, the useEffect only executes once when the component is mounted and unmounted.

We also have another useEffect hook that tracks changes in the count variable and executes only when the count changes. You can see the message in the console with the value of the count variable.

Note the use of the count variable in the dependency array of this hook.

Now, take a look at what happens when we click on the Increment button. First, we see that the component started to render, and the p element still shows the old value.

Then, we clean up after a previous update. The cleanup function is returned from the useEffect hook and executes prior to next commit or unmount. This time, we only logged a message that the cleanup is performed.

Then, the react changes are committed, and a new count value is displayed to the user.

Last, we hide the component by clicking on the Toggle button. Similarly, to clean up after the update of the count state variable, we return the cleanup function from the useEffect with no dependencies.

Last, we also see that the cleanup of the last update is performed.

Consider this example, where we define a custom hook that fetches data from an external API. Please study this example and try to explain how we used the useEffect hook to our advantage, particularly the request cancellation procedure using isCancelled. Think why is it essential to set isCancelled to true and what could happen if you would not do that. Leave a comment below!