A custom React Hook that provides a declarative useInterval.

Usage no npm install needed!

<script type="module">
  import useItInterval from 'https://cdn.skypack.dev/@use-it/interval';



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

New version 1.0 has been completely rewritten in TypeScript!

npm version All Contributors

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


$ npm i @use-it/interval


$ yarn add @use-it/interval


Here is a basic setup.

useInterval(callback, delay);


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.


This hook returns nothing.


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;

Live demo

You can view/edit the sample code above on CodeSandbox.

Edit demo app on CodeSandbox


MIT Licensed


Thanks goes to these wonderful people (emoji key):

Donavon West

💻 🚇 ⚠️ 💡 🚧 👀 🔧

Dan Abramov

💻 📝 🤔

Michael Sync


lin onetwo

💻 🐛

Daniel Lauzon


This project follows the all-contributors specification. Contributions of any kind welcome!