React useClickOutside Hook

The useClickOutside hook is a common utility in React applications to detect when a user clicks outside of a specific element. This is particularly useful for managing dropdown menus, modals, or any component that should close when the user interacts with the rest of the page. This challenge asks you to implement this hook, ensuring it correctly detects clicks outside a provided ref.

Problem Description

You are tasked with creating a custom React hook called useClickOutside. This hook accepts a ref as an argument and registers a click listener on the document. When a click event occurs anywhere on the document, the hook should check if the click target is not within the element referenced by the provided ref. If the click is outside the element, the hook should execute a callback function provided as a second argument.

Key Requirements:

• Ref Handling: The hook must correctly utilize the provided ref to identify the target element.
• Click Detection: The hook must accurately detect clicks on the document.
• Outside Click Check: The hook must determine if the click occurred outside the element referenced by the ref.
• Callback Execution: The hook must execute the provided callback function when a click outside the element is detected.
• Cleanup: The hook must properly remove the event listener when the component unmounts to prevent memory leaks.

Expected Behavior:

• When the component mounts, the hook should attach a click listener to the document.
• When the component unmounts, the hook should remove the click listener.
• If a click occurs on the document and the target element is not within the element referenced by the ref, the provided callback function should be executed.
• If a click occurs on the document and the target element is within the element referenced by the ref, the callback function should not be executed.

Edge Cases to Consider:

• The ref might be null or undefined. Handle this gracefully (e.g., by not attaching the listener).
• The element referenced by the ref might be removed from the DOM after the listener is attached.
• Nested elements: The click target should be considered "inside" the element if it's a descendant of the element referenced by the ref.

Examples

Example 1:

Input: A component with a ref attached to a div, and a callback function that logs a message to the console.
Output: When the user clicks outside the div, the callback function is executed, logging the message. When the user clicks inside the div, the callback function is not executed.
Explanation: The hook correctly detects clicks outside the div and executes the callback.

Example 2:

Input: A component with a ref attached to a modal, and a callback function that closes the modal.
Output: When the user clicks outside the modal, the modal is closed. When the user clicks inside the modal, the modal remains open.
Explanation: The hook correctly detects clicks outside the modal and triggers the modal closing functionality.

Example 3: (Edge Case)

Input: A component with a ref attached to a div, and the div is dynamically removed from the DOM after a short delay.
Output: The event listener is removed before the div is removed from the DOM, preventing errors.
Explanation: The hook handles the dynamic removal of the element gracefully.

Constraints

• The hook must be written in TypeScript.
• The hook should be performant and avoid unnecessary re-renders.
• The callback function should be executed only once per click outside the element.
• The ref passed to the hook must be a React ref object.

Notes

• Consider using document.addEventListener to attach the click listener.
• You'll need to use the ref's current property to access the DOM element.
• The contains() method of a DOM element can be helpful for determining if a click target is within the element.
• Think about how to handle the case where the ref is not yet attached to an element when the component initially mounts. You might want to delay attaching the listener until the ref is available.