Back to Snippets

useLocalStorage Hook

typescript
React

A custom React hook for persisting state in localStorage with TypeScript support.

Code

1import { useState, useEffect } from "react";
2
3function useLocalStorage<T>(key: string, initialValue: T) {
4const [storedValue, setStoredValue] = useState<T>(() => {
5if (typeof window === "undefined") {
6return initialValue;
7}
8try {
9const item = window.localStorage.getItem(key);
10return item ? JSON.parse(item) : initialValue;
11} catch (error) {
12console.error(error);
13return initialValue;
14}
15});
16
17const setValue = (value: T | ((val: T) => T)) => {
18try {
19const valueToStore = value instanceof Function 
20? value(storedValue) 
21: value;
22setStoredValue(valueToStore);
23if (typeof window !== "undefined") {
24window.localStorage.setItem(key, JSON.stringify(valueToStore));
25}
26} catch (error) {
27console.error(error);
28}
29};
30
31return [storedValue, setValue] as const;
32}
33
34// Usage
35const [theme, setTheme] = useLocalStorage("theme", "dark");

Details

Language

typescript

Category

React