Why

Question

0

860

Vistas

React TypeScript 16.8 How to make useEffect() async

Why can't useEffect() use async-await?

const Home: React.FC = () => {
    
    useEffect(async () => {
        console.log(await ecc.randomKey())
    }, [])
    
    return (
    ...

The error I get is

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)

over 4 years ago · Santiago Trujillo

3 Respuestas

Responde la pregunta

0

You can use an IIFE (asynchronous anonymous function which executes itself) like so:

useEffect(() => {
    // Some synchronous code.

    (async () => {
        await doSomethingAsync();
    })();

    return () => {
        // Component unmount code.
    };
}, []);

over 4 years ago · Santiago Trujillo Denunciar

0

Why

Using an async function in useEffect makes the callback function return a Promise instead of a cleanup function.

Solution

useEffect(() => {
  const foo = async () => {
    await performPromise()
  };

  foo();
}, []);

OR with IIFE

useEffect(() => {
  (async () => {
    await performPromise()
  })()
}, []);

over 4 years ago · Santiago Trujillo Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-04-12T22:21:33.924Z

Declaring the effect as async function is not recommended. But you can call async functions within the effect like following:

useEffect(() => {
  const genRandomKey = async () => {
    console.log(await ecc.randomKey())
  };

  genRandomKey();
}, []);

More here: React Hooks Fetch Data

0

860

React TypeScript 16.8 How to make useEffect() async

3 Respuestas

0

0

0

Why

Solution

Encuentra empleos remotos

Andres GPT