How can we implement componentWillUnmount using react hooks?

In React, using function components and Hooks can easily simulate lifecycle methods from class components, such as componentWillUnmount. In function components, you can use the useEffect Hook to implement logic before unmounting.

The useEffect Hook accepts a function as its parameter, which can return another function. The returned function is called before the component unmounts, allowing it to perform cleanup tasks such as unsubscribing or clearing timers.

Here is an example of how to use the useEffect Hook to simulate componentWillUnmount:

javascript
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // This is the logic after component mount (componentDidMount)
    // You can perform subscriptions or initialization here

    // The returned function is the logic to execute before unmount (componentWillUnmount)
    return () => {
      // Perform cleanup tasks
      // For example, unsubscribing or clearing timers
    };
  }, []); // Empty array indicates this effect runs only once when the component mounts and unmounts

  return (
    <div>
      {/* Component content */}
    </div>
  );
}

export default MyComponent;

In this example, the function passed to useEffect runs after the component's first render. Since we pass an empty array [] as the second parameter to useEffect, this effect runs only once when the component mounts and unmounts. The function returned by the effect executes when the component is about to be destroyed, simulating the behavior of componentWillUnmount.

Note that if you have multiple operations to perform when the component unmounts, you can use multiple useEffect hooks to handle different logic, each returning its own cleanup function.