React 组件意外反应

Question

The following is a simple react component:

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


export default function Comp() {

  let [count, setCount] = useState(1);

  function countUp(){
    setCount(count + 1);
  }

  setInterval(countUp, 1000);

  return <h2>{count}</h2>
}

I expected the counter to go up every second But for some reason, after ten - twenty seconds something starts to go wrong

See here: https://stackblitz.com/edit/react-az7qgn?file=src/comp.jsx

Can anyone explain this?

Answer 1

You should use useEffect hook to set up that properly. I can provide an example.

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


export default function Comp() {
  const [count, setCount] = useState(1);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(state => state + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h2>{count}</h2>
}

A couple of notes.

In general, you would prefer const over let , but this is mandatory when destructuring things coming from React.

I suggest to read Using the Effect Hook on React docs to more information about useEffect .

Basically, useEffect allows you to achieve similar results to componentDidMount and componentDidUpdate lifecycle methods for class components. Also, in this specific case, by returning a function in useEffect callback, we make sure to clear the scheduled callback when it's time to clean up, which means after each run. This actually avoids the mess of stacking many setInterval on top of each other.

Also, when you setCount it's preferable to get the previous state by using the callback form, because that will be always up-to-date.

Answer 2

When calling setInterval(), it returns an interval id. Your code is not saving the variable, and thus you cannot reset it. On smaller iterations, you will not see the changes for every iteration. But, as the number of times that setInterval() is called increases from 0 to N, more timers are being initiated, and you will rapidly see flashes of numbers as they increase, because every interval is changing the state of count .

In other words, you are creating more and more timers as time goes on, rather than creating timers for one-time use. You will need to call clearInterval(timer_id_goes_here) to clear the timer. See code examples in the link below.

https://www.w3schools.com/jsref/met_win_setinterval.asp