What about class components in React now ?

React still supports class-based components, but they are no longer recommended for new code. 

The current status of class components is as follows:

• Supported, not Preferred: React has no immediate plans to remove class components, ensuring that legacy applications continue to function.
• "Legacy" Status: Official documentation now categorizes class components under
  Legacy React APIs
  
  , emphasizing that function components with Hooks are the modern standard.
• Missing Features: New React features, such as Server Components and certain optimizations, are designed specifically for function components and may not be available for classes.
• Mandatory Use Case (Error Boundaries): Currently, you still must use a class component to create an
  Error Boundary
  
  , as there is no Hook equivalent for the or lifecycle methods yet.
• Coexistence: You can freely mix class and function components within the same project. 

Why the Shift?

The React team transitioned to function components because classes were found to be more difficult for both humans and machines to optimize. Function components with Hooks allow for:

• Better logic reuse without complex patterns like Higher-Order Components.
• Cleaner code by eliminating the need for binding and constructors.
• Improved performance through more efficient minification and "tree-shaking" during the build process. 

A Note on Error Boundary

An Error Boundary is a specialized React component that catches JavaScript errors anywhere in its child component tree, logs those errors, and displays a fallback UI instead of crashing the entire application. 

Key Features

• Safety Net: Prevents the entire React component tree from unmounting due to an error in a single component.
• Declarative: Unlike , which handles imperative code, error boundaries use React’s declarative nature to manage component-level crashes.
• Granularity: They can be used at the top level (global error page) or wrapped around specific widgets to isolate failures. 

Implementation

To create an error boundary, you must use a class component that implements one or both of these lifecycle methods:

1. : Used to update state so the next render shows a fallback UI (e.g., "Something went wrong").
2. : Used to log error information to services like Sentry or Datadog for production monitoring. 

What They Do NOT Catch

Error boundaries do not catch errors for the following:

• Event handlers (e.g., — use standard here instead).
• Asynchronous code (e.g., , , or API calls).
• Server-side rendering (SSR).
• Errors thrown in the boundary itself (rather than its children). 

Modern Usage

While native error boundaries require class components, many developers use the react-error-boundary library. This library provides a reusable component and hooks like to handle errors in functional components more easily.