React Native: Async Storage Hook

async-storage-hook.ts

/* eslint-disable no-unused-vars */
import { useEffect, useState } from 'react'
import AsyncStorage from '@react-native-community/async-storage'
import { isNil } from 'lodash';

export const useAsyncStorage =
  <TValue = any>(key: string, defaultValue?: TValue):
  [TValue | undefined, typeof setValue, boolean] =>
{
  const [value, setLocalValue] = useState<TValue | undefined>(defaultValue);
  const [isLoading, setIsLoading] = useState(true);

  const setValue = async (value: TValue) => {
    setIsLoading(true)
    await AsyncStorage.setItem(key, JSON.stringify(value))
    setLocalValue(value)
    setIsLoading(false)
  }

  useEffect(() => {
    const getValue = async () => {
      try {
        setIsLoading(true)

        const value = await AsyncStorage.getItem(key)

        if (value === null && !isNil(defaultValue)) {
          return setValue(defaultValue)
        }

        if (value !== null) {
          setLocalValue(JSON.parse(value))
        }
      } catch (e) {
        if (!isNil(defaultValue)) {
          setValue(defaultValue)
        }
      } finally {
        setIsLoading(false)
      }
    }
    getValue()
  }, [])

  return [value, setValue, isLoading]
}