> 웹 프론트엔드 > JS 튜토리얼 > React의 초기 렌더링에서 useEffect Hook이 실행되는 것을 방지하는 방법은 무엇입니까?

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

Barbara Streisand
풀어 주다: 2024-11-21 05:37:13
원래의
588명이 탐색했습니다.

How to Prevent useEffect Hook from Running on Initial Render in React?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿