Как создать пользовательский хук, который получает зависимости?

Я делаю кастомный хук, который имеет переключатель при изменении состояния.

Вы должны быть в состоянии передать любое состояние в массиве.

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 имеет элемент распространения в своем массиве зависимостей. Это означает, что мы не можем статически проверить, правильно ли вы передали правильный файл dependencies.eslint (реагировать на крючки / исчерпывающим образом)

У меня также есть другая ситуация, когда это не работает

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

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

    return toggle
}

Это дает мне предупреждение

React Hook useEffect был передан список зависимостей, который не является литералом массива. Это означает, что мы не можем статически проверить, правильно ли вы передали правильный файл dependencies.eslint (реагировать на крючки / исчерпывающим образом)

Как я могу заставить это работать без предупреждения и без отключения eslint?

— Vencovsky
источник

Вы правы. Мой ответ совершенно неверен. Я удалил его, чтобы не запутать вас и других. Я извиняюсь 🙏

— dance2die

@ dance2die Ваш ответ не был неправильным, но он просто дал другое предупреждение.

— Vencovsky

Спасибо за добрые слова. Я не смог заставить его работать с реферами, поэтому я оставлю это дело другим :)

— dance2die

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

— Jon B

Использование списка зависимостей в этом случае очень своеобразно.
Я не вижу другого пути, кроме как игнорировать или заставить замолчать предупреждение.

Чтобы отключить предупреждение, нам не нужно eslintполностью отключать .
Вы можете отключить это конкретное правило для этой конкретной строки:

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

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

    return toggle
}

— ckedar
источник