When to use a Class Component over a Function Component?

After the addition of Hooks(i.e. React 16.8 onwards) it is always recommended to use Function components over Class components in React. Because you could use state, lifecycle methods and other features that were only available in class component present in function component too.

But even there are two reasons to use Class components over Function components.

1. If you need a React functionality whose Function component equivalent is not present yet, like Error Boundaries.
2. In older versions, If the component needs state or lifecycle methods then you need to use class component.

So the summary to this question is as follows:

Use Function Components:

• If you don't need state or lifecycle methods, and your component is purely presentational.
• For simplicity, readability, and modern code practices, especially with the use of React Hooks for state and side effects.

Use Class Components:

• If you need to manage state or use lifecycle methods.
• In scenarios where backward compatibility or integration with older code is necessary.

Note: You can also use reusable react error boundary third-party component without writing any class. i.e, No need to use class components for Error boundaries.

The usage of Error boundaries from the above library is quite straight forward.

Note when using react-error-boundary: ErrorBoundary is a client component. You can only pass props to it that are serializable or use it in files that have a "use client"; directive.

"use client";

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<div>Something went wrong</div>}>
<ExampleApplication />
</ErrorBoundary>;