usePromise
Promised な useState
Promise または Promise を返す関数がある時、これを上手く React Hooks で使いたいな、という時のためのラッパ
settled したら再描画して、以降は値をしてくれる
ReactComponent の場合は React.lazy を使います。そうでないときは？
useEffect の中で実行して、値を useState でセットして・・・とすると意外と行数がかかる
reject のハンドルが面倒
ユースケースは幅広いと思う
値でも関数でも、両方入れられるのがポイント
code:usePromise.ts
import { useState, useEffect } from 'react';
type PromiseFunc<T> = () => Promise<T>;
export function usePromise<T, E = Error>(
promise: Promise<T> | PromiseFunc<T>
): T | undefined, E | undefined {
const value, setValue = useState<T>();
const error, setError = useState<E>();
useEffect(() => {
if (typeof promise === 'function') {
promise = promise();
}
promise.then(value => {
// setValue function allows (prevState => nextState) as first arg. It should give (prevState => value)
if (typeof value === 'function') {
setValue(() => value);
} else {
setValue(value);
}
}, setError);
}, []);
return value ? value, undefined : undefined, error;
}
これは useState を扱うライブラリ全般に言えることなのですが、 setValue する前に、valueが関数かどうかを判断するのがポイントです
関数の場合は prevState => nextState として扱われるので、関数がコールされて中身がセットされてしまいます