Jak stworzyć niestandardowy hak, który odbiera zależności?

Robię niestandardowy hak, który ma toogle, gdy zmieni się jakiś stan.

Powinieneś być w stanie przekazać dowolny stan w tablicy.

import { useState, useEffect } from 'react'

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

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

    return toggle
}

export default useFlatListUpdate

I powinien być używany jako

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

Ale daje mi następujące ostrzeżenie

React Hook useEffect ma element rozprzestrzeniania w swojej tablicy zależności. Oznacza to, że nie możemy statycznie zweryfikować, czy pomyślnie przeszedłeś prawidłowy dependencies.eslint (hook-reakcyjny / wyczerpujący-deps)

Mam też inną sytuację, w której to nie działa

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

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

    return toggle
}

To daje mi ostrzeżenie

React use Hook useEffect przeszedł listę zależności, która nie jest literałem tablicowym. Oznacza to, że nie możemy statycznie zweryfikować, czy pomyślnie przeszedłeś prawidłowy dependencies.eslint (hook-reakcyjny / wyczerpujący-deps)

Jak mogę sprawić, by działało to bez ostrzeżenia i bez wyłączania eslint?

Użycie listy zależności jest w tym przypadku bardzo specyficzne.
Nie widzę innej drogi niż zignorowanie lub wyciszenie ostrzeżenia.

Aby wyciszyć ostrzeżenie, nie musimy eslintcałkowicie wyłączać .
Możesz wyłączyć tę konkretną regułę dla tej konkretnej linii:

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

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

    return toggle
}