← Alle AufgabenReact · Middle

Hook useDebounce

Schreib einen Hook useDebounce(value, ms). Er liefert value, aber verzögert: ein neuer Wert erscheint erst, wenn sich value ms Millisekunden lang nicht geändert hat. Jede Änderung startet den Countdown neu.

Beim ersten Render liefert der Hook sofort den Anfangswert. Nach dem Aushängen darf das ausstehende Update nicht mehr ausgeführt werden.

function useDebounce(value, ms) {
  // ...
}

Strg+Enter führt die Tests aus. Tab rückt ein; um den Editor per Tastatur zu verlassen, drücke Esc und dann Tab. Der Code wird in diesem Browser gespeichert.

Tests (4)

const { result } = renderHook(({ v }) => useDebounce(v, 50), { initialProps: { v: 'a' } });
expect(result.current).toBe('a');

const { result, rerender } = renderHook(({ v }) => useDebounce(v, 50), { initialProps: { v: 'a' } });
rerender({ v: 'ab' });
expect(result.current).toBe('a');
await wait(90);
expect(result.current).toBe('ab');

const { result, rerender } = renderHook(({ v }) => useDebounce(v, 60), { initialProps: { v: 'a' } });
rerender({ v: 'b' });
await wait(30);
rerender({ v: 'c' });
await wait(40);
expect(result.current).toBe('a');
await wait(60);
expect(result.current).toBe('c');

const { result, rerender, unmount } = renderHook(({ v }) => useDebounce(v, 30), { initialProps: { v: 1 } });
rerender({ v: 2 });
unmount();
await wait(60);
expect(result.current).toBe(1);