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 // Gestore eventi per aggiornare le dimensioni
11 const handleResize = () => {
12 setWindowSize({
13 width: window.innerWidth,
14 height: window.innerHeight,
15 });
16 };
17
18 // Aggiungere il listener
19 window.addEventListener('resize', handleResize);
20
21 // Funzione di pulizia: MOLTO IMPORTANTE
22 // Rimuove il listener quando il componente viene smontato
23 return () => {
24 window.removeEventListener('resize', handleResize);
25 };
26 }, []); // Array di dipendenze vuoto perché vogliamo l'effetto solo al montaggio
27
28 return (
29 <div className="window-size">
30 <h2>Dimensioni della finestra:</h2>
31 <p>Larghezza: {windowSize.width}px</p>
32 <p>Altezza: {windowSize.height}px</p>
33 </div>
34 );
35};
36
37// Altro esempio: Timer con pulizia
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 // Avviare il timer
47 intervalId = setInterval(() => {
48 setSeconds((prevSeconds) => prevSeconds + 1);
49 }, 1000);
50 }
51
52 // Funzione di pulizia
53 return () => {
54 if (intervalId) {
55 clearInterval(intervalId);
56 }
57 };
58 }, [isRunning]); // Si attiva solo quando isRunning cambia
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>Timer</h2>
72 <p>Tempo trascorso: {seconds} secondi</p>
73 <button onClick={handleToggle}>{isRunning ? 'Pausa' : 'Avvia'}</button>
74 <button onClick={handleReset}>Azzera</button>
75 </div>
76 );
77};
