JAVASCRIPT
Persisting React State with `useLocalStorage` Hook
Build a `useLocalStorage` React hook to automatically save and load component state from the browser's local storage, ensuring data persistence across sessions.
import { useState, useEffect, useCallback } from 'react';
function useLocalStorage(key, initialValue) {
// Helper function to get stored value or initial value
const getStoredValue = useCallback(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.warn(`Error reading localStorage key "${key}":`, error);
return initialValue;
}
}, [key, initialValue]);
// State to store our value
const [value, setValue] = useState(getStoredValue);
// Effect to update localStorage whenever the value changes
useEffect(() => {
try {
window.localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.warn(`Error writing localStorage key "${key}":`, error);
}
}, [key, value]); // Only re-run if key or value changes
return [value, setValue];
}
// Example Usage:
/*
function ThemeSwitcher() {
const [theme, setTheme] = useLocalStorage('appTheme', 'light'); // Default to 'light'
const toggleTheme = () => {
setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<div style={{ background: theme === 'dark' ? '#333' : '#eee', color: theme === 'dark' ? '#eee' : '#333', padding: '20px' }}>
<h1>Current Theme: {theme}</h1>
<button onClick={toggleTheme}>Toggle Theme</button>
<p>This theme preference is persisted in local storage!</p>
</div>
);
}
*/
How it works: The `useLocalStorage` hook allows you to persist a React state variable in the browser's local storage. It initializes the state by attempting to retrieve the value associated with the `key` from local storage; if not found or an error occurs, it uses the `initialValue`. A `useEffect` hook then ensures that whenever the `value` state changes, the new value is automatically serialized to JSON and stored in local storage, providing persistence across browser sessions. It returns an array similar to `useState`, `[value, setValue]`.