ReactJS : When to use Class Component Over Function Component?

We all know that there are two types of components in React.

1. class components
2. function components

Before React 16.8, function components were stateless.
However, with the introduction of hooks in React 16.8,Function components became capable of having state and lifecycle methods (here I am referring to lifecycle methods using hooks).

The ability to share stateful logic independent of UI rendering logic made function components popular among React developers. With function components, we can do almost everything possible with class components.

Then why does ReactJS still have class components?
Despite Having so many useful features in function components, There are some cases in which we need to use the Class component over the Function component:

1. Error boundary

When an error occurs usually it displays a component tree that crashed on screen, it can leave a bad impression on the end-user.

Error boundaries help us deal with this situation.
Error boundaries allow us to display fallback UI when an error occurs inside a component.

We can use error boundaries to trace client-side errors and provide useful information for debugging.
It's not possible to create an error boundary with a function component.

Error boundaries can only be implemented with class components.

2. Pure Component

Many times, we need to avoid unnecessary re-rendering of components depending on certain criteria.

In such cases, We can use pure components by extending React.PureComponent, as they have a static method "shouldComponentUpdate" that decides whether to re-render or not based on the component's props and state.

Many times react js developers use the "useMemo" hook to avoid unnecessary re-rendering like this :

   const App=()=>{

                return useMemo(()=>{
                    return <>{/*Code*/}</>
                  },[dependancies])
              }

However, everything before the "useMemo" hook will still be executed when the component updates its state. Therefore, "useMemo" may not always be the best option for avoiding unnecessary re-rendering.

Since we cannot create pure components with function components, we will need to use class components.

3. Life Cycle methods

I know This should not be the case, because most lifecycle methods like componentDidMount, componentDidUpdate, or componentWillUnmount can be replaced with useEffect.

It is important to note that the useEffect hook requires some extra care when it comes to dependencies and avoiding infinite loops.

One has to be very careful about dependency. and make sure dependency is not updated from inside the hook (this can lead to an infinite loop)

In a class component, the lifecycle methods are executed automatically when certain events occur, such as when the component is mounted, updated, or unmounted.