usePromiseResolve
Promiseを外側からresolveするのをやるreact hooks
使い方
code:js
function App() {
const getPromise, resolve = usePromiseResolve()
useEffect(()=>{
(async () => {
const event = await getPromise()
console.log(event)
})()
},[])
return <div onMouseDown={resolve}>hoge</div>
}
getPromiseが関数呼び出しなのに注意
実行するたびに新たにpromiseを作る
resoveする方は同一の関数を使い回せる
ソース
code:ts
import { useRef, useCallback } from "react";
function useRefFn<Fn extends CallableFunction>() {
const ref = useRef<Fn>();
const fn = useCallback((...args) => {
ref.current?.(...args);
}, []);
return fn, (fn: Fn) => (ref.current = fn) as const;
}
type Resolve<T> = (value: T) => void;
function makePromise<T>(
setRes: (resolve: Resolve<T>) => void,
cancel?: Promise<void>
): Promise<T> {
return new Promise((res, rej) => {
setRes(res);
cancel?.then(() => rej());
});
}
export function usePromiseResolve<T>() {
const resolve, setResolve = useRefFn<(arg: T) => void>();
const getPromise = () => makePromise(setResolve);
return getPromise, resolve as const;
}
useRefFnというhooksを用意している
これは、呼び出す関数自体はuseCallbackでシングルトンな存在
シングルトンというのは、レンダリングを通して同一という意味
useRefで関数を保持して、こいつを呼び出す
とにかくレンダリングと独立して１つの関数を保持したいときに使える
getPromiseで新しいpromiseを作るようにしてるのは、繰り返しpromiseを待つのに必要だから
そうでないと一度resolveしたらそれで終わりになる
todo
cancelとかのapiも入れたい