React에서 두 번 실행되는 useEffect를 효과적으로 처리하는 방법은 무엇입니까?

Question

카운터가 있고 useEffect 中的 console.log() 来记录我的状态中的每个更改，但是 useEffect마운트 시 2번 호출됩니다. 저는 React 18을 사용하고 있습니다. 내 프로젝트의 CodeSandbox와 아래 코드는 다음과 같습니다.

import  { useState, useEffect } from "react";

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

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

  return (
    <div>
      <h1> Counter </h1>
      <div> {count} </div>
      <button onClick={() => setCount(count + 1)}> click to increase </button>
    </div>
  );
};

export default Counter;

Answer 1

업데이트: 이 게시물을 다시 보시고 좀 더 현명하게 행동하시기 바랍니다.

사용ref或创建一个没有的自定义hook.

으아아아

Answer 2

React 18부터 StrictMode 进行开发时，

useEffect를 사용하면 마운트할 때 두 번 호출되는 것이 일반적입니다. Documentation에 있는 내용은 다음과 같습니다.

이상해 보일 수도 있지만 결국 두 호출 사이에 문제가 있을 때 HTTP 요청을 캐싱하고 정리 기능을 사용하여 버그가 없고 현재 지침을 준수하며 향후 버전과 호환되는 더 나은 React 코드를 작성합니다. . 예는 다음과 같습니다.

으아악

이 매우 상세한 기사에서 React 팀은 이전과는 전혀 다른 useEffect를 설명하고 예를 들어 설명합니다.

특정 사용 사례의 경우 걱정하지 말고 그대로 둘 수 있습니다. 그리고 useEffect 中的 useRef 和 if 语句一起使用以使其触发一次，或删除 StrictMode useEffect의 useRef 및 if 문과 함께 이러한 기술을 사용하여 한 번 실행되도록 하거나

StrictMode 를 제거하려고 시도해서는 안 됩니다.

DocumentsuseEffect ，正如他们在 계속 문제가 발생한다면 useEffect를 사용 중일 수 있으며 useEffect를 사용하면 안 됩니다. 우선 > /learn/synchronizing-with- Effects#not-an- effect-initializing-the-application" rel="noreferrer">효과 없음: 애플리케이션 초기화 및

효과 없음: 제품 구매 🎜 , 🎜기사 🎜전체를 읽어 보시기 바랍니다. 🎜