@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
55 lines • 1.59 kB
TypeScript
/**
* Executes a callback function at specified intervals with automatic cleanup.
*
* @remarks
* This hook provides a declarative interface for `setInterval` that automatically
* handles cleanup on unmount and ensures the latest callback is always invoked
* (preventing stale closures). Setting the delay to `null` pauses the interval,
* which is useful for implementing play/pause functionality.
*
* Unlike raw `setInterval`, this hook guarantees that the interval is cleared
* when the component unmounts or when the delay changes, preventing memory leaks
* and unexpected behavior.
*
* @param callback - The function to execute at each interval.
* @param delay - The interval delay in milliseconds, or `null` to pause the interval.
*
* @example
* ```tsx
* function Timer() {
* const [count, setCount] = useState(0);
*
* useInterval(() => {
* setCount((c) => c + 1);
* }, 1000);
*
* return <div>Count: {count}</div>;
* }
* ```
*
* @example
* ```tsx
* function PausableTimer() {
* const [count, setCount] = useState(0);
* const [isRunning, setIsRunning] = useState(true);
*
* useInterval(
* () => {
* setCount((c) => c + 1);
* },
* isRunning ? 1000 : null,
* );
*
* return (
* <div>
* <div>Count: {count}</div>
* <button onClick={() => setIsRunning(!isRunning)}>
* {isRunning ? "Pause" : "Resume"}
* </button>
* </div>
* );
* }
* ```
*/
export declare function useInterval(callback: () => void, delay: number | null): void;
//# sourceMappingURL=useInterval.d.ts.map