---
title: "Why Does My React Counter Stop at 1 When I Use setInterval?"  
description: "Why Does My React Counter Stop at 1 When I Use setInterval?"  
author: "Federica Bianchi"  
published: 2026-10-18  
canonical: https://answers.mindstick.com/qa/117849/why-does-my-react-counter-stop-at-1-when-i-use-setinterval  
category: "Mix Category"  
tags: ["react", "javascript", "React Hooks"]  
reading_time: 1 minute  

---

# Why Does My React Counter Stop at 1 When I Use setInterval?

I’m building a small elapsed-time counter in React. The interval keeps running, but the number on screen changes from 0 to 1 and then stays there.

```js
import { useEffect, useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timerId = setInterval(() => {
      // Attempt to increase the displayed count once per second.
      setCount(count + 1);
    }, 1000);

    // Stop the interval when this effect is cleaned up.
    return () => clearInterval(timerId);
  }, []);

  return <p>{count}</p>;
}
```

My linter flags `count` as a missing dependency. Adding it makes the counter advance, but it also seems to recreate the interval after every update.

How do **stale closures in React** explain this behavior? Should I use a functional state update here, or include `count` in the dependency array? I’m trying to understand the difference rather than just silence the warning.


---

Original Source: https://answers.mindstick.com/qa/117849/why-does-my-react-counter-stop-at-1-when-i-use-setinterval

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.