javascript 48 lines · 7 steps

Building a toast notification system in React

A Context provider manages a list of transient toasts and exposes notify and dismiss to any component in the tree.

Explained by highlit

React Intermediate context state-management hooks notifications timers

1import { createContext, useContext, useState, useCallback, useRef } from "react";
2 
3const ToastContext = createContext(null);
4 
5export function ToastProvider({ children, defaultDuration = 4000 }) {
const [toasts, setToasts] = useState([]);
const idRef = useRef(0);
8 
const dismiss = useCallback((id) => {
  setToasts((prev) => prev.filter((t) => t.id !== id));
}, []);
12 
const notify = useCallback(
  ({ message, variant = "info", duration = defaultDuration }) => {
    const id = ++idRef.current;
    setToasts((prev) => [...prev, { id, message, variant }]);
    if (duration > 0) {
      setTimeout(() => dismiss(id), duration);
    }
    return id;
  },
  [defaultDuration, dismiss]
);
24 
return (
  <ToastContext.Provider value={{ notify, dismiss }}>
    {children}
    <div className="toast-viewport" role="region" aria-live="polite">
      {toasts.map((toast) => (
        <div key={toast.id} className={`toast toast--${toast.variant}`}>
          <span>{toast.message}</span>
          <button onClick={() => dismiss(toast.id)} aria-label="Dismiss">
            ×
          </button>
        </div>
      ))}
    </div>
  </ToastContext.Provider>
);
40}
41 
42export function useToast() {
const ctx = useContext(ToastContext);
if (!ctx) {
  throw new Error("useToast must be used within a ToastProvider");
}
return ctx;
48}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Context lets you expose imperative actions like notify and dismiss to the whole tree without prop drilling.
2A ref-backed counter generates stable unique ids that survive re-renders without triggering them.
3Wrapping the context in a custom hook lets you enforce correct usage with a clear error.

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);