JAVASCRIPT

React `useCountdown` Hook for Timers and Countdowns

Develop a flexible React `useCountdown` hook to manage countdown timers, ideal for implementing 'time remaining' displays, temporary offers, or session expirations with precise control.

import { useState, useEffect, useRef } from 'react';

function useCountdown(initialSeconds, onComplete) {
  const [seconds, setSeconds] = useState(initialSeconds);
  const intervalRef = useRef();

  useEffect(() => {
    if (seconds > 0) {
      intervalRef.current = setInterval(() => {
        setSeconds((prevSeconds) => prevSeconds - 1);
      }, 1000);
    } else {
      clearInterval(intervalRef.current);
      if (onComplete) {
        onComplete();
      }
    }

    return () => clearInterval(intervalRef.current);
  }, [seconds, onComplete]);

  const reset = (newSeconds = initialSeconds) => {
    clearInterval(intervalRef.current);
    setSeconds(newSeconds);
  };

  return [seconds, reset];
}

// Example Usage:
// function TimerComponent() {
//   const [countdownSeconds, resetCountdown] = useCountdown(10, () => {
//     console.log('Countdown finished!');
//     alert('Time is up!');
//   });

//   const formatTime = (totalSeconds) => {
//     const minutes = Math.floor(totalSeconds / 60);
//     const remainingSeconds = totalSeconds % 60;
//     return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
//   };

//   return (
//     <div>
//       <h2>Time Remaining: {formatTime(countdownSeconds)}</h2>
//       <button onClick={() => resetCountdown(30)}>Reset to 30s</button>
//       {countdownSeconds === 0 && <p>Countdown completed!</p>}
//     </div>
//   );
// }

How it works: The `useCountdown` hook creates a customizable timer that counts down from an `initialSeconds` value. It uses `setInterval` to decrement the seconds state every second and `clearInterval` for cleanup. It returns the current seconds and a `reset` function, making it ideal for displaying 'time remaining' in auctions, quizzes, or temporary alerts. An optional `onComplete` callback fires when the timer reaches zero.

React `useCountdown` Hook for Timers and Countdowns

Need help integrating this into your project?