Comment créer un hook personnalisé qui récupère les dépendances?

Je fais un crochet personnalisé qui a un Google lorsque certains changements d'état.

Vous devriez pouvoir passer n'importe quel état dans un tableau.

import { useState, useEffect } from 'react'

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

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

    return toggle
}

export default useFlatListUpdate

Et il devrait être utilisé comme

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

Mais cela me donne l'avertissement suivant

React Hook useEffect a un élément spread dans son tableau de dépendances. Cela signifie que nous ne pouvons pas vérifier statiquement si vous avez passé les bonnes dependencies.eslint (react-hooks / exhaustive-deps)

J'ai aussi une autre situation où ça ne marche pas

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

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

    return toggle
}

Cela me donne l'avertissement

React Hook useEffect a reçu une liste de dépendances qui n'est pas un littéral de tableau. Cela signifie que nous ne pouvons pas vérifier statiquement si vous avez passé les bonnes dependencies.eslint (react-hooks / exhaustive-deps)

Comment puis-je faire fonctionner cela sans l'avertissement et sans désactiver eslint?

— Vencovsky
source

Tu as raison. Ma réponse est complètement fausse. Je l'ai supprimé pour ne pas vous confondre davantage, vous et les autres. Je m'excuse dance

— dance2die

@ dance2die Votre réponse n'était pas fausse, mais elle a donné un autre type d'avertissement.

— Vencovsky

Merci pour ces mots gentils. Je n'ai pas pu le faire fonctionner avec les arbitres non plus, donc je laisserai cette question à d'autres :)

— dance2die

pour votre deuxième exemple, mettez simplement les dépendances dans un tableau:useEffect(() => { setToggle(t => !t) }, [dependencies])

— Jon B

L'utilisation de la liste de dépendances est très particulière dans ce cas.
Je ne vois pas d'autre moyen que d'ignorer ou de faire taire l'avertissement.

Pour désactiver l'avertissement, nous ne devons pas désactiver eslintcomplètement.
Vous pouvez désactiver cette règle spécifique pour cette ligne spécifique:

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

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

    return toggle
}

— ckedar
source