Llamar a una función asíncrona dentro del hook useEffect en React Function Components

Si habéis intentado llamar a una función asíncrona dentro del hook de useEffect es posible que os hayáis encontrado con un error que no os lo permite:

Argument of type ‘() => Promise<void>’ is not assignable to parameter of type ‘EffectCallback’.

El error aparece al intentar añadir el “async”, pero no se puede asignar la Promise al objeto que está esperando.

const [myVar, setMyVar] = React.useState([]);

  React.useEffect(async() => {
      let items = await myFunction();
  }, []);

Pero lo que sí se puede hacer es declarar la función asíncrona dentro y después llamarla. Eso sí, si la función retorna un valor deberemos tratarlo en su interior, si no lo que obtendremos es la Promise, no el valor.

const [myVar, setMyVar] = React.useState([]);

  React.useEffect(() => {
    async function getItems() {
      let items = await myFunction();
      setMyVar(items);
    }
    
    getItems();
  }, []);