Comment utiliser async/await dans les fonctions de rendu React

Dans React, la fonction de rendu est généralement destinée aux opérations pures et synchrones. Cependant, dans certains scénarios, vous pouvez être amené à effectuer des tâches asynchrones au sein de cette fonction. Cet article explique comment utiliser efficacement la syntaxe async/await dans la fonction de rendu.

Comprendre le problème

Comme le souligne la question, tenter d'utiliser async/ wait directement dans la fonction map dans la fonction render peut entraîner un comportement inattendu. En effet, la fonction map s'attend à des opérations synchrones et tenter d'y effectuer des appels asynchrones peut perturber le flux du processus de rendu.

Séparer la récupération des données de l'affichage

Pour résoudre ce problème, il est recommandé de séparer le processus de récupération des données de la logique d'affichage. Au lieu d'effectuer des opérations asynchrones dans la fonction de rendu, il est plus approprié de lancer la récupération des données dans un composant ou un hook distinct.

Récupération de données asynchrones dans le composant parent

Dans cette approche, vous créez un composant parent (par exemple, ParentThatFetches) chargé d'effectuer des requêtes asynchrones et de gérer les données. À l'aide des méthodes de cycle de vie ou des hooks, le composant parent récupère les données et les stocke dans l'état. Par la suite, le composant parent restitue conditionnellement un composant enfant fonctionnel pur (par exemple, Child) qui reçoit les données récupérées sous forme d'accessoires.

class ParentThatFetches étend React.Component {
constructeur () {

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 Enfant = ({ data }) => (

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

Récupération de données à l'aide de hooks

Avec l'avènement des hooks dans React, la récupération de données peut être encore simplifiée. L'extrait de code suivant montre comment utiliser des hooks pour récupérer des données de manière asynchrone et mettre à jour l'état en conséquence :

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

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

}, []);

renvoie les données &&
}