후크로 렌더 두 번 반응

후크로 렌더 두 번 반응

내 구성 요소가 두 번 렌더링되는 이유

export default function App() {
  console.log("asd");
  const [count, setCount] = useState(0);
  return (
    <div>
      <Title count={count} />
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      />
    </div>
  );
}


//console= "asd" "asd"

두 번 렌더링되지만 useState를 제거하면 발생하지 않음

당신의 앱은 리액션에 의해 포장될 수 있다.엄격한 모드.StrategyMode는 응용프로그램의 잠재적인 문제를 강조하기 위한 도구다.

StrategyMode는 현재 다음을 지원하고 있다.

안전하지 않은 라이프사이클로 구성 요소 식별

레거시 문자열 참조 API 사용에 대한 경고

사용되지 않는 findDOMNode 사용에 대한 경고

예상치 못한 부작용 감지

레거시 컨텍스트 API 탐지

엄격한 모드는 부작용을 자동으로 감지할 수는 없지만, 부작용을 조금 더 결정론적으로 만들어서 발견하는 데 도움을 줄 수 있다.이는 다음과 같은 기능을 의도적으로 이중 호출하여 이루어진다.

클래스 구성 요소 생성자, 렌더 및 wayComponentUpdate 메서드

클래스 구성 요소 정적 getDerivedStateFromProps 메서드

기능 구성 요소 본문(앱이 기능 구성 요소임)

상태 업데이트 프로그램 기능(상태 설정의 첫 번째 인수)

State, useMemo 또는 useRedcer를 사용하기 위해 전달된 함수

자세한 정보

참조URL: https://stackoverflow.com/questions/61549481/react-render-twice-with-hooks