Cómo usar async/await en las funciones de renderizado de React

En React, la función de renderizado generalmente está destinada a operaciones puras y sincrónicas. Sin embargo, en determinados escenarios, es posible que necesite realizar tareas asincrónicas dentro de esta función. Este artículo abordará cómo utilizar eficazmente la sintaxis async/await en la función de renderizado.

Comprender el problema

Como se destaca la pregunta, intentar usar async/ await directamente dentro de la función de mapa en la función de renderizado puede resultar en un comportamiento inesperado. Esto se debe a que la función de mapa espera operaciones sincrónicas e intentar realizar llamadas asincrónicas dentro de ella puede interrumpir el flujo del proceso de renderizado.

Separación de la obtención de datos de la visualización

Para resolver este problema, se recomienda separar el proceso de obtención de datos de la lógica de visualización. En lugar de realizar operaciones asincrónicas dentro de la función de renderizado, es más apropiado iniciar la recuperación de datos en un componente o enlace separado.

Obtención de datos asincrónica en el componente principal

En este enfoque, se crea un componente principal (por ejemplo, ParentThatFetches) responsable de realizar solicitudes asincrónicas y administrar los datos. Utilizando los métodos o enlaces del ciclo de vida, el componente principal recupera los datos y los almacena en el estado. Posteriormente, el componente principal representa condicionalmente un componente secundario funcional puro (por ejemplo, Child) que recibe los datos obtenidos como accesorios.

class ParentThatFetches extends React.Component {
constructor () {

this.state = {};

}

componentDidMount () {

fetch('/some/async/data')
  .then(resp => resp.json())
  .then(data => this.setState({data}));

}

render () {

{this.state.data && (
  <Child data={this.state.data} />
)}

}
}

const Niño = ({ datos }) => (

{data.map((x, i) => (<td key={i}>{x}</td>))}

Obtener datos mediante ganchos

Con la llegada de los ganchos en React, la recuperación de datos se puede simplificar aún más. El siguiente fragmento de código demuestra cómo utilizar enlaces para recuperar datos de forma asincrónica y actualizar el estado en consecuencia:

const ParentThatFetches = () => {
const [data, updateData] = useState();
useEffect(() => {

const getData = async () => {
  const resp = await fetch('some/url');
  const json = await resp.json()
  updateData(json);
}
getData();

}, []);

devolver datos &&
}