snippettypescriptreactModeratepending

React custom hooks — useLocalStorage and useDebounce

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

custom hookuseLocalStorageuseDebounceuseMediaQueryreusable hooks

browser

Problem

Need reusable React hooks for common patterns: persisting state to localStorage, debouncing values for search inputs, and detecting media queries.

Solution

Three commonly needed custom hooks with TypeScript support.

Code Snippets

useLocalStorage and useDebounce custom hooks

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

// useLocalStorage: persist state to localStorage
function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    try {
      const stored = localStorage.getItem(key);
      return stored ? JSON.parse(stored) : initial;
    } catch {
      return initial;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

// useDebounce: debounce a value
function useDebounce<T>(value: T, ms: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), ms);
    return () => clearTimeout(timer);
  }, [value, ms]);
  return debounced;
}

// Usage
function SearchPage() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  useEffect(() => {
    if (debouncedQuery) fetchResults(debouncedQuery);
  }, [debouncedQuery]);
}

Revisions (0)

No revisions yet.