Hooks personalizados: extraer lógica reutilizable

Un Hook personalizado es una función que utiliza Hooks de React para reutilizar lógica. Su nombre empieza por use, seguido de mayúscula. No devuelve JSX necesariamente; puede devolver datos y funciones.

Crear el Hook #

Crea src/hooks/useCounter.ts:

1import { useState } from 'react';
2
3export function useCounter(initialValue = 0) {
4  const [count, setCount] = useState(initialValue);
5
6  function increment() {
7    setCount((prev) => prev + 1);
8  }
9
10  function decrement() {
11    setCount((prev) => prev - 1);
12  }
13
14  function reset() {
15    setCount(initialValue);
16  }
17
18  return { count, increment, decrement, reset };
19}

Los actualizadores funcionales calculan desde el estado anterior. reset vuelve al parámetro initialValue de la llamada actual al Hook; si ese parámetro cambia desde el padre, el estado no se reinicia hasta que lo solicites.

Utilizarlo #

En src/App.tsx:

1import { useCounter } from './hooks/useCounter';
2
3function Contador() {
4  const { count, increment, decrement, reset: resetear } = useCounter(0);
5
6  return (
7    <div>
8      <button onClick={increment}>Sube</button>
9      <button onClick={decrement}>Baja</button>
10      <button onClick={resetear}>Restablecer</button>
11      <p>{count}</p>
12    </div>
13  );
14}
15
16export default function Ejem_20() {
17  return <><Contador /><Contador /></>;
18}

reset: resetear cambia el nombre de la variable local al desestructurar. El objeto devuelto sigue teniendo una propiedad llamada reset.

Compartir lógica no es compartir estado #

Los dos contadores utilizan el mismo Hook, pero cada llamada crea su propio estado. Incrementar uno no cambia el otro. Para compartir un dato entre componentes necesitas subirlo a un padre o utilizar un mecanismo compartido, como el contexto que veremos después.

Las reglas siguen siendo las de cualquier Hook: llama a useCounter en el nivel superior de un componente o de otro Hook, nunca condicionalmente ni desde un evento.

Prueba tú #

Añade un parámetro step para incrementar y decrementar de dos en dos. Comprueba que ambos contadores siguen siendo independientes.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.