← Усі задачіReact · Middle

Хук useDebounce

Напишіть хук useDebounce(value, ms). Він повертає value, але із затримкою: нове значення з'являється лише тоді, коли value не змінювалося ms мілісекунд. Кожна зміна скидає відлік.

На першому рендері хук одразу повертає початкове значення. Після розмонтування відкладене оновлення не повинне спрацювати.

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

Ctrl+Enter - запустити тести. Tab - відступ; щоб вийти з редактора клавіатурою, натисніть Esc, а потім Tab. Код зберігається в цьому браузері.

Тести (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);