This repository has been archived on 2024-11-20. You can view files and clone it, but cannot push or open issues or pull requests.
p61-project/hooks/useLocalStorage.ts

44 lines
1.1 KiB
TypeScript
Raw Normal View History

2024-02-16 22:51:50 +01:00
import { useCallback, useEffect, useRef, useState } from "react"
import AsyncStorage from "@react-native-async-storage/async-storage"
type UseLocalStorageResult<T> = [T, React.Dispatch<React.SetStateAction<T>>]
export const useLocalStorage = <T extends unknown>(
key: string,
defaultValue: T,
): UseLocalStorageResult<T> => {
const hasSaved = useRef(false)
const [value, setValue] = useState<T>(defaultValue)
const getFromLocalStorage = useCallback(async (): Promise<T> => {
const value = await AsyncStorage.getItem(key)
hasSaved.current = true
if (value == null) {
return defaultValue
}
return JSON.parse(value) as T
}, [key, defaultValue])
useEffect(() => {
if (!hasSaved.current) {
return
}
AsyncStorage.setItem(key, JSON.stringify(value)).catch((error) => {
console.error(error)
})
}, [key, value])
useEffect(() => {
getFromLocalStorage()
.then((value) => {
setValue(value)
})
.catch((error) => {
setValue(defaultValue)
console.error(error)
})
}, [defaultValue, getFromLocalStorage])
return [value, setValue]
}