Why Does Using `setInterval` with React State Hooks Cause Unexpected Behavior?

Using React State Hooks with setInterval: Understanding the State Update Issue

In React, using the state hook within setInterval can lead to issues with state updates. This arises when the callback function passed to setInterval retains access to the initial state value, preventing subsequent updates from being reflected.

The Problem

Consider the following Clock component:

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(time + 1);
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return <div>Seconds: {time}</div>;
}

The issue lies in the setTime callback function. It references the time variable at the time of the first render, not the updated value from subsequent renders. As a result, the state update is limited to the initial value.

The Solution

To rectify this issue, use the callback form of the state hook, which provides access to the current state value:

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime((prevTime) => prevTime + 1); // Get the latest state value
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return <div>Seconds: {time}</div>;
}

Now, the callback function correctly uses the latest state value, ensuring that the time is updated as expected.

Alternative Approaches

Dan Abramov explores other ways to handle setInterval with hooks in his blog post, offering alternative approaches that may suit specific scenarios.

The above is the detailed content of Why Does Using `setInterval` with React State Hooks Cause Unexpected Behavior?. For more information, please follow other related articles on the PHP Chinese website!