React TypeScript 16.8 Как сделать useEffect() асинхронным
Почему useEffect() нельзя использовать асинхронное ожидание?
const Home: React.FC = () => {
useEffect(async () => {
console.info(await ecc.randomKey())
}, [])
return (
...
Ошибка, которую я получаю,
Argument of type '() => Promise' is not assignable to parameter of type 'EffectCallback'.
Type 'Promise' is not assignable to type 'void | (() => void | undefined)'.
Type 'Promise' is not assignable to type '() => void | undefined'.
Type 'Promise' provides no match for the signature '(): void | undefined'.ts(2345)
Ответы 4
Не рекомендуется объявлять эффект как асинхронную функцию. Но вы можете вызывать асинхронные функции внутри эффекта, как показано ниже:
useEffect(() => {
const genRandomKey = async () => {
console.info(await ecc.randomKey())
};
genRandomKey();
}, []);
Подробнее здесь: React Hooks извлекает данные
Вы можете использовать IIFE (асинхронную анонимную функцию, которая выполняется сама) следующим образом:
useEffect(() => {
// Some synchronous code.
(async () => {
await doSomethingAsync();
})();
return () => {
// Component unmount code.
};
}, []);
Почему
Использование асинхронной функции в useEffect заставляет функцию обратного вызова возвращать Promise вместо функция очистки.
Решение
useEffect(() => {
const foo = async () => {
await performPromise()
};
foo();
}, []);
ИЛИ с IIFE
useEffect(() => {
(async () => {
await performPromise()
})()
}, []);
Для тех, кто не знает, как это называется, это IIFE (Immediately Invoked Function Expression) и вот ссылка MDN developer.mozilla.org/en-US/docs/Glossary/IIFE