Introducción a los hooks de React

Actualizado en junio de 2026. Una aclaración importante: create-react-app quedó discontinuado. Hoy se arranca un proyecto con Vite o con un framework como Next.js. Más abajo sumé "React en 2026" con los hooks nuevos de React 19 (use, useActionState, useOptimistic) y el React Compiler. Los fundamentos de useState y useEffect siguen vigentes.

Introducción

Los hooks de React son una de las características más poderosas y útiles que se han introducido en las versiones más recientes de la biblioteca. Permiten a los desarrolladores usar el estado y otros aspectos de React sin escribir una clase. En este artículo, exploraremos los hooks más comunes, como useState y useEffect, y cómo pueden ayudarte a construir componentes más funcionales y eficientes.

¿Qué son los Hooks?

Los hooks son funciones que te permiten "enganchar" el estado y el ciclo de vida de React en componentes funcionales. Esta característica ha transformado la forma en que se construyen los componentes en React, facilitando la reutilización de la lógica del estado y mejorando la organización del código.

Instalación de React

Antes de comenzar a usar hooks, asegúrate de tener un proyecto de React configurado. Si aún no tienes uno, puedes crear una nueva aplicación utilizando create-react-app:

  
    # create-react-app está discontinuado. Hoy se usa Vite:
    npm create vite@latest mi-aplicacion -- --template react
    cd mi-aplicacion
    npm install
  

Uso de useState

El hook useState te permite añadir estado a tus componentes funcionales. Aquí tienes un ejemplo básico:

  
    import React, { useState } from 'react';

    const Contador = () => {
      const [count, setCount] = useState(0);

      return (
        <div>
          <p>Has hecho clic {count} veces</p>
          <button onClick={() => setCount(count + 1)}>
            Haz clic aquí
          </button>
        </div>
      );
    };

    export default Contador;
  

En este ejemplo, useState inicializa el estado count con 0. La función setCount se utiliza para actualizar el estado cuando el botón es clicado.

Uso de useEffect

El hook useEffect te permite realizar efectos secundarios en tus componentes, como llamadas a APIs o suscripciones. Aquí tienes un ejemplo:

  
    import React, { useState, useEffect } from 'react';

    const DatosDelAPI = () => {
      const [data, setData] = useState(null);

      useEffect(() => {
        fetch('https://api.example.com/datos')
          .then(response => response.json())
          .then(data => setData(data));
      }, []); // El array vacío significa que este efecto solo se ejecuta una vez

      return (
        <div>
          {data ? <p>{data}</p> : <p>Cargando...</p>}
        </div>
      );
    };

    export default DatosDelAPI;
  

En este caso, useEffect realiza una llamada a una API al montar el componente y actualiza el estado data con los datos obtenidos.

Reutilización de lógica con custom hooks

Los hooks personalizados son una forma de reutilizar lógica entre componentes. Puedes crear tu propio hook y usarlo en diferentes componentes. Aquí tienes un ejemplo:

  
    import { useState, useEffect } from 'react';

    const useFetch = (url) => {
      const [data, setData] = useState(null);
      const [loading, setLoading] = useState(true);

      useEffect(() => {
        const fetchData = async () => {
          const response = await fetch(url);
          const result = await response.json();
          setData(result);
          setLoading(false);
        };
        fetchData();
      }, [url]);

      return { data, loading };
    };

    export default useFetch;
  

Ahora puedes usar useFetch en cualquier componente para obtener datos de una API:

  
    import React from 'react';
    import useFetch from './useFetch';

    const ComponenteDatos = () => {
      const { data, loading } = useFetch('https://api.example.com/datos');

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

      return <p>{data}</p>;
    };

    export default ComponenteDatos;
  

React en 2026: qué cambió

Desde que se publicó esta guía, React llegó a la versión 19 e incorporó hooks pensados para el trabajo con datos asincrónicos y formularios:

• use(): permite "leer" una promesa o un contexto directamente dentro del render, simplificando la carga de datos.
• useActionState(): maneja el estado de un formulario y su acción de envío (incluyendo estados de carga y error) con muchísimo menos código.
• useOptimistic(): muestra al usuario el resultado esperado de inmediato (UI optimista) mientras la operación real termina en segundo plano.
• React Compiler: memoriza componentes automáticamente, reduciendo la necesidad de useMemo y useCallback manuales.

Si querés profundizar en los hooks que necesitás cuando tus componentes crecen, seguí con Dominando React Hooks avanzados.

Conclusión

Los hooks de React son una herramienta poderosa que permite manejar el estado y los efectos secundarios de manera más sencilla y efectiva. Con hooks como useState y useEffect, puedes escribir componentes funcionales más limpios y reutilizables. Además, la posibilidad de crear hooks personalizados abre un abanico de posibilidades para estructurar tu lógica de forma más modular.

A medida que te familiarices con los hooks, notarás que tu productividad y la calidad de tu código mejorarán significativamente. ¡Empieza a experimentar con los hooks y descubre todo lo que pueden hacer por ti!

Seguí aprendiendo

• Dominando React Hooks avanzados
• Mejorar el rendimiento en Next.js con imágenes optimizadas

¿Tenés una idea de app en React y querés llevarla a producción? Hablemos.