Update state in setInterval not working as expected

Question

I'm new to react, today I encounter a very strange case, what I want todo is to get the data from server side every 5 seconds, but it doesn't work as expected, the problem can be simplied to this:

npx create-react-app my-app
cd my-app

edit the App.js

import { useState } from "react";


function App() {
  const [count, setCount] = useState(0)

  const increment = () => {
    // simulate the querying, for example, checking the status of server
    console.log('Current count value:', count)
    setCount(count + 1)
  }

  setInterval(increment, 1000)


  return (
    <span>Count: {count}</span>
  );
}

export default App;

I want to update the state count every 1s, and I think the output in console would be

Current count value: 0
Current count value: 1
Current count value: 2
...

However, the output is very strange, click the link to see the output (I cant' insert image in the content)

chrome console output

Thanks

You are not using setInterval, the right way in React. You must be careful about the async operations flow. Here is a thread to read about it. https://stackoverflow.com/questions/36299174/setinterval-in-a-react-app — kazmi066, Aug 30 '22 at 03:31
Take reference from here. You simply need to update `count` value based on prev `count` value. — Shubham Verma, Aug 30 '22 at 03:34
Also, one point since you are new to React, the `useEffect` will fire twice in development mode for some reason. — RukshanJS, Aug 30 '22 at 03:40
see the react documentation. https://reactjs.org/docs/state-and-lifecycle.html — Md. Shafiqul Islam, Aug 30 '22 at 03:44
@RukshanJS thank you, I found the problem: every time the `count` update, the `setInterval(increment, 1000)` will be trigger 1 time (because of the re-rendering). So in the first time, there in only 1 `setInterval` is running, after the `count` updated, another `setInterval` will be created, ... so there maybe many `setInterval` is running... — ilu, Aug 30 '22 at 04:03

score 0 · Answer 1 · answered Aug 30 '22 at 03:35

You need to start interval in useEffect and clear when component unmount

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0)
  
  useEffect(() => {
    const increment = () => {
      // simulate the querying, for example, checking the status of server
      console.log('Current count value:', count)
      setCount(prev => prev + 1) // You can't use count state because it's will trigger useEffect and cause infinite loop. You need to use callback to update from previous value
    }

    const intervalId = setInterval(increment, 1000) // setInterval return interval id

    return () => {
      // Clear interval using intervalId
      // This function run when component unmount
      clearInterval(intervalId)
    }
  }, [])
  
  return (
    <span>Count: {count}</span>
  );
}

export default App;

score 0 · Answer 2 · answered Aug 30 '22 at 03:37

0

You can use setTimeout instead setinterval-is-moderately-evil

const DURATION = 1000;
const [count, setCount] = React.useState(0);

React.useEffect(() => {
  setTimeout(() => {
    setCount(count + 1);
  }, DURATION);
});

You can read more of how to use setInterval in react here making-setinterval-declarative-with-react-hooks

answered Aug 30 '22 at 03:37

nart

1,508
2
11
24

1

Thanks, it worked exactly as what I expected. I don't need an `setInterval` because every time the `count` updated, the callback in `useEffect` will be called by default (because the `deps` of `useEffect` is not set, by default it will be called every time the state updated). And I also found that if I set the `deps` of `useEffect` to `[]`, it will not work because the callback will be called only once. – ilu Aug 30 '22 at 04:12

BehRouz · Answer 3 · 2022-08-30T03:55:16.597

You need to use useEffect hook to keep track of changes in the component's states.

trying to invoke a function inside the body of your component will make that function to re-invoke everytime any DOM is updated. The best practice to initiate your component is to put it inside a useEffect hook without dependencies.

useEffect(() => {
    setInterval(increment, 1000)
}, []);

Now if you want to keep track of a state when it's updated you can use anotther useEffect and add the state in dependency array. Like:

useEffect(() => {
    console.log('incremented', count)
}, [count]);

Here is an edited version of your code:

import { useState, useEffect } from "react";

function App() {
    const [count, setCount] = useState(0)

    // a function that changes count state
    const increment = () => {
        setCount(prevState => prevState + 1)
    }

    // when component is mounted
    useEffect(() => {
        setInterval(increment, 1000)
    }, []);

    // when count state changes
    useEffect(() => {
        console.log('incremented', count)
    }, [count]);

    return (
        <span>Count: {count}</span>
    );
}

export default App;

Update state in setInterval not working as expected

3 Answers3