How to create a custom hook that recives dependencies?

Question

I'm making a custom hook that have a toogle when some state change.

You should be able to pass any state in an array.

import { useState, useEffect } from 'react'

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

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

    return toggle
}

export default useFlatListUpdate

And it should be used as

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

But it gives me the following warning

React Hook useEffect has a spread element in its dependency array. This means we can't statically verify whether you've passed the correct dependencies.eslint(react-hooks/exhaustive-deps)

I also have another situation where it doesn't work

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

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

    return toggle
}

This gives me the warning

React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.eslint(react-hooks/exhaustive-deps)

How can I make this work without the warning and without disabling eslint?

Answer 1

Use of dependency list is very peculiar in this case.
I do not see other way except ignoring or silencing the warning.

To silence the warning, we do not have to disable eslint completely.
You can disable this specific rule for this specific line:

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

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

    return toggle
}