From ab1f199a45cd78c6c3ee81feb205192c7758aaa5 Mon Sep 17 00:00:00 2001
From: Ayxa Chaverra <achaverrar@gmail.com>
Date: Sat, 4 Feb 2023 21:24:52 -0500
Subject: [PATCH] =?UTF-8?q?a=C3=B1ado=20correcciones=20a=20la=20soluci?=
 =?UTF-8?q?=C3=B3n=20propuesta=20y=20explicaciones=20de=20por=20qu=C3=A9?=
 =?UTF-8?q?=20son=20necesarias?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ReactJS/Sesion 6/src/Components/Clock.jsx | 49 +++++++++++++++++++----
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/ReactJS/Sesion 6/src/Components/Clock.jsx b/ReactJS/Sesion 6/src/Components/Clock.jsx
index 038a894..1fa8fea 100644
--- a/ReactJS/Sesion 6/src/Components/Clock.jsx	
+++ b/ReactJS/Sesion 6/src/Components/Clock.jsx	
@@ -10,22 +10,55 @@ const Clock = () => {
 
   const [user, setUser] = useState(defaultState);
 
+  // Si no se añade el array vacío como dependencia,
+  // el código se ejecuta cada que el componete se
+  // renderiza (lo que equivale al componentDidUpdate(),
+  // en lugar del componentDidMount() del componente
+  // de clase).
+  // Verifíquelo descomentanto los console.log(),
+  // y añadiendo los correspondientes en los métodos
+  // componentDidMount() y componentWillUnmount() del
+  // componente de clase
   useEffect(() => {
     const intervalAge = setInterval(() => {
       actualiceUser();
     }, 1000);
+    //console.log("Mounting");
     return () => {
+      //console.log("Unmounting");
       clearInterval(intervalAge);
     };
-  });
+  }, []);
 
   const actualiceUser = () => {
-    return setUser({
-      fecha: user.fecha,
-      edad: user.edad + 1,
-      nombre: user.nombre,
-      apellidos: user.apellidos,
-    });
+    // Se debe usar prevUser en este caso porque el código
+    // en el useEffect solo se va a ejecutar una vez (tras montar
+    // el componente), así que el setInterval() queda configurado
+    // y siempre se ejecuta con los datos que había en user en
+    // ese momento.
+    // En particular, user.edad = 0, y cada vez que corre el código
+    // del setInterval() user.edad = 0. Por lo que cada vez que se
+    // re-renderiza el componente, la edad en pantalla se actualiza a 1.
+    // Si usamos prevUser, setUser puede leer el valor de user en el
+    // contexto global (actual).
+    // Más info en: https://stackoverflow.com/a/59274004/14862122
+    return setUser((prevUser) => ({
+      // Es necesario crear una nueva fecha, new Date(),
+      // para que la hora se actualice cada segundo
+      fecha: new Date(),
+      edad: prevUser.edad + 1,
+      nombre: prevUser.nombre,
+      apellidos: prevUser.apellidos,
+    }));
+    // Una solución más compacta sería:
+    /* 
+    return setUser(prevUser=>({
+        ...prevUser,
+        fecha: new Date(),
+        edad: prevUser.edad + 1,
+      })
+    );
+    */
   };
   return (
     <div>
@@ -41,4 +74,4 @@ const Clock = () => {
   );
 };
 
-export default Clock;
+export default Clock;
\ No newline at end of file