Asynchronous initial state about react-hooks-global-state HOT 4 CLOSED

const initialState = {
  query: ''
}
const { useGlobalState, setGlobalState } = createGlobalState(initialState)

const useQueryState = () => {
  const [query, setQuery] = useGlobalState('query')
 
  return useInitialStateFromAsyncStorage([query, setQuery], { asyncStorageKey: 'query' })
}

const [query, setQuery] = useQueryState()

import type { SetStateAction } from 'react'
import { useRef, useEffect } from 'react'
import AsyncStorage from '@react-native-community/async-storage'
import { useDebounce } from '@beatgig/hooks/use-debouce'

type Props<State> = [state: State, setState: (u: SetStateAction<State>) => void]

type Options = {
  asyncStorageKey: string
  debounce?: number
}

export default function useInitialStateFromAsyncStorage<State>(
  [state, setState]: Props<State>,
  { asyncStorageKey, debounce = 200 }: Options
) {
  const hasStateBeenUpdated = useRef(false)
  const mounted = useRef(false)
  useEffect(() => {
    if (mounted.current) {
      hasStateBeenUpdated.current = true
    } else {
      mounted.current = true
    }
  }, [state])

  useEffect(() => {
    const getFromAsyncStorage = async () => {
      const fromStorage: null | string = await AsyncStorage.getItem(
        asyncStorageKey
      )
      console.log('[use-initial-state-from-async-storage] get item', {
        asyncStorageKey,
        fromStorage,
      })
      // only set it from local storage if we haven't changed the state yet, meaning it's equal to its initial state
      if (fromStorage && !hasStateBeenUpdated.current) {
        let newState: { value: State } | null = null
        try {
          newState = JSON.parse(fromStorage)
          if (newState?.value) {
            hasStateBeenUpdated.current = true // not necessary but whatever
            setState(newState?.value)
          }
        } catch (e) {
          console.error(
            `[use-initial-state-from-async-storage] error getting from local storage ${e}`,
            { newState }
          )
        }
      }
    }
    getFromAsyncStorage()
    // these will never change
  }, [asyncStorageKey, setState])

  const debouncedState = useDebounce(state, debounce)

  const debouncedStateString = JSON.stringify({ value: debouncedState })

  useEffect(() => {
    if (debouncedStateString) {
      console.log('[use-initial-state-from-async-storage] set item', {
        asyncStorageKey,
        debouncedStateString,
      })
      AsyncStorage.setItem(asyncStorageKey, debouncedStateString)
    }
  }, [asyncStorageKey, debouncedStateString])

  return [state, setState] as const
}