@use-it/interval

A custom React Hook that provides a declarative setInterval called useInterval.

New version 1.0 has been completely rewritten in TypeScript!

This hook is an implementation of Dan Abramov's blog post "Making setInterval Declarative with React Hooks".

Installation

$ npm i @use-it/interval

or

$ yarn add @use-it/interval

Usage

Here is a basic setup.

useInterval(callback, delay);

Parameters

Here are the parameters that you can use.

Parameter	Description
`callback`	A function that will be called every `delay` milliseconds.
`delay`	A number representing the delay in msecs. Set to `null` to "pause" the interval.

Return

This hook returns nothing.

Example

Let's look at some sample code. Here is a Counter component that counts up every second.

import React, { useState } from 'react';
import useInterval from '@use-it/interval';

const Counter = ({ delay = 1000 }) => {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount((currentCount) => currentCount + 1);
  }, delay);

  return <h1>{count}</h1>;
};

export default Counter;