10-29. useEffect

Entendiendo useEffect en React

🔹 Miniatura de la clase
🎥 [0:00 / 9:32]

🔄 Practicando con el State y los Likes

Antes de avanzar, vamos a repasar cómo manejar el estado (state) en React con un ejemplo práctico de un contador de likes:

jsx

const [likes, setLikes] = useState(0);

const darLike = () => {
  setLikes(likes + 1); // Incrementamos el contador
};

return (
  <div>
    <h1>Likes: {likes}</h1>
    <button onClick={darLike}>Dar Like</button>
  </div>
);

✅ ¿Qué ocurre?

• Solo el componente que contiene el estado se actualiza (no toda la página).

• React optimiza los renders gracias al Virtual DOM.

---

🛠️ React Developer Tools

Para una mejor experiencia de desarrollo, instala la extensión oficial:
🔗 React Developer Tools (Chrome)

🔍 ¿Qué nos permite?

• Ver componentes en tiempo real.

• Inspeccionar estados (states) y props.

• Depurar eficientemente.

https://miro.medium.com/max/1200/1*QZ9BR-JqromUiyx1s2D5MQ.png

---

⚡ Introducción a useEffect

useEffect es un hook que nos permite ejecutar efectos secundarios en componentes funcionales.

📌 Sintaxis básica:

jsx

useEffect(() => {
  // Código a ejecutar
}, [dependencias]); // ← Array de dependencias

🔥 Casos de uso comunes:

1. Actualizar el DOM (ej: contador de carrito de compras).

2. Consumir APIs (fetch de datos al montar el componente).

3. Suscribirse a eventos (scroll, teclado, etc.).

⚠️ ¡Cuidado con los bucles infinitos!

Si omites el array de dependencias, el efecto se ejecutará en cada render:

jsx

useEffect(() => {
  darLike(); // ¡Se ejecutará infinitamente!
}); // ← Sin array de dependencias

🎯 Ejemplo práctico:

jsx

useEffect(() => {
  console.log("El componente se montó o 'likes' cambió");
}, [likes]); // Se ejecuta solo si 'likes' cambia

---

💡 ¿Por qué es útil?

• Optimización: Evita renders innecesarios.

• Modularidad: Separa la lógica de efectos del renderizado.

• Control: Decide cuándo y cómo se ejecuta el código.

---

📢 ¿Quieres profundizar? ¡Dale like y comenta qué otros hooks te interesan!