useRef with Promise

usePromiseRef.ts

import { useRef, MutableRefObject } from 'react';

interface PromiseRef<T, E> {
  promise: Promise<T>;
  resolve: (value: T) => void;
  reject: (reason: E) => void;
}

type UsePromiseRefReturn<T, E> = [
  MutableRefObject<PromiseRef<T, E> | null>,
  () => void,
];

export const usePromiseRef = <T, E>(): UsePromiseRefReturn<T, E> => {
  const promiseRef = useRef<PromiseRef<T, E> | null>(null);

  const createPromise = () => {
    let resolveCallback: (value: T) => void;
    let rejectCallback: (reason: E) => void;

    const promise = new Promise<T>((resolve, reject) => {
      resolveCallback = resolve;
      rejectCallback = reject;
    });

    promiseRef.current = {
      promise,
      resolve: resolveCallback!,
      reject: rejectCallback!,
    };
  };

  return [promiseRef, createPromise];
};

Example of using usePromiseRef with WebView onMessage