Aprender React Hooks

En la versión React 19, los Hooks de React ofrecen una manera eficiente de gestionar estados y efectos en componentes funcionales. Los Hooks permiten usar características de React sin necesidad de escribir una clase. A continuación, exploraremos los Hooks más utilizados en React 19 y cómo implementarlos.

useState

El Hook useState permite añadir estado a componentes funcionales. Su sintaxis es la siguiente:

import React, { useState } from 'react';

function Contador() {
const [contador, setContador] = useState(0);

return (
  <div>
    <p>Has hecho clic {contador} veces</p>
    <button onClick={() => setContador(contador + 1)}>
    Incrementar
    </button>
  </div>
  );
}

En este ejemplo, useState devuelve un array con dos elementos: el estado actual (contador) y una función para actualizarlo (setContador).

useEffect

El Hook useEffect se utiliza para realizar efectos secundarios en componentes funcionales, como suscripciones o manipulaciones del DOM. Su sintaxis básica es:

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

function EjemploUseEffect() {
const [contador, setContador] = useState(0);

useEffect(() => {
  document.title = `Has hecho clic ${contador} veces`;
}, [contador]);

return (
  <div>
    <p>Has hecho clic {contador} veces</p>
    <button onClick={() => setContador(contador + 1)}>
    Incrementar
    </button>
  </div>
);
}

El segundo parámetro de useEffect es un array de dependencias. El efecto solo se ejecutará si alguna de las dependencias cambia.

useContext

El Hook useContext permite acceder al contexto de React en componentes funcionales. Su uso es el siguiente:

import React, { useContext } from 'react';

const TemaContexto = React.createContext('claro');

function ComponenteHijo() {
  const tema = useContext(TemaContexto);

  return <div style={{ background: tema === 'claro' ? '#fff' : '#000' }}>
  Tema actual: {tema}
  </div>;
}

function ComponentePadre() {
  return (
  <TemaContexto.Provider value="oscuro">
    <ComponenteHijo />
  </TemaContexto.Provider>
  );
}

useContext permite consumir el valor del contexto sin necesidad de un componente de orden superior.

useReducer

El Hook useReducer es una alternativa a useState para gestionar estados más complejos. Su sintaxis es:

import React, { useReducer } from 'react';

const estadoInicial = { contador: 0 };

function reductor(estado, accion) {
  switch (accion.tipo) {
    case 'incrementar':
      return { contador: estado.contador + 1 };
    case 'decrementar':
      return { contador: estado.contador - 1 };
    default:
      throw new Error();
  }
}

function ContadorConUseReducer() {
  const [estado, dispatch] = useReducer(reductor, estadoInicial);

  return (
  <div>
  <p>Contador: {estado.contador}</p>
  <button onClick={() => dispatch({ tipo: 'incrementar' })}>Incrementar</button>
  <button onClick={() => dispatch({ tipo: 'decrementar' })}>Decrementar</button>
  </div>
  );
}

useReducer devuelve el estado actual y una función dispatch para enviar acciones al reductor.

useRef

El Hook useRef permite crear referencias mutables que persisten durante todo el ciclo de vida del componente. Se utiliza así:

import React, { useRef } from 'react';

  function EnfocarInput() {
    const inputEl = useRef(null);

    const enfocar = () => {
    inputEl.current.focus();
    };

    return (
      <div>
        <input ref={inputEl} type="text" />
        <button onClick={enfocar}>Enfocar Input</button>
      </div>
    );
}

useRef es útil para acceder y manipular elementos del DOM directamente.

Estos son algunos de los Hooks más comunes en React 19. Su correcta aplicación permite una gestión más eficiente y clara de componentes funcionales.