10-Tabla Comparativa: useState vs useEffect

1. useState Hook: Explicación Detallada

Qué hace:

• Permite añadir estado local a componentes funcionales.

• Cada vez que el estado cambia, el componente se re-renderiza.

Ejemplos Prácticos:

Ejemplo 1: Contador Básico

jsx

Copy

Download

import { useState } from 'react';

function Contador() {
  const [count, setCount] = useState(0); // Valor inicial: 0

  return (
    <div>
      <p>Has clickeado {count} veces</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

Ejemplo 2: Formulario Controlado

jsx

Copy

Download

function Formulario() {
  const [nombre, setNombre] = useState('');

  return (
    <form>
      <input 
        type="text" 
        value={nombre} 
        onChange={(e) => setNombre(e.target.value)} 
      />
      <p>Hola, {nombre || 'Anónimo'}</p>
    </form>
  );
}

Ejemplo 3: Estado con Objeto

jsx

Copy

Download

function Usuario() {
  const [user, setUser] = useState({ nombre: '', edad: 0 });

  const actualizarNombre = () => {
    setUser({ ...user, nombre: 'Ana' }); // Copia el estado anterior y actualiza solo 'nombre'
  };

  return (
    <div>
      <p>Nombre: {user.nombre}</p>
      <button onClick={actualizarNombre}>Cambiar Nombre</button>
    </div>
  );
}

---

🎯 2. useEffect Hook: Explicación Detallada

Qué hace:

• Maneja efectos secundarios en componentes funcionales.

• Se ejecuta después de cada renderizado (a menos que se especifiquen dependencias).

Ejemplos Prácticos:

Ejemplo 1: Llamada a API (fetch)

jsx

Copy

Download

import { useState, useEffect } from 'react';

function ListaPosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []); // Array vacío: se ejecuta solo una vez (como componentDidMount)
  
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

Ejemplo 2: Escuchar Eventos del Navegador

jsx

Copy

Download

function MouseTracker() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove); // Cleanup (como componentWillUnmount)
    };
  }, []); // Sin dependencias: setup/cleanup solo una vez

  return <p>Posición: {position.x}, {position.y}</p>;
}

Ejemplo 3: Ejecutar Efecto cuando Cambia una Dependencia

jsx

Copy

Download

function ContadorConEfecto() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Has clickeado ${count} veces`; // Actualiza el título de la página
  }, [count]); // Se ejecuta cada vez que `count` cambia

  return <button onClick={() => setCount(count + 1)}>Clickeado {count} veces</button>;
}

---

💡 Buenas Prácticas Combinadas

jsx

Copy

Download

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Cargando...</p>;

  return <div>{data && <p>Datos: {JSON.stringify(data)}</p>}</div>;
}

---

❓ Preguntas Frecuentes

1. ¿Cuándo usar useState vs useEffect?

   • Usa useState para almacenar datos que cambian.

   • Usa useEffect para acciones que deben ocurrir después del renderizado (como llamadas a APIs).

2. ¿Qué es el "cleanup" en useEffect?

   • Es una función que se retorna dentro de useEffect para limpiar suscripciones o eventos antes de que el componente se desmonte.

3. ¿Por qué el array de dependencias es importante?

• Controla cuándo se re-ejecuta el efecto. Si está vacío ([]), solo se ejecuta una vez al montar el componente.

Concepto	useState	useEffect
Propósito	Gestionar estado interno en componentes funcionales.	Manejar efectos secundarios (side effects) como llamadas API, suscripciones, etc.
Sintaxis Básica	const [state, setState] = useState(valorInicial);	useEffect(() => { ... }, [dependencias]);
Valor de Retorno	Array con el valor actual y una función para actualizarlo.	No retorna valores (sino que ejecuta efectos).
Trigger	Se ejecuta cuando setState actualiza el valor.	Se ejecuta después del renderizado, dependiendo de las dependencias.
Dependencias	No aplica.	Si el array de dependencias está vacío [], se ejecuta solo una vez. Si tiene variables, se ejecuta cuando estas cambian.
Uso Común	Almacenar datos que cambian (formularios, contadores, etc.).	Llamadas a APIs, escuchar eventos, manipular el DOM directamente.