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

Хук useInterval

Напишіть хук useInterval(callback, delay), який викликає callback кожні delay мілісекунд, поки компонент змонтований.

Кожен виклик має використовувати останню версію callback з пропсів і стану, але нова функція на кожному рендері не повинна перезапускати інтервал. delay = null ставить інтервал на паузу. Після розмонтування викликів більше немає.

function useInterval(callback, delay) {
  // ...
}

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

Тести (5)

const f = fn();
renderHook(() => useInterval(f, 30));
await wait(110);
expect(f.calls.length >= 2 && f.calls.length <= 4).toBe(true);

const log = [];
const { rerender } = renderHook(({ n }) => useInterval(() => log.push(n), 30), { initialProps: { n: 1 } });
await wait(45);
rerender({ n: 2 });
await wait(50);
expect(log[0]).toBe(1);
expect(log[log.length - 1]).toBe(2);

const f = fn();
const { rerender } = renderHook(() => useInterval(() => f(), 40));
for (let i = 0; i < 6; i++) {
  await wait(15);
  rerender();
}
expect(f.calls.length >= 1).toBe(true);

const f = fn();
renderHook(() => useInterval(f, null));
await wait(60);
expect(f).toHaveBeenCalledTimes(0);

const f = fn();
const { unmount } = renderHook(() => useInterval(f, 20));
unmount();
await wait(60);
expect(f).toHaveBeenCalledTimes(0);