Desafío de Codificación 10: crear un hook useTimeout sencillo que utilice setTimeout(callback, delay) y que reinicie el temporizador solo cuando cambie delay pero no cuando cambie callback.
Resumen del objetivo: queremos un hook que siempre invoque la versión más reciente de callback cuando el timeout se dispare, pero que no reinicie el contador si solo cambia la referencia de la función callback. En cambio, si cambia delay queremos cancelar el timeout anterior y crear uno nuevo. Si delay es null o undefined no debe arrancar ningún temporizador.
Paso 1 almacenar la última versión de callback en un ref para evitar que los cambios de referencia reinicien el temporizador: const savedCallback = useRef(callback); useEffect(() => { savedCallback.current = callback; }, [callback]);
Paso 2 manejar el delay con un useEffect que observe delay. Si delay es nulo o undefined no hace nada. Si tiene valor crea un setTimeout que al expirar llama a savedCallback.current. Además devuelve una función de limpieza que borre el timeout anterior cuando cambie delay o cuando el componente se desmonte: useEffect(() => { if (delay == null) return; const id = setTimeout(() => { savedCallback.current(); }, delay); return () => clearTimeout(id); }, [delay]);
Ejemplo final simplificado del hook y uso en un componente App: import React, { useEffect, useRef, useState } from 'react'; export function useTimeout(callback, delay) { const savedCallback = useRef(callback); useEffect(() => { savedCallback.current = callback; }, [callback]); useEffect(() => { if (delay == null) return; const id = setTimeout(() => { savedCallback.current(); }, delay); return () => clearTimeout(id); }, [delay]); } // Uso en App: export function App() { const [count, setCount] = useState(0); const [delay, setDelay] = useState(3000); useTimeout(() => { console.log('Timeout fired:', count); setCount(c => c + 1); }, delay); return <div><p>{count}</p><button onClick={() => setDelay(1000)}>Set delay to 1s</button><button onClick={() => setDelay(3000)}>Set delay to 3s</button></div>; }
Notas prácticas:
1. Guardar callback en un ref evita reinicios innecesarios del temporizador cuando la función cambia por re-renderings.
2. El useEffect que depende de delay es el que controla la creación y limpieza del timeout, por eso solo este efecto escucha delay en su array de dependencias.
3. Si quieres pausar el timeout pasa delay como null o undefined.
Sobre Q2BSTUDIO: en Q2BSTUDIO somos expertos en desarrollo de software y aplicaciones a medida, ofreciendo soluciones en software a medida, aplicaciones a medida, inteligencia artificial y ciberseguridad. Desarrollamos productos robustos y escalables, desde agentes IA y soluciones de ia para empresas hasta integraciones con servicios cloud aws y azure y plataformas de inteligencia de negocio como power bi. Si tu proyecto requiere una solución personalizada para web, móvil o backend visita nuestros servicios de desarrollo de aplicaciones y software a medida y para soluciones de inteligencia artificial explora nuestra oferta de inteligencia artificial para empresas.
Palabras clave integradas naturalmente en el texto para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.
Si necesitas soporte práctico para implementar este hook en tu código base o quieres que adaptemos la lógica a arquitecturas serverless, microservicios o integraciones con pipelines de datos y BI contacta a Q2BSTUDIO para recibir una propuesta a medida.
