get an async value with useSyncExternalStore

get-async.ts

import { useCallback, useRef, useState, useSyncExternalStore } from 'react'

type Listener = () => void

interface UseAsyncReturn<T> {
  data: T | undefined
  error: any
  isLoading: boolean
  refresh: () => void
}

const __listeners = new Set<Listener>()
function subscribe(listener: Listener) {
  __listeners.add(listener)
  return () => __listeners.delete(listener)
}

export function useAsync<T>(getAsync: () => Promise<T>): UseAsyncReturn<T> {
  const cache = useRef<T>()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState()
  const currentCache = useSyncExternalStore<T | undefined>(
    subscribe,
    () => cache.current,
  )

  const refresh = useCallback(() => {
    setIsLoading(true)
    getAsync()
      .then((m) => {
        cache.current = m
        setIsLoading(false)
      })
      .catch((error) => {
        setIsLoading(false)
        setError(error)
      })
  }, [getAsync])

  return {
    data: currentCache,
    isLoading,
    error,
    refresh,
  }
}