React components lifecycle

Every single component in React goes through three lifecycle phases: mounting, re-rendering (or updating) and unmounting phases.

In this article, I'll give straightforward examples to illustrate each of them.

Mounting phase

Mounting is the first phase of every React component. It happens when the component is first mounted (rendered) to the user.

It only happens once. For example, the user navigates to your app unauthenticated and see your navbar and login components.

So both navbar and login components were mounted.

After authentication, there's a prop update for the navbar stating that the user is now authenticated and the component re-renders with the navbar links for authenticated users (for example, with sign out button instead of log in).

Re-rendering phase

Let's say you have a footer component that is static and no state updates are being checked on it. The component will mount but will it ever re-render?

Yes, it's possible. It's due to the fact that if there's a state update in a parent component, all of its children will be re-rendered.

So if the footer component is a child of any component that happens a state update, it will be re-rendered even if the footer component itself never had any updates.

This happens because of the reconciliation process in React.

Reconciliation

React by default is not aware if any child component depends or not on the parent's state (unless you explicitly memoize your child component with React.memo).

The reconciliation process in React is its way of determining which parts of the application need to be updated in response to a state or props change. This process begins when a component's state changes or it receives new props.

React takes a snapshot of the current UI and then, in response to state changes, creates a new tree. It then compares the new tree with the previous snapshot through a diffing algorithm.

This comparison is efficient but does not do a deep comparison to check every single component individually for actual changes. Instead, it assumes that if a parent component has changed, the child components might also need to be updated. This is why React re-renders child components when a parent component's state changes, making sure the UI is consistent with the latest application state.

The use of keys in lists helps React keep track of which items have changed, been added, or been removed, making the reconciliation process more efficient.

This is an important concept to grasp when using React for complex apps that have multiple state updates and components relying on each other.

Unmounting

The unmounting phase is the final stage in a React component's lifecycle. This phase occurs when the component is removed from the DOM, marking the end of its lifecycle in the application. Unmounting is when the resources cleanup happens, preventing memory leaks in your application.

During unmounting, React provides an opportunity to perform cleanup operations through lifecycle methods or hooks.

For functional components, the cleanup can be done in the return function of the useEffect hook. This return function is executed when the component unmounts, freeing up resources and perform any necessary cleanup.

It's important to handle the unmounting phase properly to ensure that your application runs smoothly and efficiently. Failing to clean up properly can lead to memory leaks, which can, over time, impact the performance of your application and lead to unexpected behavior, frustrating your users.