Introducción a React Hooks: useState y useEffect

Los React Hooks revolucionaron la forma en que escribimos componentes en React. En este artículo, exploraremos los dos hooks más fundamentales.

¿Qué son los Hooks?

Los Hooks son funciones especiales que te permiten "enganchar" características de React en componentes funcionales. Antes de los Hooks, necesitabas componentes de clase para manejar estado y ciclo de vida.

useState: Manejo de Estado

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Características clave:

• Devuelve un par: el valor actual y una función para actualizarlo
• El argumento inicial solo se usa en el primer renderizado
• Puedes tener múltiples useState en un componente

useEffect: Efectos Secundarios

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // Se ejecuta cuando userId cambia
  
  return <div>{user?.name}</div>;
}

Cuándo usar useEffect:

• Llamadas a APIs
• Suscripciones a eventos
• Manipulación del DOM
• Timers y temporizadores

Conclusión

Dominar useState y useEffect es esencial para cualquier desarrollador de React moderno. Estos hooks forman la base sobre la cual se construyen aplicaciones más complejas.