Làm thế nào để tạo một hook tùy chỉnh mà đọc phụ thuộc?

Tôi đang tạo một hook tùy chỉnh có mã thông báo khi một số trạng thái thay đổi.

Bạn sẽ có thể vượt qua bất kỳ trạng thái trong một mảng.

import { useState, useEffect } from 'react'

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

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

    return toggle
}

export default useFlatListUpdate

Và nó nên được sử dụng như là

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

Nhưng nó cho tôi cảnh báo sau

React Hook useEffect có một phần tử trải trong mảng phụ thuộc của nó. Điều này có nghĩa là chúng tôi không thể xác minh tĩnh xem bạn đã vượt qua phụ thuộc chính xác hay chưa.eslint (phản ứng-hook / effive-deps)

Tôi cũng có một tình huống khác khi nó không hoạt động

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

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

    return toggle
}

Điều này cho tôi cảnh báo

React Hook useEffect đã được thông qua một danh sách phụ thuộc không phải là một mảng bằng chữ. Điều này có nghĩa là chúng tôi không thể xác minh tĩnh xem bạn đã vượt qua phụ thuộc chính xác hay chưa.eslint (phản ứng-hook / effive-deps)

Làm thế nào tôi có thể làm cho công việc này mà không có cảnh báo và không vô hiệu hóa eslint?

Sử dụng danh sách phụ thuộc là rất đặc biệt trong trường hợp này.
Tôi không thấy cách nào khác ngoài việc phớt lờ hoặc im lặng cảnh báo.

Để tắt tiếng cảnh báo, chúng tôi không phải tắt eslinthoàn toàn.
Bạn có thể tắt quy tắc cụ thể này cho dòng cụ thể này:

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

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

    return toggle
}