Maîtrisez useEffect en NextJS

L'Équipe Alphorm
L'Équipe Alphorm 9e lecture en min

Dans notre article précédent, nous avons abordé la gestion de formulaires dans NextJS. Poursuivant sur cette lancée, explorons maintenant le hook useEffect en NextJS. Cet outil puissant permet de gérer les effets secondaires dans vos applications web. Que vous souhaitiez effectuer des appels API, manipuler des données JSON ou mettre en place des indicateurs de chargement, useEffect offre une solution flexible et efficace. Dans cet article, nous allons explorer plusieurs exemples concrets pour mieux comprendre comment utiliser useEffect en NextJS de manière optimale. Suivez-nous pour découvrir les meilleures pratiques et astuces qui vous aideront à améliorer vos compétences en développement web.

Définir le tableau de dépendance avec useEffect en NextJS

Dans l’article précédent, nous avons tiré des expériences et bien pratiqué nos compétences acquises . Bah c’est super sympa non, et maintenant, nous allons continuer notre apprentissage en découvrant des nouvelles compétences. Dans cette partie, nous allons parler le hook useEffect en nextJS. Comme maitriser déjà en reactJS sa fonctionnalité mais faire un petit rappel me fait plaisir pour accentuer votre compréhension.

Donc maintenant, nous allons profiter un peu l’exercice que nous avons fait précédemment pour voir la fonctionnalité de useEffect.

Premièrement, déclarons le Hook useEffect dans le fichier app/page.js. Voici comment en déclarer dans ce fichier :

				
					useEffect(()=>{
console.log("ceci est grace à useEffect");
})
				
			

Voilà, nous avons déclaré un useEffect en y mettant un message dans la console. Parfait, lançons notre application maintenant et injecter la page pour découvrir la fonctionnalité que ce Hook useEffect en NextJS nous apporte si on apporte un évènement dans notre page.

Capture d'écran montrant l'utilisation de useEffect en NextJS avec un message de console affiché.

Voici à quoi ressemble notre application après son lancement et son chargement. Le message du useEffect s’affiche correctement au démarrage de l’application. De plus, si des événements sont ajoutés à la page, le nombre d’affichages augmente. Peu importe le type d’événement ajouté sur la page, le message est affiché.

Illustration du résultat après plusieurs événements déclenchés, montrant des messages dans la console.

Vous voyez sur le visuel, nous avons tapé 5 fois la lettre a et du coup le message affiche 5 fois aussi apres lancement de l’application.

C’est normal car il n’y a pas encore de tableau de dépendances spécifié.

Ajoutons alors le tableau de dépendance comme paramètre de useEffect en NextJS pour gérer la dépendance de notre page.

				
					useEffect(()=>{
console.log("ceci est grace à useEffect");
},[])
				
			

Nous avons mis aucun élément d’abord dans le tableau de dépendance, Cela veut dire que le useEffect ne réagit à aucun évènement dans la page.

Exemple de code ajoutant un tableau de dépendance au hook useEffect en NextJS.

Comme vous pouvez le constater, même si nous avons ajouté une tâche via le formulaire, le message ne s’affiche qu’au chargement de l’application et ne prend pas en compte les autres événements sur la page.

Ajoutons maintenant par exemple le constat tasks ( le getter de notre useState pour la tache) dans le tableau de dépendance pour voir ce qui se passe.

				
					useEffect(()=>{
console.log("ceci est grace à useEffect");
},[tasks])
				
			

Et puis démarrons l’application maintenant.

Résultat de l'application après ajout d'une dépendance dans useEffect, montrant un message unique.

Après l’ajout d’une tâche, le message s’affiche correctement car le tableau de dépendances ne prend en compte que l’événement lié à l’ajout de la tâche.

Plongez dans l’univers fascinant de Next.js et devenez un expert en 2024 grâce à notre formation vidéo exclusive sur Alphorm : Formation Next.js

Appeler un fichier JSON avec useEffect en NextJS

Maintenant, approfondissons davantage cette compétence. Dans le quotidien d’un développeur, il est fréquent de manipuler des fichiers JSON ou d’autres sources de données. Ainsi, dans cette section, nous allons utiliser useEffect pour manipuler les données à partir d’un fichier JSON.

Pour commencer, nous allons configurer un fichier JSON pour notre application. Vous vous demandez peut-être où placer ce fichier ? Eh bien, c’est simple : créons-le dans le dossier public de notre projet sous le nom mesdonnees.json.

				
					{
"message":"Bienvenu sur ce fichier",
"auteur":"Elon Musk"
}
				
			

L’essentiel est simplement d’avoir des données dans un fichier JSON.

Maintenant, créons la fonction qui va appeler le fichier JSON. Pour ce faire, rendez-vous dans le fichier app/page.js.

				
					'use client'
import { useEffect, useState } from "react";
import styles from "./page.module.css";
export default function Home() {
const [datas,setDatas] = useState('');
let RecupJson=async()=>{
let result = await fetch('mesdonnes.json');
let dataJson = await result.json();
setDatas(dataJson);
}
useEffect(()=>{
RecupJson();
})
console.log(datas);
return (
<div className={styles.div}>
</div>
);
}
				
			

Nous avons épuré certaines lignes de code dans le fichier, en ne conservant que ce qui sera utile pour nous. Ensuite, nous avons mis en place la fonction appelée RecupJson, qui récupérera les données du fichier mesdonnees.json. De plus, nous avons déclaré le hook useEffect en NextJS pour gérer les événements sur la page, c’est-à-dire pour appeler la fonction RecupJson.

En lançant notre application, il nous donne comme ceci :

Code de la fonction RecupJson utilisant useEffect pour récupérer des données JSON en NextJS.

Si vous avez remarqué, l’affichage ne s’arrête pas, c’est comme une boucle infinie. C’est tout à fait normal car nous n’avons pas encore spécifié le tableau de dépendances dans le hook useEffect en NextJS. Corrigeons cela maintenant en ajoutant simplement le tableau de dépendances.

				
					useEffect(()=>{
RecupJson();
},[])
				
			

Et par la suite, notre données s’afficheront dans le console comme ceci :

Pour aller plus loin et maîtriser pleinement les compétences abordées dans cet article, nous vous invitons à découvrir les formations d’Alphorm. Formations Alphorm.

Mettre en place un loading dans une application NextJS

Parfois, nous allons manipuler une tonne des données, et par conséquent, ça prend un peu du temps le chargement de ces donnés et l’utilisateur doit attendre pet être il ne sait pas que le chargement est en cours , du coup il est important de mettre un indicateur comme quoi le chargement est en cours ( loanding….).

Donc, maintenant nous allons implémenté cela pour rendre notre application robuste.

Pour faire cela, on a besoin de déclarer un autre useState pour le loanding et mettre une condition ternaire pour aussi gerer le temps de chargement , voyons comment en faire maintenant.

Dans le fichier app/page .js

				
					'use client'
import { useEffect, useState } from "react";
import styles from "./page.module.css";
export default function Home() {
const [datas,setDatas] = useState('');
const [load,setLoad] = useState(true);
let RecupJson=async()=>{
let result = await fetch('mesdonnes.json');
let dataJson = await result.json();
setDatas(dataJson);
setLoad(false);
}
useEffect(()=>{
RecupJson();
},[])
console.log(datas);
return (
<div className={styles.div}>
{
load?
(<p>loading.....</p>)
:(datas.message)
}
</div>
);
}
Premièrement, on a cette ligne de code :
const [load,setLoad] = useState(true);
				
			

Au début, la variable load, qui est un getter, est initialement définie sur true. Cette valeur sera changée à false une fois que les données seront prêtes dans la fonction RecupJson. Ensuite, dans notre div, nous avons une condition ternaire.

				
					{
load?
(<p>loading.....</p>)
:(datas.message)
}
				
			

Pendant le chargement des données, le message « Loading » est affiché. Une fois que les données sont prêtes, la valeur de la clé message est affichée dans le div.

Conclusion

En conclusion, maîtriser le hook useEffect en NextJS est essentiel pour tout développeur souhaitant créer des applications réactives et performantes. Grâce aux exemples présentés, vous avez appris à gérer les dépendances, éviter les boucles infinies et intégrer des données JSON de manière efficace. En appliquant ces techniques, vous pouvez améliorer considérablement la gestion des effets secondaires dans vos projets. N’oubliez pas d’expérimenter et d’adapter ces pratiques à vos besoins spécifiques pour tirer le meilleur parti de useEffect en NextJS.

 

 
 
ÉTIQUETÉ : NextJS
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.