내 useEffect 후크가 React 18에서 두 번 실행되는 이유는 무엇입니까(그리고 어떻게 해결할 수 있습니까?)

useEffect가 두 번 실행되는 이유와 React에서 이를 처리하는 방법

문제:

useEffect를 사용하여 상태 변경을 기록하는 경우 마운트 시 효과가 두 번 발동되는 것이 관찰됩니다. 이 문제는 React 18에서 발생합니다.

이유:

StrictMode를 사용하는 React 18의 개발 모드에서 useEffect는 중요한 구성 요소가 여러 구성 요소에 복원력이 있는지 확인하기 위해 의도적으로 한 번 다시 마운트됩니다. 장착 및 장착 해제 주기. React는 더 나은 성능을 위해 이러한 주기 동안 상태를 보존하는 것을 목표로 합니다.

해결책:

useEffect의 초기 실행에 의존하는 대신 빈 종속성을 사용하는 것이 좋습니다. 첫 번째 이후에만 효과를 실행하는 배열([]) 렌더링:

import { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("rendered", count);
  }, []);

  return <div>...</div>;
};

대체 솔루션:

상태에 대한 종속성이 필수적이고 렌더링할 때마다 확인해야 하는 경우 다음 접근 방식을 사용하는 것이 좋습니다.

• 정리 함수: useEffect에서 반환된 정리 함수를 사용합니다. 구성 요소가 마운트 해제될 때 부작용을 수행합니다. 이렇게 하면 적절한 정리가 보장되고 메모리 누수를 방지할 수 있습니다.
• useRef: useRef 후크는 변경 가능한 데이터에 대한 참조를 저장하는 데 사용할 수 있으며 해당 값은 렌더링 간에 유지됩니다. 이는 여러 useEffect 호출을 트리거하지 않고 상태 변경을 추적하는 데 유용할 수 있습니다.
• 캐싱 및 디바운싱: 효과에 외부 요청이 포함되는 경우 중복 호출을 방지하기 위해 캐싱 또는 디바운싱 기술을 사용하는 것이 좋습니다.

제작 동작:

이 동작은 개발 모드에서만 발생한다는 점에 유의하는 것이 중요합니다. 프로덕션 빌드에서 useEffect는 구성 요소 마운트당 한 번만 실행됩니다.

결론:

React 18에서 useEffect가 두 번 실행되는 이유를 이해하는 것은 예의 바르고 강력한 코드를 작성하는 데 중요합니다. 코드에 반응합니다. 위에서 설명한 적절한 솔루션을 채택함으로써 개발자는 버그를 방지하고 상태 일관성을 유지하며 효율적인 애플리케이션 성능을 보장할 수 있습니다.

위 내용은 내 useEffect 후크가 React 18에서 두 번 실행되는 이유는 무엇입니까(그리고 어떻게 해결할 수 있습니까?)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!