Bagaimana cara membuat kait kustom yang menerima dependensi?

Saya membuat pengait khusus yang memiliki toogle ketika beberapa negara berubah.

Anda harus bisa melewati status apa pun dalam array.

import { useState, useEffect } from 'react'

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    useEffect(() => {
        setToggle(t => !t)
    }, [...dependencies])

    return toggle
}

export default useFlatListUpdate

Dan itu harus digunakan sebagai

const toggleFlatList = useFlatListUpdate([search, selectedField /*, anything */])

Tapi itu memberi saya peringatan berikut

Bereaksi Hook useEffect memiliki elemen spread dalam array dependensinya. Ini berarti kami tidak dapat memverifikasi secara statis apakah Anda telah melewati dependensi yang benar.eslint (react-hooks / exhaustive-deps)

Saya juga punya situasi lain di mana itu tidak berhasil

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    useEffect(() => {
        setToggle(t => !t)
    }, dependencies)

    return toggle
}

Ini memberi saya peringatan

Bereaksi Hook useEffect disahkan daftar ketergantungan yang bukan array literal. Ini berarti kami tidak dapat memverifikasi secara statis apakah Anda telah melewati dependensi yang benar.eslint (react-hooks / exhaustive-deps)

Bagaimana saya bisa membuat ini berfungsi tanpa peringatan dan tanpa menonaktifkan eslint?

— Vencovsky
sumber

Kamu benar. Jawaban saya salah. Saya menghapusnya agar tidak membingungkan Anda dan orang lain lebih lanjut. Saya minta maaf dance

— dance2die

@ dance2die Jawaban Anda tidak salah, tapi itu hanya memberi jenis peringatan lain.

— Vencovsky

Terima kasih atas kata-kata baiknya. Saya tidak bisa membuatnya bekerja dengan referensi juga jadi saya akan menyerahkan masalah ini kepada orang lain :)

— dance2die

untuk contoh kedua Anda cukup masukkan dependensi ke dalam array:useEffect(() => { setToggle(t => !t) }, [dependencies])

— Jon B

Penggunaan daftar ketergantungan sangat aneh dalam kasus ini.
Saya tidak melihat cara lain selain mengabaikan atau membungkam peringatan itu.

Untuk membungkam peringatan, kita tidak harus menonaktifkan eslintsepenuhnya.
Anda dapat menonaktifkan aturan khusus ini untuk baris spesifik ini:

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    /* eslint-disable react-hooks/exhaustive-deps */
    useEffect(() => {
        setToggle(t => !t)
    }, [...dependencies])

    return toggle
}

— ckedar
sumber