Як створити користувацький гачок, який отримує залежність?

Я роблю користувацький гачок, у якого є занадто вуглець, коли зміниться стан.

Ви повинні мати можливість передавати будь-який стан у масиві.

import { useState, useEffect } from 'react'

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

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

    return toggle
}

export default useFlatListUpdate

І його слід використовувати як

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

Але це дає мені таке попередження

React Hook useEffect має елемент поширення у своєму масиві залежностей. Це означає, що ми не можемо статистично перевірити, чи ви пройшли правильні залежності.eslint (реакція-гачки / вичерпні-deps)

У мене також є інша ситуація, коли це не працює

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

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

    return toggle
}

Це дає мені попередження

React Hook useEffect передали список залежностей, який не є літералом масиву. Це означає, що ми не можемо статистично перевірити, чи ви пройшли правильні залежності.eslint (реакція-гачки / вичерпні-deps)

Як я можу зробити цю роботу без попередження та не відключаючи еслінт?

— Венцовський
джерело

Ти правий. Моя відповідь мертво-неправильна. Я видалив його, щоб не бентежити вас та інших. Прошу вибачення 🙏

— dance2die

@ dance2die Ваша відповідь не була помилковою, але вона просто надала інший тип попередження.

— Венцовський

Дякую за добрі слова. Мені не вдалося змусити його працювати з рефлексами, тому я залишу цю справу іншим :)

— dance2die

для вашого другого прикладу просто покладіть залежності всередині масиву:useEffect(() => { setToggle(t => !t) }, [dependencies])

— Джон Б

Використання списку залежностей у цьому випадку дуже своєрідне.
Я не бачу іншого способу, крім ігнорування або замовчування попередження.

Щоб заглушити попередження, нам не потрібно eslintповністю відключати .
Ви можете відключити це правило для цього конкретного рядка:

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

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

    return toggle
}

— ckedar
джерело