UseLocalStorage

1'use client';
2 
3import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
4 
5interface UseLocalStorageOptions<T> {
6  serialize?: (value: T) => string;
7  deserialize?: (value: string) => T;
8}
9 
10/**
11 * Hook to synchronize a value with localStorage in a type-safe, performant, and cross-tab reactive way.
12 *
13 * @param key localStorage key
14 * @param initialValue Initial value
15 * @param options Custom serialization/deserialization functions
16 */
17export function useLocalStorage<T>(
18  key: string,
19  initialValue: T,
20  options?: UseLocalStorageOptions<T>,
21) {
22  // Memoize serialize/deserialize to avoid unnecessary dependencies
23  const serialize = useMemo(
24    () => options?.serialize ?? JSON.stringify,
25    [options?.serialize],
26  );
27 
28  const deserialize = useMemo(
29    () => options?.deserialize ?? JSON.parse,
30    [options?.deserialize],
31  );
32 
33  // Ref to keep the initial value stable
34  const initialRef = useRef(initialValue);
35 
36  const readValue = useCallback((): T => {
37    if (typeof window === 'undefined') return initialRef.current;
38 
39    try {
40      const item = window.localStorage.getItem(key);
41 
42      return item != null ? (deserialize(item) as T) : initialRef.current;
43    } catch (error) {
44      console.warn(
45        `[useLocalStorage] Error reading key "${key}" from localStorage:`,
46        error,
47      );
48 
49      return initialRef.current;
50    }
51  }, [key, deserialize]);
52 
53  // State synchronized with localStorage
54  const [storedValue, setStoredValue] = useState<T>(readValue);
55 
56  const setValue = useCallback(
57    (value: T | ((val: T) => T)) => {
58      try {
59        setStoredValue((prev) => {
60          const valueToStore = value instanceof Function ? value(prev) : value;
61 
62          window.localStorage.setItem(key, serialize(valueToStore));
63 
64          return valueToStore;
65        });
66      } catch (error) {
67        console.warn(
68          `[useLocalStorage] Error setting key "${key}" in localStorage:`,
69          error,
70        );
71      }
72    },
73    [key, serialize],
74  );
75 
76  // Synchronize between tabs
77  useEffect(() => {
78    const handleStorage = (event: StorageEvent) => {
79      if (event.key === key) {
80        setStoredValue(readValue());
81      }
82    };
83 
84    window.addEventListener('storage', handleStorage);
85 
86    return () => window.removeEventListener('storage', handleStorage);
87  }, [key, readValue]);
88 
89  // Update the value if the key changes
90  useEffect(() => {
91    setStoredValue(readValue());
92  }, [key, readValue]);
93 
94// … truncated