Implementing a Custom useUnmount Hook in React

React's lifecycle methods are transitioning to hooks. While useEffect handles many lifecycle scenarios, there isn't a direct equivalent for the componentWillUnmount lifecycle method. This challenge asks you to implement a custom useUnmount hook that mimics the functionality of componentWillUnmount, allowing you to execute cleanup logic when a component unmounts.

Problem Description

You need to create a reusable React hook called useUnmount. This hook should accept a cleanup function as an argument. When the component using the hook unmounts, the provided cleanup function should be executed. This is analogous to componentWillUnmount in class components.

Key Requirements:

• The hook must accept a single argument: a function to be executed upon unmount.
• The cleanup function should be executed only once, when the component unmounts.
• The hook should not cause any unnecessary re-renders.
• The hook should be compatible with functional components using TypeScript.

Expected Behavior:

When a component using useUnmount is unmounted, the cleanup function passed to the hook should be called. If no cleanup function is provided, the hook should do nothing.

Edge Cases to Consider:

• What happens if the cleanup function throws an error? (The hook should not prevent the component from unmounting, even if the cleanup function fails.)
• What happens if the component is conditionally rendered and unmounted multiple times? (The cleanup function should only be called once per unmount.)
• What happens if the cleanup function relies on state or props that are no longer available? (This is a general consideration for cleanup functions, but the hook itself shouldn't prevent this.)

Examples

Example 1:

// Component using useUnmount
import { useUnmount } from './useUnmount'; // Assuming you create a file named useUnmount.ts

function MyComponent() {
  useUnmount(() => {
    console.log('Component unmounted!');
  });

  return <div>My Component</div>;
}

Output: When MyComponent is unmounted, the console will log "Component unmounted!".

Explanation: The useUnmount hook registers a cleanup function. When MyComponent is removed from the DOM, the cleanup function is executed.

Example 2:

// Component with a cleanup function that updates state (simulated)
import { useState, useUnmount } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useUnmount(() => {
    console.log('Cleaning up... resetting count');
    setCount(0); // This might cause a warning, but it's valid cleanup
  });

  return <div>Count: {count}</div>;
}

Output: When MyComponent is unmounted, the console will log "Cleaning up... resetting count" and the state count will be reset to 0.

Explanation: The cleanup function updates the component's state. While this might trigger a warning about setting state on an unmounted component, it demonstrates that the cleanup function can perform side effects.

Example 3: (Edge Case - Conditional Rendering)

import { useState, useUnmount } from 'react';

function MyComponent() {
  const [showComponent, setShowComponent] = useState(true);

  useUnmount(() => {
    console.log('Component unmounted!');
  });

  return (
    <>
      <button onClick={() => setShowComponent(!showComponent)}>
        Toggle Component
      </button>
      {showComponent && <div>My Component</div>}
    </>
  );
}

Output: "Component unmounted!" will be logged only when the <div>My Component</div> is actually removed from the DOM due to the showComponent state changing to false.

Explanation: The component is conditionally rendered. The useUnmount hook only executes its cleanup function when the component is truly unmounted from the DOM, not just when the component is initially rendered or re-rendered.

Constraints

• The hook must be implemented using React's useEffect hook.
• The cleanup function must be executed only once per unmount.
• The hook should not introduce any unnecessary dependencies.
• The code must be written in TypeScript.
• The solution should be concise and readable.

Notes

• Consider using useEffect with an empty dependency array ([]) to ensure the cleanup function is only registered once.
• The cleanup function should be defined inline or as a named function.
• Think about how to handle potential errors within the cleanup function gracefully. The hook shouldn't crash the entire application if the cleanup fails.
• This hook is a simplified version of componentWillUnmount. It focuses on the core functionality of executing a cleanup function on unmount. More complex lifecycle scenarios might require additional logic.