1import { useState, useEffect } from 'react';
2
3const WindowResizeTracker = () => {
4 const [windowSize, setWindowSize] = useState({
5 width: window.innerWidth,
6 height: window.innerHeight,
7 });
8
9 useEffect(() => {
10 // Gestionnaire d'événement pour mettre à jour les dimensions
11 const handleResize = () => {
12 setWindowSize({
13 width: window.innerWidth,
14 height: window.innerHeight,
15 });
16 };
17
18 // Ajouter l'écouteur d'événement
19 window.addEventListener('resize', handleResize);
20
21 // Fonction de nettoyage : TRÈS IMPORTANT
22 // Supprime l'écouteur d'événement quand le composant est démonté
23 return () => {
24 window.removeEventListener('resize', handleResize);
25 };
26 }, []); // Tableau de dépendances vide car on veut l'effet uniquement au montage
27
28 return (
29 <div className="window-size">
30 <h2>Dimensions de la fenêtre :</h2>
31 <p>Largeur : {windowSize.width}px</p>
32 <p>Hauteur : {windowSize.height}px</p>
33 </div>
34 );
35};
36
37// Autre exemple : Chronomètre avec nettoyage
38const Timer = () => {
39 const [seconds, setSeconds] = useState(0);
40 const [isRunning, setIsRunning] = useState(false);
41
42 useEffect(() => {
43 let intervalId;
44
45 if (isRunning) {
46 // Démarrer le timer
47 intervalId = setInterval(() => {
48 setSeconds((prevSeconds) => prevSeconds + 1);
49 }, 1000);
50 }
51
52 // Fonction de nettoyage
53 return () => {
54 if (intervalId) {
55 clearInterval(intervalId);
56 }
57 };
58 }, [isRunning]); // Se déclenche uniquement quand isRunning change
59
60 const handleToggle = () => {
61 setIsRunning((prev) => !prev);
62 };
63
64 const handleReset = () => {
65 setIsRunning(false);
66 setSeconds(0);
67 };
68
69 return (
70 <div className="timer">
71 <h2>Chronomètre</h2>
72 <p>Temps écoulé : {seconds} secondes</p>
73 <button onClick={handleToggle}>{isRunning ? 'Pause' : 'Démarrer'}</button>
74 <button onClick={handleReset}>Réinitialiser</button>
75 </div>
76 );
77};
