Introducción a los Hooks Personalizados en React

En el mundo de React, los hooks son una adición poderosa que permite a los desarrolladores utilizar el estado y otras características de React sin escribir una clase. Un hook personalizado es esencialmente una función que encapsula lógica reutilizable que puede involucrar el estado y efectos secundarios.

¿Qué es un Hook Personalizado?

Un hook personalizado es una función que comienza con “use” y que puede llamar a otros hooks de React. Es una forma elegante de reutilizar la lógica de componentes sin caer en la jerarquía de componentes.

Creando un Timeout con un Hook Personalizado

Imagina que quieres ejecutar una función después de un retraso específico. En JavaScript, normalmente usarías setTimeout. En React, puedes crear un hook personalizado para manejar esto de una manera que respete el ciclo de vida del componente.

Aquí tienes un ejemplo de cómo podrías implementar un hook personalizado para un timeout:

import { useEffect, useRef } from 'react';

function useTimeout(callback, delay) {
const savedCallback = useRef();

// Guardar la última referencia al callback
useEffect(() => {
savedCallback.current = callback;
}, [callback]);

// Establecer el timeout
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setTimeout(tick, delay);
return () => clearTimeout(id);
}
}, [delay]);
}

export default useTimeout;

Cómo Utilizar el Hook useTimeout

Para usar este hook en tu componente, simplemente importa useTimeout y pásale la función que quieres ejecutar y el retraso en milisegundos.

import React from 'react';
import useTimeout from './useTimeout';

function MyComponent() {
const doSomething = () => {
console.log('¡Hice algo después de un retraso!');
};

// Usar el hook con un retraso de 5000 milisegundos (5 segundos)
useTimeout(doSomething, 5000);

return 
Hola, ¡este mensaje se logueará en la consola después de 5 segundos!
;
}

export default MyComponent;

Conclusión

Los hooks personalizados ofrecen una forma modular y reutilizable de incorporar lógica de estado y efectos secundarios en tus componentes de React. Con useTimeout, puedes gestionar fácilmente los timeouts en tus componentes de una manera que es tanto limpia como conforme con el ciclo de vida de React.