Bentrok useEffects?

Question

Saya merasa seperti saya sering menemukan masalah ini.

Ketika merangkai useEffects yang akan dipicu setelah perubahan status, saya menemukan bahwa beberapa useEffects dalam rantai memiliki ketergantungan yang tumpang tindih yang menyebabkan keduanya dipicu daripada secara berurutan, setelah satu set ke status.

Contoh: Saya memicu rantai useEffects saat chapterIndexmemperbarui.

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

Bagaimana cara mencegah keduanya berjalan saat ada chapterIndexperubahan? Saya hanya ingin useEffect kedua dijalankan setelah useEffect pertama disetel ke textTransitioning. Saat menghapus chapterIndexdari array ketergantungan saya mendapatkan kesalahan: 'React Hook useEffect memiliki ketergantungan yang hilang:' chapterIndex '. Sertakan atau hapus larik ketergantungan. '

Answer 1

useEffectmembutuhkan 2 argumen. pertama adalah fungsi untuk memanggil dan yang kedua adalah larik variabel yang disebut larik ketergantungan. argumen kedua yang digunakan untuk memicu efek penggunaan saat salah satu variabel dalam larik berubah. jadi jika Anda tidak ingin useEffectdipanggil ketika variabel tertentu diubah, jangan meneruskannya dalam larik dependensi. kode Anda harus seperti itu:

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]

Saya pikir itu tidak terlalu efisien untuk membuat satu useEffectpemicu yang lain tetapi mungkin saya tidak melihat gambaran keseluruhan

Answer 2

Anda perlu menghapus "chapterIndex" dari array di useEffect kedua. Jadi, saat useEffect pertama dijalankan, maka akan diperbarui "textTransitioning" yang akan menyebabkan pemicu useEffect kedua.

Untuk eksekusi useEffect yang lebih bersyarat, Anda bisa merujuk https://reactjs.org/docs/hooks-effect.html