typescriptintermediate

useNetworkSpeed Hook

Monitors the Network Information API to report connection type, downlink speed, and effective type.

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

interface NetworkInfo {
  effectiveType: string;
  downlink: number;
  rtt: number;
  saveData: boolean;
  online: boolean;
}

export function useNetworkSpeed(): NetworkInfo {
  const getInfo = (): NetworkInfo => {
    const conn = (navigator as unknown as { connection?: {
      effectiveType: string; downlink: number; rtt: number; saveData: boolean;
    }}).connection;
    return {
      effectiveType: conn?.effectiveType ?? 'unknown',
      downlink: conn?.downlink ?? 0,
      rtt: conn?.rtt ?? 0,
      saveData: conn?.saveData ?? false,
      online: navigator.onLine,
    };
  };

  const [info, setInfo] = useState(getInfo);

  useEffect(() => {
    const conn = (navigator as unknown as { connection?: EventTarget }).connection;
    const handler = () => setInfo(getInfo());
    conn?.addEventListener('change', handler);
    window.addEventListener('online', handler);
    window.addEventListener('offline', handler);
    return () => {
      conn?.removeEventListener('change', handler);
      window.removeEventListener('online', handler);
      window.removeEventListener('offline', handler);
    };
  }, []);

  return info;
}

Use Cases

  • Adaptive media quality
  • Offline indicators

Tags

Related Snippets

Similar patterns you can reuse in the same workflow.