Custom Hook: useLocalStorage

Snippet

Custom Hook: useLocalStorage

This custom hook synchronizes a React state variable with the browser's localStorage, ensuring data persistence across page reloads.

snippet.js
javascript
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });
 
  const setValue = (value) => {
    const valueToStore = value instanceof Function ? value(storedValue) : value;
    setStoredValue(valueToStore);
    window.localStorage.setItem(key, JSON.stringify(valueToStore));
  };
 
  return [storedValue, setValue];
}

react

Breakdown

useState(() => { ... })

Lazy initialization to read from localStorage only once on mount.

JSON.parse(item)

Converts the stored string back into a JavaScript object/value.

window.localStorage.setItem(key, ...)

Updates the browser storage whenever the state changes.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Custom Hook: useLocalStorage

Related