Dominando React Hooks Avanzados: Lleva tus Componentes al Siguiente Nivel

Actualizado en junio de 2026. Con la llegada de React 19 y el React Compiler, la memorización manual con useMemo y useCallback es cada vez menos necesaria. Agregué al final una sección sobre cómo cambia el uso de estos hooks hoy. Entenderlos sigue siendo clave para diagnosticar rendimiento y leer código existente.

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 hooks avanzados como useContext, useReducer, useMemo y useCallback, y cómo pueden ayudarte a construir componentes más funcionales y eficientes.

¿Qué son los Hooks Avanzados?

Los hooks avanzados son funciones que extienden las capacidades de los hooks básicos, permitiendo una gestión más sofisticada del estado y del rendimiento en componentes funcionales. Estos hooks son esenciales para optimizar aplicaciones React complejas y mejorar la organización del código.

Uso de useContext

El hook useContext te permite acceder al Context API de React, facilitando la compartición de datos entre componentes sin necesidad de pasar props manualmente.

  
    import React, { createContext, useContext, useState } from 'react';

    const TemaContext = createContext();

    export function ProveedorTema({ children }) {
      const [tema, setTema] = useState('claro');

      const cambiarTema = () => {
        setTema(tema === 'claro' ? 'oscuro' : 'claro');
      };

      return (
        <TemaContext.Provider value={{ tema, cambiarTema }}>
          {children}
        </TemaContext.Provider>
      );
    }

    export function useTema() {
      return useContext(TemaContext);
    }
  

Y luego utilizarlo de esta forma:

  
    import React from 'react';
    import { ProveedorTema, useTema } from './TemaContext';

    function ComponenteTema() {
      const { tema, cambiarTema } = useTema();

      return (
        <div style={{ backgroundColor: tema === 'claro' ? '#fff' : '#333', color: tema === 'claro' ? '#000' : '#fff' }}>
          <p>Tema actual: {tema}</p>
          <button onClick={cambiarTema}>Cambiar tema</button>
        </div>
      );
    }

    function App() {
      return (
        <ProveedorTema>
          <ComponenteTema />
        </ProveedorTema>
      );
    }

    export default App;
  

Uso de useReducer

El hook useReducer es útil para gestionar estados complejos en componentes funcionales. Permite manejar el estado de forma más predecible y organizada.

  
    import React, { useReducer } from 'react';

    const initialState = { count: 0 };

    function reducer(state, action) {
      switch (action.type) {
        case 'increment':
          return { count: state.count + 1 };
        case 'decrement':
          return { count: state.count - 1 };
        default:
          throw new Error();
      }
    }

    function Contador() {
      const [state, dispatch] = useReducer(reducer, initialState);

      return (
        <div>
          <p>Contador: {state.count}</p>
          <button onClick={() => dispatch({ type: 'increment' })}>Incrementar</button>
          <button onClick={() => dispatch({ type: 'decrement' })}>Decrementar</button>
        </div>
      );
    }

    export default Contador;
  

Uso de useMemo

El hook useMemo memoriza el resultado de una función, evitando recalcular valores costosos en cada renderizado. Esto mejora el rendimiento de componentes que realizan cálculos complejos.

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

    function CalculoComplejo({ valor }) {
      const resultado = useMemo(() => {
        let sum = 0;
        for (let i = 0; i < valor; i++) {
          sum += i;
        }
        return sum;
      }, [valor]);

      return <p>Resultado: {resultado}</p>;
    }

    function App() {
      const [numero, setNumero] = useState(10);

      return (
        <div>
          <input type="number" value={numero} onChange={(e) => setNumero(parseInt(e.target.value))}/>
          <CalculoComplejo valor={numero} />
        </div>
      );
    }

    export default App;
  

Uso de useCallback

El hook useCallback memoriza funciones, evitando recrearlas en cada renderizado. Esto es útil para optimizar componentes que pasan funciones como props a componentes hijos.

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

    function Boton({ onClick, children }) {
      return <button onClick={onClick}>{children}</button>;
    }

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

      const incrementar = useCallback(() => {
        setCount(count + 1);
      }, [count]);

      return (
        <div>
          <p>Contador: {count}</p>
          <Boton onClick={incrementar}>Incrementar</Boton>
        </div>
      );
    }

    export default App;
  

Estos hooks en la era del React Compiler (2026)

React 19 trajo un cambio importante en cómo pensamos la optimización. Esto es lo que conviene tener presente hoy:

• El React Compiler memoriza por vos: en muchos casos ya no necesitás envolver valores en useMemo ni funciones en useCallback manualmente; el compilador lo hace automáticamente. Aun así, entender qué hacen te ayuda a leer código existente y a diagnosticar problemas.
• useContext evoluciona: el nuevo hook use() permite leer un contexto (y hasta condicionalmente), volviendo el patrón más flexible.
• useReducer sigue vigente: para estado complejo o máquinas de estado, sigue siendo la mejor herramienta nativa y se combina muy bien con useContext.
• Regla práctica: primero hacé que funcione y sea legible; optimizá con memorización solo cuando midas un problema real de rendimiento.

Conclusión

Los hooks avanzados de React, como useContext, useReducer, useMemo y useCallback, son herramientas poderosas que permiten manejar el estado y el rendimiento de manera más efectiva. Con estos hooks, puedes escribir componentes funcionales más limpios, eficientes y reutilizables. ¡Empieza a experimentar con ellos y lleva tus aplicaciones React al siguiente nivel!

Seguí aprendiendo

• Introducción a los hooks de React
• Mejorar el rendimiento en Next.js con imágenes optimizadas

¿Tu app React necesita una optimización o una mano con la arquitectura? Hablemos.