React에서 useState와 기능 업데이트 양식이 필요한 이유는 무엇입니까?

Question

React Hook 함수 업데이트에 관한 문서를 읽는 중 다음 문장을 보았습니다:

<인용문>

업데이트된 값은 이전 값을 기반으로 하기 때문에 "+" 및 "-" 버튼은 기능적 형식을 사용합니다

하지만 함수 업데이트의 목적이 무엇인지, 새 상태를 계산할 때 이전 상태를 직접 사용하는 것과 함수 업데이트의 차이점을 알 수 없습니다.

React useState Hook의 업데이트 기능에 함수 업데이트 양식이 필요한 이유는 무엇인가요? 차이가 명확하게 보이는 예는 무엇입니까(따라서 직접 업데이트를 사용하면 오류가 발생함)?

예를 들어 문서의 예를 다음과 같이 변경하면

함수 카운터({initialCount}) {
  const [count, setCount] = useState(initialCount);
  반품 (
    <>
      개수: {개수}
      <button onClick={() => setCount(initialCount)}>재설정</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

count를 직접 업데이트하세요.

함수 카운터({initialCount}) {
  const [count, setCount] = useState(initialCount);
  반품 (
    <>
      개수: {개수}
      <button onClick={() => setCount(initialCount)}>재설정</button>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </>
  );
}

동작에 아무런 차이가 없으며 개수가 업데이트되지 않거나 최신 상태가 아닌 상황을 상상할 수 없습니다. 개수가 변경될 때마다 최신 개수를 캡처하기 위해 새로운 클로저가 호출되기 때문입니다.

Answer 1

최근에 이런 필요성이 생겼습니다. 예를 들어 배열을 채우고 사용자의 일부 작업에 따라 매번 10개 항목의 동적 소스를 로드할 수 있는 구성 요소가 있다고 가정해 보겠습니다(예: 사용자가 화면을 계속 아래로 스크롤하는 경우). 코드는 다음과 같습니다. 약간 이렇습니다:

으아아아

확실히 setFeedItems를 호출하기 때문에 useEffect 후크의 종속성 목록에 FeedItems를 추가할 수는 없으므로 루프에 빠지게 됩니다.

구조 기능 업데이트:

으아아아

Answer 2

React에서는 상태 업데이트가 비동기식입니다. 따라서 다음 업데이트에서는 count에 이전 값이 있을 수 있습니다. 예를 들어 다음 두 코드 예제의 결과를 비교해 보세요.

으아아아

그리고

으아아아