Table of Contents
In my previous article, I explained how to run setTimeout in React. In this article, we will see how to call setInterval in React hooks.
What is setInterval?
setInterval
can be used to execute a set of code repeatedly with a fixed time delay between each call.
The syntax is similar to that of setTimeout.
It accepts a callback as the first parameter, which will be called at regular intervals, and a delay as the second parameter.
setInterval
can be used to show counters, refresh a scorecard at regular intervals, etc.
Example:
1setInterval(() => {2 console.log("This message will appear after each second")3}, 1000)
Using setInterval in React hooks
We can execute setInterval inside useEffect hook as shown below:
1import { useEffect } from "react"23function App() {4 useEffect(() => {5 setInterval(() => {6 console.log("This message will appear after each second")7 }, 1000)8 }, [])910 return <div className="App"></div>11}1213export default App
If you run the application and open the browser console, you will see the message gets displayed twice each time. This is because starting from React v18, in development mode, the component will mount, unmount, and then get mounted again.
Since the component is mounted again, setInterval gets called twice, hence 2 messages.
Clearing the setInterval
As we have done in the case of setTimeout, we need to clear the setInterval call when we unmount the component:
1import { useEffect } from "react"23function App() {4 useEffect(() => {5 const intervalId = setInterval(() => {6 console.log("This message will appear after each second")7 }, 1000)8 return () => {9 clearInterval(intervalId)10 }11 }, [])1213 return <div className="App"></div>14}1516export default App
Now if you run the application and check the browser console, you will see the message getting displayed only once per second.
Setting a state inside setInterval
We can increment a counter every second using setInterval
as shown below:
1import { useState } from "react"2import { useEffect } from "react"34function App() {5 const [counter, setCounter] = useState(0)6 useEffect(() => {7 const intervalId = setInterval(() => {8 setCounter(oldValue => oldValue + 1)9 }, 1000)10 return () => {11 clearInterval(intervalId)12 }13 }, [])1415 return <div className="App">{counter}</div>16}1718export default App
If you run the code now, you will see a nice counter which increments every second.
Do follow me on twitter where I post developer insights more often!