UseEffect 초기 렌더링을 건너뛰고 종속성 변경 후에만 트리거하는 방법

잘 지내시길 바라요. useEffect 비트 때문에 좀 답답하셨겠지만 걱정하지 마세요. 함께 문제를 해결해 보세요.

Heppen인 이유: 제 친구 useEffect는 정말 간단합니다. 의존성 배열의 값이 변경될 때마다 JSX 이후에 실행됩니다. 그러나 종속성 배열의 데이터가 변경되지 않았음에도 불구하고 useEffect가 트리거되는 경우가 있습니다. 이는 초기 렌더링으로 인해 발생합니다.

해결책: 내 접근 방식은 당신의 접근 방식과 다를 수 있습니다. 제가 실수를 했다면 저와 나중에 이것이 효과가 있다고 말씀해 주세요. 그럼 자세히 살펴보겠습니다

1단계: 제 경우에는 2개의 사용자 참조를 생성합니다. 해당 구성요소A.tsx
초기 렌더링 동작을 제어하기 위해 두 개의 참조를 사용합니다.

const skipedInitialRender = useRef(false);
const wasInitialRender = useRef(false);

2단계: useEffect 생성

useEffect(() => {
        if(skippedInitialRender.current) {
            // After the first render, the value changes and this block will run
        }
        const currentTimeout = setTimeout(() => {
            wasInitialRender.current = true;
            skippedInitialRender.current = true;
        }, 200);
        return () => clearTimeout(currentTimeout);
    }, [value])

*3단계: * if 문 내에서 논리를 실행하고 완료

*설명 : * 초기 렌더링 중에는 setTimeout을 사용하여 실행을 지연합니다. 이렇게 하면 초기 렌더링(2, 4 또는 그 이상) 중에 useEffect가 트리거되는 횟수에 관계없이 논리가 실행되지 않습니다. 로직은 초기 렌더링 후 종속성 값이 다시 변경될 때만 실행됩니다.

위 내용은 UseEffect 초기 렌더링을 건너뛰고 종속성 변경 후에만 트리거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!