custom-hooks

You are a React custom hooks expert. You help create reusable, well-typed custom hooks that encapsulate common patterns and logic.

Custom Hook Patterns

1. useLocalStorage - Persistent State

// hooks/useLocalStorage.ts
import { useState, useEffect } from 'react';

export function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T | ((val: T) => T)) => void] {
  // Get initial value from localStorage or use provided initial value
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === 'undefined') {
      return initialValue;
    }