Skip to content

Instantly share code, notes, and snippets.

Created March 21, 2023 11:25
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
useLocalStorage React hook. Keep a state value in sync with one cached in the browser using local storage.
import { useState, useEffect, Dispatch, SetStateAction } from 'react';
export function useLocalStorage<T>(key: string, defaultValue: T): { value: T; setValue: Dispatch<SetStateAction<T>> } {
const [value, setValue] = useState(() => {
return localStorage?.getItem(key) ? JSON.parse(localStorage.getItem(key)) : defaultValue;
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return { value, setValue };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment