La asincronía es un concepto muy discutido en el mundo de la programación, pues nos permite crear eventos según los que se ejecutarán ciertas acciones. Esto quiere decir que podemos preparar acciones en caso de que ocurran ciertas situaciones. Ya que este concepto es mayormente utilizado en el lenguaje JavaScript, React nos permite acceder a esta forma de programación. En este post, te enseñaremos qué son y cómo funcionan los métodos async y await en React (async react y await in react) para que emplees la asincronía en tus proyectos.
¿Qué son async y await en React?
React es una librería JavaScript que nos permite mezclar el poder de este lenguaje de programación con la sintaxis de HTML. De este modo, nos facilita el proceso de crear interfaces de usuario en el desarrollo de aplicaciones de una sola página, también conocidas como SPA (single page application).
Al ser una herramienta que hereda en gran medida la lógica de JavaScript, los métodos async y await en React (async react y await in react) funcionan de manera muy similar a estos métodos en JavaScript. Del mismo modo que en aquel lenguaje de programación, estos métodos son funciones propias del objeto promise o promesa. Entonces, cada vez que insertemos un elemento que nos devuelva o sea una promesa, podremos usar los métodos async y await en React. Sin embargo, aquí estos métodos son un poco diferentes.
¿Cómo funcionan async y await en React?
Para explicarte cómo funcionan los métodos async y await en React (async react y await in react), utilizaremos un componente de ejemplo. Este componente contiene un efecto que, a su vez, utiliza la función get que hemos creado en nuestro post sobre crear una función get con un cliente en Axios. A continuación, te presentamos las líneas de código que tenemos por el momento:
//async await in react js
const TweetsPage = ( ) => {
const [tweets, setTweets] = useState ([]);
useEffect (() => {
getLatestTweets ().then (tweets => setTweets (tweets))
}, [ ]);
return (
<div className = ‘tweetsPage’>
<ul>
{tweets.map (tweet => (
<li key= {tweet.id}> {tweet.content}</li>
))}
</ul>
</div>
);
};
export default TweetsPage;
En las líneas de código anteriores puedes ver que utilizamos el método then para controlar la función getLatestTweets. Al igual que este método, los métodos async y await en React se relacionan con el manejo de promesas. Entonces, como la función getLatestTweets nos devuelve una promesa, podemos trabajar con async y await. Ahora, estos métodos no son tan intuitivos en React como lo son en JavaScript.
Para transformar la función de useEffect anterior utilizando los métodos async y await en React, podríamos pensar en escribir las siguientes líneas de código:
//await in react native
useEffect (async ( ) => {
const tweets = await getLatestTweets ( )
setTweets (tweets)
}, []);
Este nuevo código y el que teníamos con el método then es equivalente. Es decir, si hacemos la nueva petición, obtendremos el mismo resultado. Entonces, tanto el método then como async y await consumen la promesa de manera exitosa.
Sin embargo, con estas nuevas líneas de código, obtendremos una advertencia de React. Esta advertencia nos manda el siguiente mensaje:
Effect callbacks are synchronous to prevent race conditions.
Put the async function inside.
El mensaje anterior quiere decir que la función que le pasamos al efecto no debe ser asíncrona. ¿Por qué? Recordemos cómo funciona useEffect. En esta función podemos pasar dos parámetros: una primera función con el código que vamos a ejecutar en el efecto y otra de dependencias. La primera función puede, además, devolver una función de tipo cleanup. Si decidimos no devolver una función, obtendremos el valor de retorno undefined. Estas son las dos posibilidades de la primera función-parámetro de useEffect.
Entonces, cuando utilizamos los métodos async y await en React, el programa nos da una alarma, porque estamos usando async como función de useEffect. El problema aquí es que async nos devuelve una promesa, es decir, un objeto promise. Este objeto promise no es ni undefined ni otra función, por lo que no es bien recibido dentro de useEffect.
Para solucionar esta advertencia, debemos declarar una función dentro de useEffect que llame a async, pero que no se declare como asíncrona. A continuación, te mostramos las líneas de código finales:
//function async react
useEffect (() => {
const execute = async ( ) => {
const tweets = await getLatestTweets ( );
setTweets (tweets);
};
execute ( );
}, [ ]);
Nunca podrás declarar async a la función que pases como parámetro de un useEffect en React. Por ello, declaramos una función execute, dentro de la que usamos el método async. Dentro de esta función, también puedes manejar los métodos try catch de JavaScript.
¿Quieres seguir aprendiendo?
Después de leer este post sabes exactamente cómo funcionan los métodos async y await en React y cómo se diferencian de JavaScript. Si quieres seguir aprendiendo sobre el mundo de la programación web, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a dominar lenguajes como JSX, JavaScript, CSS y HTML. ¿Quieres seguir aprendiendo con nosotros? ¡Inscríbete ya!
