useState()가 React의 개발 모드에서 이중 렌더링을 트리거하는 이유는 무엇입니까?

useState()가 개발 모드에서 이중 렌더링을 발생시키는 이유는 무엇입니까?

React에서 상태 관리를 위해 useState를 사용하면 상태 중에 두 개의 렌더링이 트리거될 수 있습니다. 업데이트. 이 동작은 잠재적인 부작용을 시뮬레이션하여 개발 디버깅을 향상시키는 React의 Strict 모드에 기인합니다.

다음 코드 조각을 고려하세요.

import React, { useState } from "react";
...
const [number, setNumber] = useState(0);
...
function changeNumber() {
    setNumber(state => state + 1);
}
...

changeNumber 함수를 트리거하는 버튼을 클릭하면, 구성 요소가 다시 렌더링되었음을 알리는 두 개의 콘솔 로그가 관찰될 수 있습니다. 이는 useState 업데이터와 같은 기능이 개발 환경에서 두 번 실행되도록 강제하는 Strict Mode 때문입니다.

React 문서에서는 Strict Mode가 상태 업데이터 기능을 포함한 특정 기능을 의도적으로 다시 호출하여 잠재적인 부작용을 감지하고 강조한다고 설명합니다. useState에 전달된 것과 같습니다. 목표는 디버깅을 용이하게 하고 결정적 동작을 보장하는 것입니다.

이 이중 렌더링을 완화하려면 애플리케이션의 진입점에서 다음 코드를 제거하여 엄격 모드를 비활성화할 수 있습니다.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

위 내용은 useState()가 React의 개발 모드에서 이중 렌더링을 트리거하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!