<!-- source-hash: 19299c1d8b02454f2e64650d0512f1a0 -->
A React hook that provides type-safe localStorage integration with state synchronization across browser tabs and components.

## Key Components

- **`useLocalStorage<T>`** - Main hook that accepts a key and initial value, returns a tuple with current value and setter function
- **Cross-tab synchronization** - Listens for both native `storage` events and custom `localStorageUpdate` events
- **Error handling** - Graceful fallbacks for JSON parsing errors and localStorage access issues
- **SSR compatibility** - Safe initialization that works with Next.js and other SSR frameworks

## Usage Example

```typescript
import { useLocalStorage } from './use-local-storage'

function UserPreferences() {
  // Basic usage with string value
  const [theme, setTheme] = useLocalStorage('theme', 'light')
  
  // Usage with complex object
  const [settings, setSettings] = useLocalStorage('userSettings', {
    notifications: true,
    language: 'en'
  })

  const toggleTheme = () => {
    setTheme(currentTheme => currentTheme === 'light' ? 'dark' : 'light')
  }

  const updateSettings = () => {
    setSettings(prevSettings => ({
      ...prevSettings,
      notifications: !prevSettings.notifications
    }))
  }

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <button onClick={updateSettings}>Toggle Notifications</button>
    </div>
  )
}
```

The hook automatically syncs changes across browser tabs and handles localStorage errors gracefully, making it ideal for user preferences, application state, and cached data.