기능 업데이트 형태로 React useState를 사용해야 하는 이유는 무엇입니까?

Question

기능 업데이트에 대한 React Hook 문서를 읽는 중 다음 인용문을 보았습니다.

"+" 및 "-" 버튼은 업데이트로 인해 기능적 형태를 사용합니다. 값은 이전 값을 기준으로 합니다 ​​

하지만 기능 업데이트를 요구하는 목적이 무엇인지, 기능 업데이트를 요구하는 것과 이전 상태를 직접 사용하여 새 상태를 계산하는 것의 차이점은 무엇인지 알 수 없습니다.

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

예를 들어 문서에서 이 예를 변경하면

으아아아

직접 업데이트count:

으아아아

동작에 아무런 차이가 보이지 않으며 카운트가 업데이트되지 않는(또는 최신이 아닌) 상황을 상상할 수 없습니다. 개수가 변경될 때마다 onClick의 새로운 클로저가 호출되어 최신 onClick 的新闭包，捕获最新的 count을 캡처하기 때문입니다.

Answer 1

최근에 이런 필요성을 우연히 발견했습니다. 예를 들어 특정 수의 요소로 배열을 채우고 일부 사용자 작업에 따라 해당 배열에 추가할 수 있는 구성 요소가 있다고 가정해 보겠습니다. (예를 들어 제 경우에는 사용자가 한 번에 10개의 항목을 로드하기 때문에 아래로 스크롤하면 코드는 다음과 같습니다.

으아악

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

구조 기능 업데이트:

으아악

Answer 2

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

으아아아

그리고

으아아아