내 useEffect가 React 18의 StrictMode에서 두 번 실행되는 이유는 무엇이며 어떻게 해결할 수 있나요?

useEffect 두 번 실행: React에서 효과적으로 처리

StrictMode를 사용하는 개발 모드에 있을 때 React 18의 마운트에서 useEffect가 두 번 호출되는 이유 활성화되어 있습니까?

이해하기 이유

StrictMode가 활성화된 React 18은 초기 렌더링 중에 구성 요소를 다시 마운트하여 성능을 향상하고 버그 감지에 도움을 줍니다. 이렇게 다시 마운트하면 구성 요소가 마운트 및 마운트 해제를 여러 번 성공적으로 처리할 수 있습니다.

효과가 여러 번 실행됨: 문제입니까?

여러 마운트에도 불구하고 대부분의 효과가 올바르게 작동합니다. 그리고 마운트 해제합니다. 그러나 구독을 적절하게 정리하지 않거나 단일 마운트-마운트 해제 수명주기를 가정하는 경우 특정 효과에 문제가 발생할 수 있습니다.

여러 호출이 문제가 되는 일반적인 시나리오

일반적 여러 효과 호출로 인해 문제가 발생할 수 있는 상황은 다음과 같습니다.

• HTTP 요청: 서버를 요청하는 효과는 중복된 요청을 보내고 예상치 못한 동작으로 이어질 수 있습니다.
• 간격 기반 효과: 간격 설정과 관련된 효과는 구성 요소가 마운트 해제된 후에도 계속 실행될 수 있습니다. 메모리 누수 및 예상치 못한 결과가 발생합니다.

다중 처리를 위한 솔루션 호출

StrictMode를 금지하거나 복잡한 해결 방법을 사용하는 대신 React는 개발자가 여러 호출을 우아하게 처리하는 강력한 효과를 구현하도록 권장합니다. 여기에는 효과의 설정 작업에 대응하는 정리 기능 구현이 포함됩니다.

정리 기능

정리 기능은 일반적으로 다음과 같습니다.

• 효과의 중지 또는 실행 취소
• 구성요소 이후 부작용이 지속되는 것을 방지합니다. 마운트 해제합니다.
• 요청을 중단하거나, 간격을 지우거나, 효과로 인해 생성된 구독을 취소합니다.

예: 여러 HTTP 요청 처리

다음은 여러 HTTP 요청을 처리하는 예입니다. useEffect:

useEffect(() => {
  const abortController = new AbortController();

  const fetchUser = async () => {
    try {
      const res = await fetch("/api/user/", {
        signal: abortController.signal,
      });
      // Process the response data
    } catch (error) {
      if (error.name !== "AbortError") {
        // Handle non-aborted errors
      }
    }
  };

  fetchUser();

  return () => abortController.abort();
}, []);

강력한 효과의 이점

다중 호출을 효과적으로 처리하는 강력한 효과:

• 성능 향상 및 메모리 누수 방지 .
• 개발 모드에서도 버그 없는 동작을 보장합니다. 다시 마운트하는 것이 분명해집니다.
• React 개발 지침 및 향후 버전과의 호환성을 준수합니다.
• 더 안정적이고 유지 관리하기 쉬운 코드를 촉진합니다.

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