Create a Reusable useInterval Hook in React with TypeScript

The useInterval hook is a valuable tool for performing side effects at regular intervals within a React component. This challenge asks you to implement a custom useInterval hook that takes a callback function and an interval (in milliseconds) as arguments, and executes the callback function repeatedly at the specified interval. This is useful for tasks like polling APIs, animating elements, or updating timers.

Problem Description

You need to create a custom React hook called useInterval that manages an interval timer. The hook should accept two arguments:

• callback: A function to be executed repeatedly. This function should be of type () => void.
• interval: A number representing the interval in milliseconds at which the callback should be executed. This should be of type number.

The hook should:

1. Start the interval timer on the initial render.
2. Clear the interval timer when the component unmounts or when the interval prop changes.
3. Restart the interval timer when the interval prop changes.
4. Ensure the callback function is executed at the specified interval.
5. Handle cases where interval is zero or negative (in such cases, the callback should not be executed, and no timer should be started).

Expected Behavior:

• When the component mounts, the callback function should be executed for the first time, and then repeatedly at the specified interval.
• When the component unmounts, the interval timer should be cleared to prevent memory leaks.
• If the interval prop changes, the existing timer should be cleared, and a new timer should be started with the new interval.
• If the interval prop is zero or negative, no timer should be started, and the callback should not be executed.

Examples

Example 1:

Input: callback: () => console.log("Hello"), interval: 1000
Output: "Hello" is logged to the console every 1000 milliseconds.
Explanation: The useInterval hook starts a timer that executes the callback function every second.

Example 2:

Input: callback: () => console.log("Updating..."), interval: 2000, initialInterval: 2000
Output: "Updating..." is logged to the console every 2000 milliseconds.
Explanation: The useInterval hook starts a timer that executes the callback function every 2 seconds.

Example 3: (Edge Case)

Input: callback: () => console.log("This should not run"), interval: 0
Output: Nothing is logged to the console.
Explanation: The interval is set to 0, so the callback is never executed, and no timer is started.

Constraints

• The interval must be a number.
• The callback must be a function that takes no arguments and returns nothing (() => void).
• The hook should not cause memory leaks.
• The hook should be compatible with functional components in React.
• The hook should be written in TypeScript.
• The interval should be non-negative. If it's negative, treat it as zero.

Notes

• You can use useEffect and setInterval to implement the hook.
• Remember to clear the interval timer when the component unmounts or when the interval prop changes.
• Consider using the dependency array in useEffect to ensure the timer is updated correctly when the interval prop changes.
• Think about how to handle the initial execution of the callback function. It should be executed immediately when the component mounts.
• Pay close attention to the order of operations within the useEffect hook to avoid race conditions or unexpected behavior.
• The hook should be reusable across different components.