วิธีการสร้าง hook แบบกำหนดเองที่อ้างอิงพึ่งพาได้อย่างไร

ฉันกำลังทำเบ็ดแบบกำหนดเองที่มี toogle เมื่อบางสถานะเปลี่ยนไป

คุณควรจะสามารถผ่านสถานะใด ๆ ในอาร์เรย์

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 มีองค์ประกอบการแพร่กระจายในอาร์เรย์พึ่งพา ซึ่งหมายความว่าเราไม่สามารถยืนยันแบบคงที่ได้ว่าคุณผ่านการอ้างอิงที่ถูกต้องแล้วหรือไม่ (react-hooks / exhaustive-deps)

ฉันยังมีสถานการณ์อื่นที่ไม่สามารถใช้งานได้

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

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

    return toggle
}

สิ่งนี้ทำให้ฉันได้รับคำเตือน

Hook React useEffect ได้รับการส่งผ่านรายการการพึ่งพาที่ไม่ใช่ตัวอักษรของอาร์เรย์ ซึ่งหมายความว่าเราไม่สามารถยืนยันแบบคงที่ได้ว่าคุณผ่านการอ้างอิงที่ถูกต้องแล้วหรือไม่ (react-hooks / exhaustive-deps)

ฉันจะทำให้งานนี้โดยไม่มีการเตือนและไม่ปิดการใช้งาน eslint ได้อย่างไร

การใช้รายการการพึ่งพาเป็นสิ่งที่แปลกมากในกรณีนี้
ฉันไม่เห็นวิธีอื่นยกเว้นเพิกเฉยหรือปิดเสียงเตือน

ในการปิดเสียงเตือนเราไม่จำเป็นต้องปิดการใช้งานeslintอย่างสมบูรณ์
คุณสามารถปิดการใช้งานกฎเฉพาะสำหรับบรรทัดนี้:

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

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

    return toggle
}