setInterval in React Components Using Hooks

November 3, 2022

setInterval in React Components Using Hooks

The Window object in JS(JavaScript) allows us to perform code at specified intervals. It provides us with 2 keys methods — setTimeout and setInterval. In this article we are going to know about the setInterval method. Using setInterval inside React components allows us to execute a function() and / or some code at specific intervals. Let’s explore how to use setInterval in React component.

useEffect(() => {
  const interval = setInterval(() => {
    console.log('This will run every second!');
  }, 1000);
  return () => clearInterval(interval);
}, []);

The above code schedules a new interval to run each and every second inside of the useEffect Hook. This will schedule once the React components mounts for the first time. To accordingly clear the interval, we return clearInterval from the useEffect Hook, passing in the interval.

What is setInterval?

setInterval is a method that calls a function() or runs some code after particular intervals of time, as specified through the second parameter.

For example, the below code, schedules an interval to print the expression: “Welcome to I2 Tutorials” each and every second to the console until it is cleared.

setInterval(() => {
  console.log('Welcome to I2 Tutorials');
}, 1000);

Clearing setInterval in React

The function or block of code that is bound to an interval executes until it is stopped. To stop an interval, we can use the clearInterval() method.

For example, the below code , schedules a new interval when the React components mounts for the first time. After the React components unmounts the interval is cleared:

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

Take a look at the useEffect Hook. At the end of the Hook, we are returning a new function(). This is the similar of the componentWillUnmount react lifecycle method in a class-based React components. To know more about the differentiation between functional and class-based components check out this guide

The useEffect (Hook) function returns the clearInterval() method with the scheduled interval passed into it. As a result, the interval is correctly cleared and no extended triggers every second after the component unmounts from the DOM.

Above all, when we are using setInterval(), it is imperative that you clear the scheduled interval once the component unmounts.

Using setInterval in React Components

we are call the setInterval() method inside of a React components, like so:

import React, { useState, useEffect } from 'react';
const Interval = () => {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return (
    <div className="App">
      <header >
        {seconds} seconds
      </header>
    </div>
  );
};
export default Interval;