Réaliser un affichage en temps réel dans une application ReactJS, comme l’heure actuelle, peut être difficile sans une bonne maîtrise du hook useEffect.
Une mauvaise utilisation de useEffect peut causer des ralentissements ou des erreurs, compromettant la performance et l’expérience utilisateur.
Cet exercice useEffect ReactJS vous guide pas à pas pour afficher l’heure en temps réel avec un code optimisé et performant, en utilisant les meilleures pratiques du hook useEffect. Découvrez comment simplifier ce processus dans cet article.
Exercice pratique avec useEffect ReactJS
Après avoir exploré la théorie, nous allons maintenant passer à la pratique et aborder un nouvel exercice. Dans cette phase d’application des concepts récemment étudiés sur le hook useEffect Reactjs, nous allons travailler ensemble sur le développement d’un exercice visant à afficher l’heure actuelle en temps réel.
Notre but est d’afficher l’heure en temps réel, avec une mise à jour chaque seconde, et cela devient simple grâce à l’utilisation du hook useEffect Reactjs. Sans plus attendre, commençons à créer le composant : src/component/heure.js
export default function Heure(){
return(
<div>
<h3>Heure actuelle</h3>
<p>Heure:</p>
</div>
)
}
Importer le dans le fichier index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Heure from './component/heure';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Heure />
</React.StrictMode>
);
Vous démarrez l’application en exécutant la commande :
npm start
Une fois que tout est en ordre, vous obtenez ce résultat sur votre navigateur.
Par la suite , on va utiiser de props dans notre composant pour bien pratiquer les notions que nous avons appris précédemment .
Voyons la modification auniveau de notre composant Heure alors :
Src/component/heure.js
import {useState} from "react"
export default function Heure({children}){
//declaration de l'heure actuelle
let heureActuelle = new Date();
// Declaration d'un etat heure
const [heure,setHeure] = useState(heureActuelle)
return(
<div>
<h3>{children}</h3>
<p>{heure.toLocaleTimeString()}</p>
</div>
)
}
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
Importation du hook useState
import {useState} from "react"
Cette ligne importe le hook useState depuis la bibliothèque React. Le hook useState est utilisé pour déclarer un état local dans un composant fonctionnel.
Exercice UseEffect Reactjs : Définition du composant Heure
export default function Heure({children})
Le composant est défini comme une fonction React appelée Heure. Il prend un prop children en tant que paramètre, qui peut contenir des éléments enfants à afficher à l’intérieur du composant.
Exercice UseEffect Reactjs : Déclaration de l'heure actuelle
let heureActuelle = new Date();
Une instance de l’objet Date est créée pour représenter l’heure actuelle.
Déclaration d'un état avec le hook useState
const [heure,setHeure] = useState(heureActuelle) ;
Le hook useState est utilisé pour déclarer une variable d’état heure et une fonction setHeure qui permettra de mettre à jour cet état. La valeur initiale de l’état est définie comme étant l’heure actuelle.
Rendu JSX avec le hook UseEffect Reactjs
return(
<div>
<h3>{children}</h3>
<p>{heure.toLocaleTimeString()}</p>
</div>
)
Le composant retourne du JSX qui inclut un élément <div> contenant un titre <h3> (qui affiche le contenu des enfants) et un paragraphe <p> qui affiche l’heure actuelle sous forme de chaîne de caractères formatée en utilisant toLocaleTimeString().
Importer maintenant notre composant dans le fichier index.js pour l’appeler :
Index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import Heure from './component/heure';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Heure children='Heure actuelle'/>
</React.StrictMode>
);
Rendu du composant Heure dans la racine
root.render(
<React.StrictMode>
<Heure children='Heure actuelle'/>
</React.StrictMode>
);
Le composant Heure est rendu dans la racine préalablement créée, en transmettant une valeur de prop children au composant enfant.
Et en démarrant votre application :
npm start
Cela vous donne :
Ajouter un peu de styles pour la mise en page de notre page maintenant :
Src/styles/heure.css
div{
background-color:bisque;
padding: 25px;
border-radius:9px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
div p{
font-family: Georgia, 'Times New Roman', Times, serif;
color: brown;
}
Index.css
body {
background-color:chocolate;
height : 100vh;
display: flex;
margin: 0;
justify-content: center;
align-items: center;
}
En important ces fichiers dans le fichier respectifs :Index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import Heure from './component/heure';
import './styles/index.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Heure children='Heure actuelle'/>
</React.StrictMode>
);
Src/component/heure.js
import {useState} from "react"
import '../styles/heure.css'
export default function Heure({children}){
//declaration de l'heure actuelle
let heureActuelle = new Date();
// Declaration d'un etat heure
const [heure,setHeure] = useState(heureActuelle)
return(
<div>
<h3>{children}</h3>
<p>{heure.toLocaleTimeString()}</p>
</div>
)
}
Tout cela nous donne un résultat comme ceci :
Nous sommes sur le point d’atteindre notre objectif. La dernière étape consiste simplement à ajouter la fonctionnalité pour afficher l’heure en temps réel, c’est là que le hook useEffect Reactjs entre en jeu. Pour cela, examinons les modifications dans notre composant heure.js.
import {useEffect, useState} from "react"
import '../styles/heure.css'
export default function Heure({children}){
//declaration de l'heure actuelle
let heureActuelle = new Date();
// Declaration d'un etat heure
const [heure,setHeure] = useState(heureActuelle)
useEffect(()=>{
setInterval(()=>{
setHeure(new Date)
},[heure])
})
return(
<div>
<h3>{children}</h3>
<p>{heure.toLocaleTimeString()}</p>
</div>
)
}
Il y a l’extrait de code :
useEffect(()=>{
setInterval(()=>{
setHeure(new Date)
},[heure])
})
UseEffect : useEffect est un hook qui permet d’effectuer des effets de bord dans un composant fonctionnel React. Il est généralement utilisé pour gérer des opérations telles que des appels réseau, des abonnements à des événements, ou dans ce cas, des mises à jour périodiques.
setInterval : setInterval est une fonction JavaScript qui exécute une fonction à intervalles réguliers, définis en millisecondes.
Mise à jour de l’heure : À l’intérieur de la fonction passée à setInterval, setHeure(new Date()) est appelé. Cela met à jour l’état de l’heure avec une nouvelle instance de l’objet Date, représentant ainsi l’heure actuelle.
Exercice UseEffect Reactjs : Dépendance heure dans le tableau de dépendances de useEffect Reactjs
useEffect prend un tableau de dépendances en deuxième argument. Ici, [heure] est spécifié, ce qui signifie que l’effet (la fonction à l’intérieur de useEffect) ne sera réexécuté que si la valeur de heure change.
Démarrer votre application maintenant pour voir le résultat :
Npm start
Mission accomplie, notre tâche est achevée avec succès.
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, le hook useEffect en ReactJS est un outil puissant pour gérer les effets de bord dans les composants fonctionnels. Que vous débutiez ou que vous cherchiez à perfectionner vos compétences en ReactJS, savoir utiliser useEffect efficacement est crucial. Grâce aux exemples et exercices pratiques présentés, vous devriez maintenant être capable de gérer les effets de bord dans vos applications ReactJS. Continuez à explorer et à expérimenter pour maîtriser pleinement cette fonctionnalité essentielle de ReactJS avec les images ReactJS.
