Les développeurs Next.js rencontrent souvent des problèmes de gestion de dépendances avec le hook useEffect, ce qui peut entraîner des comportements inattendus et inefficaces dans leurs applications.
Une mauvaise gestion des dépendances ou des appels de données asynchrones peut créer des boucles infinies, ralentir le chargement, ou offrir une mauvaise expérience utilisateur.
Découvrez comment utiliser useEffect efficacement, gérer les appels de données JSON, et mettre en place des indicateurs de chargement pour optimiser les performances et l’expérience utilisateur dans vos applications Next.js.
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.
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é.
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.
Devenez expert en développement web dynamique avec NextJS et créez des applications performantes.
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.
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.
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 :
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 :
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.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
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.
