Listen for promises and give the last promise value as react state

usePromise.ts

import { useLayoutEffect, useRef, useState } from 'react'

export function usePromise<T>(promise: Promise<T>) {
  const [isLoading, setIsLoading] = useState(true)
  const [value, setValue] = useState<T>()
  const valueVersion = useRef(0)

  useLayoutEffect(() => {
    const valueOnClosure = ++valueVersion.current

    promise.then(newValue => {
      if (valueOnClosure < valueVersion.current) return

      setValue(newValue)
      setIsLoading(false)
    })
    setIsLoading(true)
  }, [promise])

  return { value, isLoading }
}