How to use React setInterval() method

What is setInterval()?

In React development, the setInterval() method serves as a dynamic mechanism to execute a specified function at regular intervals, offering a versatile solution for various scenarios. This capability is invaluable for orchestrating periodic updates, crafting animations demanding continuous refreshes, or even fetching data at consistent intervals to maintain real-time relevance. Mastering the effective utilization of setInterval() can significantly elevate the dynamic behavior of React applications, providing developers with a powerful tool to introduce seamless and timely interactions within their user interfaces.

Syntax and parameters

The setInterval() function takes two arguments: a callback function to be executed and the time interval (in milliseconds) at which the function should be called.

callback: This is a function that will be executed repeatedly at regular intervals. The function specified here defines the task or set of instructions you want to perform periodically.

Example:

In this example, the updateCounter function will be called every 100 milliseconds (1 second).

interval: This is the time duration, in milliseconds, between each execution of the callback function. It determines how frequently the specified function will be invoked.

Example:

In this case, the callback function will be executed every 500 milliseconds.

Code example for setInterval() method

Let’s create a more detailed React component that uses setInterval() to update a counter every second. Additionally, we’ll include a button to start and stop the interval dynamically.

Code explanation

• Line 1: This line imports the necessary modules from the react library. useState and useEffect are React hooks used for managing state and side effects, respectively.

• Lines 4–5: Initializes two state variables, timer and isRunning, using the useState hook. timer represents the current time in seconds, and isRunning is a boolean indicating whether the timer is currently running.

• Lines 7–18: Uses the useEffect hook to manage the side effect of starting and stopping the timer. The effect runs when the component mounts or when isRunning changes. Inside the effect:

  • If isRunning is true, it sets up a recurring interval using setInterval that increments the timer state every 1000 milliseconds (1 second).

  • If isRunning becomes false, it clears the interval using clearInterval. The cleanup function returned by useEffect clears the interval when the component is unmounted or when isRunning changes.

• Lines 20–22: Defines a function toggleTimer that toggles the value of isRunning using the functional form of setState.

• Lines 24–27: Defines a function resetTimer that sets the timer state back to 0 and stop the timer by setting isRunning to false.

• Lines 29–64: The return statement renders the JSX for the component:

  • Displays the current timer value in an <h1> element.

  • Creates a <div> element containing two buttons with styles for padding, fontSize, cursor, backgroundColor, text color, border, and borderRadius.

  • The backgroundColor of the buttons changes based on the isRunning state, creating visual feedback.

  • The button labels Start or Pause are dynamic, based on the isRunning state.

  • The onClick prop of each button is set to call the corresponding functions (toggleTimer and resetTimer) when clicked.

Conclusion

The setInterval() method in React is a versatile tool for introducing dynamic and interactive elements to your applications. Its ability to repeatedly execute functions at specified intervals makes it indispensable for scenarios requiring continuous updates, animations, or data refreshes. While powerful, developers must use setInterval() judiciously, considering performance implications and potential memory leaks. Additionally, cleaning up intervals to prevent resource issues is a crucial practice. When employed thoughtfully, setInterval() enhances the overall user experience by enabling real-time features and dynamic content updates in React applications.