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

const express = require('express');
const EventEmitter = require('events');
 
const router = express.Router();

Server-Sent Events with Express

server-sent-events streaming event-emitter

Advanced 8 steps

typescript

import { Injectable, signal, computed } from '@angular/core';
 
export type ToastKind = 'success' | 'error' | 'info' | 'warning';

Building a signal-based toast service in Angular

signals state-management dependency-injection

Intermediate 8 steps

javascript

import { useState, useRef } from "react";
 
export function TagInput({ initialTags = [], onChange }) {
  const [tags, setTags] = useState(initialTags);

Building a tag input in React

controlled-inputs state-management keyboard-handling

Intermediate 8 steps

javascript

import { NavLink, useLocation } from 'react-router-dom';
 
const NAV_ITEMS = [
  { to: '/', label: 'Dashboard', end: true },

Building an accessible Sidebar in React

routing accessibility declarative-ui

Intermediate 6 steps

javascript

function escapeHtml(str) {
  return str.replace(/[&<>"']/g, (ch) => ({
    '&': '&amp;',
    '<': '&lt;',

Safely highlighting search matches in text

html-escaping regex search-highlighting

Intermediate 7 steps

javascript

import { useEffect, useRef } from "react";
import { useBlocker } from "react-router-dom";
 
export function useUnsavedChangesPrompt(isDirty, message = "You have unsaved changes. Leave anyway?") {