如何只运行一次 React useEffect 并使用 setState 更新属性状态

Question

The following functional React component runs the useEffect hook twice, even though an empty array [] is passed as a second argument and the component is added to the page only once:

const Tips = () => {
  const [idx, setIdx] = useState(0)
  useEffect(() => {
    const interval = setInterval(() => {
      setIdx(idx + 1)
    }, 1000)
  }, []) // empty array: run effect only once
  return <>{idx}</>
}

How to make sure the interval is started only once inside the useEffect function callback?

Also, the state idx is updated only once, the component outputs 0 and later on 1. How to change the component so that the idx counter keeps increasing?

Answer 1

This code will do what you need:

const Tips = () => {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    console.log("start use effect");
    const interval = setInterval(() => {
      setIdx(idx=>idx + 1);
    }, 1000);
    return ()=>clearInterval(interval)
  }, []); // empty array: run effect only once
  return <>{idx}</>;
};

the trick is here setIdx(idx=>idx + 1) . Instead of setIdx(idx + 1) . Because useEffect runs once, interval handler creates a closure over your initial idx value which is 0 and on every setIdx it just sets it to 0+1 and then component re-rendered with 1.

Answer 2

useEffect is only called once when I try to implement it. The interval function is however stuck in a loop. I think it is unclear what you want to achieve with this?