React State Hooks와 함께 `setInterval`을 사용하면 예기치 않은 동작이 발생하는 이유는 무엇입니까?

setInterval과 함께 React State Hook 사용: 상태 업데이트 문제 이해

React에서 setInterval 내에서 상태 후크를 사용하면 문제가 발생할 수 있습니다. 상태 업데이트. 이는 setInterval에 전달된 콜백 함수가 초기 상태 값에 대한 액세스를 유지하여 후속 업데이트가 반영되지 않도록 할 때 발생합니다.

문제

다음 시계 구성 요소를 고려하세요.

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>;
}

문제는 setTime 콜백 함수에 있습니다. 후속 렌더링에서 업데이트된 값이 아니라 첫 번째 렌더링 당시의 시간 변수를 참조합니다. 이로 인해 상태 업데이트는 초기값으로 제한됩니다.

해결책

이 문제를 해결하려면 상태 후크의 콜백 형식을 사용하세요. 현재 상태 값에 액세스:

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>;
}

이제 콜백 함수는 최신 상태 값을 올바르게 사용하여 시간이 다음과 같이 업데이트되도록 합니다. 예상됩니다.

대체 접근 방식

Dan Abramov는 자신의 블로그 게시물에서 후크를 사용하여 setInterval을 처리하는 다른 방법을 탐구하고 특정 시나리오에 적합한 대체 접근 방식을 제공합니다.

위 내용은 React State Hooks와 함께 `setInterval`을 사용하면 예기치 않은 동작이 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!