Separar la lógica de un componente en una función reutilizable es una de las ventajas más poderosas que ofrecen los React Hooks. Al construir un custom hook, puedes extraer el manejo de estado y los efectos secundarios de cualquier componente, y llevar esa lógica a un archivo independiente que funcione en cualquier parte de tu aplicación.
¿Qué es un custom hook y por qué crearlo?
Un custom hook es simplemente una función de JavaScript que utiliza internamente hooks nativos de React como useState y useEffect. La convención indica que su nombre debe comenzar con la palabra Use, por ejemplo UseInitialState [0:42]. Esto permite que React lo identifique correctamente como un hook y que otros desarrolladores reconozcan su propósito de inmediato.
La motivación principal es separar la lógica del componente. En lugar de tener el llamado a una API, el manejo del estado y el ciclo de vida dentro de un contenedor como App, todo eso se mueve a una función independiente que se puede invocar desde cualquier componente donde se necesite [0:15].
¿Cómo se estructura la carpeta y el archivo?
El primer paso es crear una carpeta llamada Hooks dentro del proyecto [0:32]. Ahí se almacenarán todos los custom hooks que la aplicación requiera. Dentro de esa carpeta se crea un archivo llamado UseInitialState.js. Al no manejar JSX, la extensión .js es suficiente; no es necesario usar .jsx [0:55].
¿Qué se importa y qué se exporta?
Dentro del archivo se importan los hooks necesarios directamente desde React:
javascript
import { useState, useEffect } from 'react';
Luego se define la función con una arrow function y se traslada toda la lógica que antes vivía en el componente App [1:15]:
javascript
const UseInitialState = (API) => {
const [videos, setVideos] = useState([]);
useEffect(() => {
fetch(API)
.then(response => response.json())
.then(data => setVideos(data));
}, []);
return videos;
};
export default UseInitialState;
El return devuelve el estado videos para que cualquier componente que consuma este hook reciba los datos listos [1:30]. El export default permite importarlo desde cualquier lugar del proyecto [1:40].
¿Cómo se vuelve agnóstico el custom hook?
Un detalle clave es que la URL de la API no se escribe directamente dentro del hook. En su lugar, se recibe como parámetro [1:50]. Esto convierte al hook en una pieza agnóstica: no depende de una API específica y puede reutilizarse con cualquier endpoint que se le pase.
¿Cómo se consume el custom hook en un componente?
Dentro del componente App, se importa el hook y se define una constante con la URL de la API [2:10]:
javascript
import UseInitialState from '../Hooks/UseInitialState';
const API = 'http://localhost:3000/initialstate';
Después se invoca el hook pasándole la constante API como argumento, y el resultado se almacena en una variable llamada initialState [2:30]:
javascript
const initialState = UseInitialState(API);
A partir de ese momento, todas las referencias que antes apuntaban a videos deben actualizarse a initialState. Esto aplica en cada lugar donde se pasen los datos como props a los componentes hijos [2:45].
¿Qué ventajas concretas se obtienen?
- Reutilización: la misma lógica sirve para distintos componentes sin duplicar código.
- Separación de responsabilidades: el componente se enfoca en la interfaz y el hook en la lógica de datos.
- Flexibilidad: al recibir la API como parámetro, el hook funciona con cualquier fuente de datos.
- Legibilidad: el código del componente queda más limpio y fácil de mantener.
Como siguiente paso, el reto propuesto es actualizar los componentes de listas y originales, creando un map independiente para cada uno de ellos y aprovechando el estado que ahora proviene del custom hook [3:05]. ¿Ya lograste implementar tu propio hook? Comparte tu experiencia en los comentarios.
