← Wszystkie zadaniaReact · Middle

Hook useDebounce

Napisz hook useDebounce(value, ms). Zwraca value, ale z opóźnieniem: nowa wartość pojawia się dopiero, gdy value nie zmieniało się przez ms milisekund. Każda zmiana zaczyna odliczanie od nowa.

Przy pierwszym renderze hook od razu zwraca wartość początkową. Po odmontowaniu oczekująca aktualizacja nie może się wykonać.

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

Ctrl+Enter uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (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);