custom useState hook to return a promise for setState which resolves when the state changes

useAwaitState.ts

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

/**
 * return a promise that resolves when useState updates
 * 
 * @usage 
 * 
 * * const [state, setState] = useAwaitState('')
 * 
 * * await setState('newVal')
 * * doStuffAfterRenderStateChange()
 *
 * @param initialState
 */
const useAwaitState = (initialState: any): [any, (newValue: any) => Promise<any>] => {
  const [state, setState] = useState(initialState)
  const callbackRef = useRef<Function>(null)

  const setStateWithPromise = (newValue: any): Promise<any> =>
    new Promise((resolve, reject) => {
      callbackRef.current = () => {
        callbackRef.current = null
        resolve(newValue)
      }
      setState(newValue)
    })

  useEffect(() => {
    if (callbackRef.current) {
      callbackRef.current()
    }
  }, [state])

  useEffect(
    () => () => {
      // unmount hook
      callbackRef.current = null
    },
    []
  )
  return [state, setStateWithPromise]
}
export default useAwaitState