Hook propio: useDebounce

hooksmedia

20:00empieza al escribir

Guía

Modo del reto

# Progreso de los requisitos

sin ejecutardevuelve el valor inicial al instante
sin ejecutarno actualiza el valor antes de que pase el retardo
sin ejecutaractualiza el valor cuando pasa el retardo

# Casos borde

Se muestran cuando ejecutas los tests. Hasta entonces aparecen como un requisito oculto.

ocultoRequisito oculto
ocultoRequisito oculto
ocultoRequisito oculto
ocultoRequisito oculto
ocultoRequisito oculto

# Enunciado

Objetivo

Crea el hook useDebounce(value, delay), que retrasa un valor hasta que deja de cambiar. Practicas los efectos con useEffect y su función de limpieza.

Lo que ya tienes

Un esqueleto del hook, como exportación con nombre, y una demo con un campo que lo usa.
Tu trabajo es la lógica: devolver el valor retrasado con un estado y un temporizador.
Conserva el nombre useDebounce y la exportación: los tests prueban el hook a través de un componente de test.

Requisitos

En el primer renderizado devuelve al instante el valor recibido.
Cuando value cambia, el valor devuelto sigue siendo el anterior hasta que pasan delay milisegundos.
Pasado el delay, el hook devuelve el valor nuevo.

Ejemplo

Renderizas con "a" → el hook devuelve "a" al instante.
Cambias a "b" con un delay de 500 → durante 500 ms sigue devolviendo "a".
Pasan los 500 ms → devuelve "b".

Pistas

Pista 1

Guarda el valor retrasado en useState, con el valor inicial como punto de partida.

Pista 2

Un useEffect que dependa de value y delay puede programar un setTimeout.

Pista 3

La función que devuelve el efecto es el lugar para llamar a clearTimeout.

Conceptos

Hooks propios.
useEffect con dependencias.
La limpieza del efecto (clearTimeout).

App.jsx

Vista previa

La consola está vacía

Ejecuta tu código con Ctrl+S

Esta consola empieza de cero cada vez que se carga la vista previa. La consola de DevTools del navegador conserva los mensajes con Preserve log.