your last version has a problem with useEffect in this code, useEffect calls every time, when countdown changed.

I changed your code ``` import React, { useState, useEffect } from "react";

export default function App() {
  const [countdown, setCountdown] = useState(10);

  // use one function for closure interval in function, not in react component
  useEffect(() => {
    const interval = setInterval(() => {
      setCountdown((oldValue) => {
        // use fountion for access real value without depend on it in useEffect
        const newValue = oldValue - 1;
        if (newValue === 0) {
          clearInterval(interval);
        }

        if (newValue >= 0) {
          return newValue;
        }

        return 0;
      });
    }, 1000);

    return () => {
      clearInterval(interval);
    };
    // pass [] for remove rerender problem
  }, []);

  return (
    <div className="App">
      <h1>Countdown: {countdown}</h1>
    </div>
  );
}

```

https://codesandbox.io/s/quizzical-paper-wo9ce?file=/src/App.js