Como usar async/await nas funções de renderização do React

No React, a função de renderização normalmente é destinada a operações puras e síncronas. No entanto, em determinados cenários, poderá encontrar a necessidade de executar tarefas assíncronas dentro desta função. Este artigo abordará como usar efetivamente a sintaxe async/await na função de renderização.

Compreendendo o problema

Como a pergunta destaca, tentar usar async/ await diretamente na função map na função render pode resultar em comportamento inesperado. Isso ocorre porque a função map espera operações síncronas e a tentativa de realizar chamadas assíncronas dentro dela pode interromper o fluxo do processo de renderização.

Separando a busca de dados da exibição

Para resolver esse problema, é recomendado separar o processo de busca de dados da lógica de exibição. Em vez de executar operações assíncronas dentro da função de renderização, é mais apropriado iniciar a busca de dados em um componente ou gancho separado.

Busca de dados assíncrona no componente pai

Nesta abordagem, você cria um componente pai (por exemplo, ParentThatFetches) responsável por fazer solicitações assíncronas e gerenciar os dados. Utilizando os métodos ou ganchos do ciclo de vida, o componente pai busca os dados e os armazena no estado. Posteriormente, o componente pai renderiza condicionalmente um componente filho funcional puro (por exemplo, Child) que recebe os dados buscados como adereços.

class ParentThatFetches estende React.Component {
construtor () {

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 Filho = ({ dados }) => (

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

Com o advento dos ganchos no React, a busca de dados pode ser ainda mais simplificada. O trecho de código a seguir demonstra como usar ganchos para buscar dados de forma assíncrona e atualizar o estado de acordo:

const [data, updateData] = useState();

}, []);

return data &&

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