React의 초기 렌더링에서 useEffect Hook이 실행되는 것을 방지하는 방법은 무엇입니까?

React의 useEffect Hook이 초기 렌더링 실행을 방지하도록 만들기

클래스 기반 React 구성 요소의 componentDidUpdate() 수명 주기 메서드는 각 렌더링 후에 호출됩니다. 초기를 제외하고. useEffect 후크를 사용하여 이 동작을 에뮬레이션하려면 처음을 포함하여 모든 렌더링에서 후크가 실행되는 것처럼 보일 수 있습니다.

해결책

useEffect 실행을 방지하려면 초기 렌더링 시 useRef 후크를 활용하면 효과의 초기 호출인지 여부를 추적하는 데 도움이 될 수 있습니다.

또한 "레이아웃 효과" 단계에서 실행되는 componentDidUpdate의 동작을 모방하려면 대신 useLayoutEffect를 사용하는 것이 좋습니다. useEffect.

예

const { useState, useRef, useLayoutEffect } = React;

function ComponentDidUpdateFunction() {
  const [count, setCount] = useState(0);

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

ReactDOM.render(
  <ComponentDidUpdateFunction />,
  document.getElementById("app")
);

이 접근 방식은 useRef 후크를 사용하여 첫 번째 업데이트를 추적하고 후속 업데이트 중에만 효과가 실행되도록 보장하여 다음의 동작을 미러링합니다. 클래스 기반 구성 요소의 componentDidUpdate.

위 내용은 React의 초기 렌더링에서 useEffect Hook이 실행되는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!