Çarpışan kullanım Etkileri?

Question

Bu sorunla sık sık karşılaştığımı hissediyorum.

Kullanım etkileri zincirleme durum değişikliklerinden sonra tetiklenecek olduğunda, zincirdeki bazı useEffects'in birbiriyle örtüşen bağımlılıklara sahip olduğunu görüyorum, bu da bir setin durumuna geçtikten sonra her ikisinin de sırayla değil tetiklenmelerine neden oluyor.

Örnek: chapterIndexGüncellemeler sırasında bir kullanım zincirini tetikliyorum .

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])

chapterIndexDeğişiklik olduğunda her ikisinin de çalışmasını nasıl engellerim ? Yalnızca ikinci useEffect'in textTransitioning'e ilk useEffect ayarlarından sonra çalışmasını istiyorum. chapterIndexBağımlılık dizisinden kaldırırken şu hatayı alıyorum: 'React Hook useEffect'in bağımlılığı eksik:' sectionIndex '. Ya onu ekleyin ya da bağımlılık dizisini kaldırın. '

Answer 1

useEffect2 argüman alır. ilki çağrılacak işlev ve ikincisi bağımlılıklar dizisi adı verilen bir değişkenler dizisidir. dizideki değişkenlerden biri değişirken kullanım etkisini tetiklemek için kullanılan ikinci bağımsız değişken. Bu nedenle, useEffectbelirli bir değişken değiştirildiğinde çağrılmak istemiyorsanız , onu bağımlılıklar dizisine geçirmeyin. kodunuz şöyle olmalıdır:

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]

Birinin diğerini useEffecttetiklemesinin pek etkili olmadığını düşünüyorum ama belki de resmin tamamını görmüyorum

Answer 2

İkinci useEffect'te "sectionIndex" dizisinden kaldırmanız gerekir. Bu nedenle, ilk useEffect çalıştırıldığında, ikinci useEffect tetikleyicisine neden olacak "textTransitioning" i güncelleyecektir.

UseEffect'in daha koşullu uygulaması için başvurabilirsiniz https://reactjs.org/docs/hooks-effect.html