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 // Manejador de eventos para actualizar las dimensiones
11 const handleResize = () => {
12 setWindowSize({
13 width: window.innerWidth,
14 height: window.innerHeight,
15 });
16 };
17
18 // Agregar el escuchador de eventos
19 window.addEventListener('resize', handleResize);
20
21 // Función de limpieza: MUY IMPORTANTE
22 // Elimina el escuchador de eventos cuando el componente se desmonta
23 return () => {
24 window.removeEventListener('resize', handleResize);
25 };
26 }, []); // Array de dependencias vacío porque queremos el efecto solo al montar
27
28 return (
29 <div className="window-size">
30 <h2>Dimensiones de la ventana:</h2>
31 <p>Ancho: {windowSize.width}px</p>
32 <p>Alto: {windowSize.height}px</p>
33 </div>
34 );
35};
36
37// Otro ejemplo: Cronómetro con limpieza
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 // Iniciar el temporizador
47 intervalId = setInterval(() => {
48 setSeconds((prevSeconds) => prevSeconds + 1);
49 }, 1000);
50 }
51
52 // Función de limpieza
53 return () => {
54 if (intervalId) {
55 clearInterval(intervalId);
56 }
57 };
58 }, [isRunning]); // Se dispara solo cuando 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>Cronómetro</h2>
72 <p>Tiempo transcurrido: {seconds} segundos</p>
73 <button onClick={handleToggle}>{isRunning ? 'Pausa' : 'Iniciar'}</button>
74 <button onClick={handleReset}>Reiniciar</button>
75 </div>
76 );
77};
