Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
import { useState } from 'react';
// Usage
function App() {
// Similar to useState but first arg is key to the value in local storage.
const [name, setName] = useLocalStorage('name', 'Bob');
return (
placeholder="Enter your name"
onChange={e => setName(}
// Hook
function useLocalStorage(key, initialValue) {
// State to store our value
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState(() => {
try {
// Get from local storage by key
const item = window.localStorage.getItem(key);
// Parse stored json or if none return initialValue
return item ? JSON.parse(item) : initialValue;
} catch (error) {
// If error also return initialValue
return initialValue;
// Return a wrapped version of useState's setter function that ...
// ... persists the new value to localStorage.
const setValue = value => {
try {
// Allow value to be a function so we have same API as useState
const valueToStore =
value instanceof Function ? value(storedValue) : value;
// Save state
// Save to local storage
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
// A more advanced implementation would handle the error case
return [storedValue, setValue];
Copy link

ris58h commented Sep 13, 2022

Could we add a custom serialization/deserialization logic?
function useLocalStorage(key, initialValue, serialize = JSON.stringify, deserialize = JSON.parse) {
And use those functions instead of calling JSON.stringify/JSON.parse.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment