UseLocalStorage.js

import { useState } from "react";

// Hook
export default function useLocalStorage(key, initialValue) {
	// State to store our value
	// Pass initial state function to useState
	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
			// Allows for the same API as useState
			const valueToStore =
				value instanceof Function ? value(storedValue) : value;
			// Save state
			setStoredValue(valueToStore);
			// Save to local storage
			window?.localStorage.setItem(key, JSON.stringify(valueToStore));
		} catch (error) {
			// A more advanced implementation would handle the error case
			if (!error.isPrototypeOf(ReferenceError)) {
				console.log(error);
			}
		}
	};
	return [storedValue, setValue];
}

This hook was adapted from usehooks.com/useLocalStorage