javascript 48 lines · 8 steps

Building a useCountdown hook in React

A custom React hook that drives a ticking countdown timer with start, pause, and reset controls.

Explained by highlit

React Intermediate custom-hooks state-management side-effects timers cleanup

1import { useState, useEffect, useCallback } from 'react';
2 
3export function useCountdown(initialSeconds) {
const [secondsLeft, setSecondsLeft] = useState(initialSeconds);
const [isRunning, setIsRunning] = useState(false);
6 
useEffect(() => {
  if (!isRunning) return;
9 
  const id = setInterval(() => {
    setSecondsLeft((prev) => {
      if (prev <= 1) {
        clearInterval(id);
        setIsRunning(false);
        return 0;
      }
      return prev - 1;
    });
  }, 1000);
20 
  return () => clearInterval(id);
}, [isRunning]);
23 
const start = useCallback(() => {
  setSecondsLeft((prev) => (prev > 0 ? prev : initialSeconds));
  setIsRunning(true);
}, [initialSeconds]);
28 
const pause = useCallback(() => setIsRunning(false), []);
30 
const reset = useCallback(() => {
  setIsRunning(false);
  setSecondsLeft(initialSeconds);
}, [initialSeconds]);
35 
const minutes = String(Math.floor(secondsLeft / 60)).padStart(2, '0');
const seconds = String(secondsLeft % 60).padStart(2, '0');
38 
return {
  secondsLeft,
  isRunning,
  isFinished: secondsLeft === 0,
  display: `${minutes}:${seconds}`,
  start,
  pause,
  reset,
};
48}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Gating a useEffect on a boolean state lets you start and stop side effects declaratively instead of imperatively.
2Returning a cleanup function from useEffect guarantees intervals are cleared on unmount or dependency change.
3A custom hook can package internal state, effects, and derived values into one clean API for components.

Related explainers

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

func (w *Watcher) resetDebounce(d time.Duration) {
	if !w.timer.Stop() {
		select {
		case <-w.timer.C:

Debouncing a stream of events in Go

debounce timers channels

Advanced 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);