Custom Hooks en React (hooks personalizados)

Los Custom Hooks son una nueva incorporación en React 16.8. Te permiten usar estado y otras características (por ejemplo, la lógica) sin tener que escribir una clase.

Vamos a ver como se usa con el típico ejemplo del clásico contador, donde podemos sumar o restar números de una cuenta que le pasamos por parámetro.

Primero voy a presentar el custom hook, tal como quedaría, para luego explicar cada concepto y su aplicación en un componente:

import { useState } from "react";

function useCounter(intialeCount) {
  const [count, setCount] = useState(intialeCount);

  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const handleDecrement = () => {
    setCount((prevCount) => Math.max(0, prevCount - 1));
  };

  return { count, handleIncrement, handleDecrement };
}

export { useCounter };

Por un lado nos generamos una variable de estado (count) que almacenará el valor del contador. Y por otro lado definimos dos acciones en constantes que se encargarán de incrementar (handleIncrement) o decrementar (handleDecrement) el contador.

Bien, con esto ya tenemos nuestro custom hook que manejará el estado y la lógica que el componente presentacional necesitará.

Su uso sería así de sencillo en un componente:

import { useCounter } from "./useCounter";

export default function App() {
  const { count, handleIncrement, handleDecrement } = useCounter(0);

  return (
    <>
      <h1>{count}</h1>
      <button onClick={handleIncrement}>Sumar +1</button>
      <button onClick={handleDecrement}>Restar -1</button>
    </>
  );
}

Importamos el custom hook (useCounter) y destructuramos los parámetros/funciones que nos interesan, en este caso el estado del contador (count) y las dos funciones para cambiar el estado del mismo (handleIncrement y handleDecrement).

Como verás, separar la lógica y el estado del componente encargado de presentar la información, no es complicado.

Cosas a tener en cuenta de los Custom Hooks

• Por convención, los Custom Hooks empiezan por use, por ejemplo, useCounter.
• Dos componentes usando el mismo Hook NO comparten estado. Los Custom Hooks son un mecanismo para reutilizar lógica de estado, pero cada vez que usas uno todo estado y efecto dentro de este son aislados completamente.

Tienes mucha más información sobre los hooks personalizados en la página oficial de React.

Puedes ver el ejemplo en este codesandbox.

Y esto es todo. Espero que te pueda servir 🙃