useEffects 충돌?

Question

이 문제를 자주 접하는 것 같습니다.

상태가 변경된 후 트리거되는 useEffect를 체인화 할 때 체인의 일부 useEffect에 중첩 종속성이있어 한 세트가 상태로 설정된 후 순차적으로 트리거되지 않고 둘 다 트리거됩니다.

예 : chapterIndex업데이트 할 때 useEffects 체인을 트리거하고 있습니다.

let [ chapterIndex, setChapterIndex ] = useState<number | null>(0);

let [textTransitioning, setTextTransitioning] = useState<'out' | 'in' | null>(null);

useEffect(() => {
    setTextTransitioning('out')
}, [chapterIndex])

useEffect(() => {
    if (chapterIndex !== null) {
        const {
            current: chapter = null
        } = chapterRefs.current[chapterIndex];
            
        if (textTransitioning === 'in') {
            chapter?.classList.add('in');
        }
    }
}, [textTransitioning, chapterIndex])

chapterIndex변경 시 둘 다 실행되지 않도록하려면 어떻게합니까 ? 첫 번째 useEffect가 textTransitioning으로 설정된 후에 만 ​​두 번째 useEffect가 실행되기를 원합니다. chapterIndex종속성 배열에서 제거 할 때 'React Hook useEffect에 누락 된 종속성이 있습니다 :'chapterIndex ' 라는 오류가 발생 합니다. 포함하거나 종속성 배열을 제거하십시오. '

Answer 1

useEffect2 개의 인수를받습니다. 첫 번째는 호출 할 함수이고 두 번째는 종속성 배열이라고하는 변수 배열입니다. 배열의 변수 중 하나가 변경되는 동안 사용 효과를 트리거하는 데 사용되는 두 번째 인수입니다. 따라서 useEffect특정 변수가 변경 될 때 호출 되지 않으려면 종속성 배열에 전달하지 마십시오. 코드는 다음과 같아야합니다.

let [ chapterIndex, setChapterIndex ] = useState<number | null>(0);

let [textTransitioning, setTextTransitioning] = useState<'out' | 'in' | null>(null);

useEffect(() => {
      setTextTransitioning('out')
}, [chapterIndex])

useEffect(() => {
 if (chapterIndex !== null) {
     const {
         current: chapter = null
     } = chapterRefs.current[chapterIndex];
         
     if (textTransitioning === 'in') {
         chapter?.classList.add('in');
     }
 }
}, [textTransitioning]

하나의 useEffect방아쇠를 다른 방아쇠 로 만드는 것은 그리 효율적이지 않다고 생각 하지만 전체 그림을 보지 못할 수도 있습니다.

Answer 2

두 번째 useEffect의 배열에서 "chapterIndex"를 제거해야합니다. 따라서 처음 useEffect가 실행될 때 두 번째 useEffect 트리거를 유발하는 "textTransitioning"을 업데이트합니다.

useEffect의 조건부 실행에 대해서는 다음을 참조하십시오. https://reactjs.org/docs/hooks-effect.html