Gestion des États Asynchrones

Utilisation de Promises avec useState et useEffect

Les Promises sont un moyen courant de gérer des opérations asynchrones en JavaScript. Voici un exemple d'utilisation de Promises avec useState et useEffect pour récupérer des données depuis une API :

Composant React pour Récupérer des Données avec Fetch

Ce composant DataFetcher utilise fetch pour récupérer une liste de publications depuis une API et les afficher dynamiquement.

1. Code du Composant

Le code suivant permet de récupérer et d'afficher une liste de publications en gérant les états de chargement et d'erreur.

📋 Copier le code

📋 Copier le code

import React, { useState, useEffect } from 'react';

function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
	if (!response.ok) {
		throw new Error('Erreur réseau');
	}
	return response.json();
})
.then(data => {
	setData(data);
	setLoading(false);
})
.catch(error => {
	setError(error.message);
	setLoading(false);
});
}, []);

if (loading) return <div>Chargement...</div>;
if (error) return <div>Erreur : {error}</div>;

return (
<ul>
{data.map(post => (
	<li key={post.id}>{post.title}</li>
))}
</ul>
);
}

export default DataFetcher;

Explication du code :

• useState gère trois états : données, chargement, et erreur.
• useEffect exécute la requête fetch au chargement du composant.
• fetch récupère les données de l'API et met à jour l'état data.
• loading : Affiche Un message de chargement s'affiche tant que les données ne sont pas disponibles.
• En cas d'échec, un message d'erreur est affiché.

3. Utilisation du Composant

Ce composant peut être utilisé dans un projet React comme suit :

📋 Copier le code

import React from 'react';
import DataFetcher from './DataFetcher';

function App() {
return (
<div>
<h1>Liste des Publications</h1>
<DataFetcher />
</div>
);
}

export default App;

4. Résumé

Ce composant React permet de récupérer et d'afficher des données d'une API externe tout en gérant les erreurs et le chargement.

Utilisation de async/await avec useState et useEffect

L'utilisation de async/await rend le code asynchrone plus lisible et plus facile à gérer. Voici un exemple :

📋 Copier le code

import React, { useState, useEffect } from 'react';

function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
	const response = await fetch('https://jsonplaceholder.typicode.com/posts');
	if (!response.ok) {
		throw new Error('Erreur réseau');
	}
	const result = await response.json();
	setData(result);
	setLoading(false);
} catch (error) {
	setError(error.message);
	setLoading(false);
}
};

fetchData();
}, []);

if (loading) return <div>Chargement...</div>;
if (error) return <div>Erreur : {error}</div>;

return (
<ul>
{data.map(post => (
	<li key={post.id}>{post.title}</li>
))}
</ul>
);
}

export default DataFetcher;

Explication du code :

• async/await : Simplifie la gestion des opérations asynchrones en évitant les chaînes de .then.
• try/catch : Permet de capturer et de gérer les erreurs de manière structurée.
• fetchData : Une fonction asynchrone qui effectue la requête API et met à jour l'état.

Gestion des états asynchrones avec des hooks personnalisés

Pour simplifier la gestion des états asynchrones, vous pouvez créer un hook personnalisé. Voici un exemple :

📋 Copier le code

import { useState, useEffect } from 'react';

function useAsyncData(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
	const response = await fetch(url);
	if (!response.ok) {
		throw new Error('Erreur réseau');
	}
	const result = await response.json();
	setData(result);
	setLoading(false);
} catch (error) {
	setError(error.message);
	setLoading(false);
}
};

fetchData();
}, [url]);

return { data, loading, error };
}

export default useAsyncData;

Explication du code :

• useAsyncData : Un hook personnalisé qui encapsule la logique de récupération de données asynchrones.
• url : L'URL de l'API à interroger, passée en paramètre.
• return : Retourne un objet contenant les données, l'état de chargement et les erreurs.

Utilisation du hook personnalisé

📋 Copier le code

import React from 'react';
import useAsyncData from './useAsyncData';

function DataFetcher() {
const { data, loading, error } = useAsyncData('https://jsonplaceholder.typicode.com/posts');

if (loading) return <div>Chargement...</div>;
if (error) return <div>Erreur : {error}</div>;

return (
<ul>
{data.map(post => (
	<li key={post.id}>{post.title}</li>
))}
</ul>
);
}

export default DataFetcher;

Explication du code :

• useAsyncData : Utilise le hook personnalisé pour récupérer les données.
• data, loading, error : Les états retournés par le hook.

Conclusion

Vous avez maintenant une solide compréhension de la gestion des états asynchrones en React. Que ce soit avec des Promises, async/await, ou des hooks personnalisés, ces techniques vous permettront de gérer efficacement les opérations asynchrones dans vos applications.

Pour continuer votre apprentissage, découvrez comment utiliser React.lazy et Suspense pour améliorer les performances de chargement dans le chapitre suivant : React.lazy et Suspense.