कस्टम हुक बनाने के लिए कैसे निर्भरता को कम करता है?

Question

मैं एक कस्टम हुक बना रहा हूं जिसमें कुछ स्थिति बदलने पर एक टॉगल है।

आपको किसी भी राज्य को एक सरणी में पास करने में सक्षम होना चाहिए।

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 */])

लेकिन यह मुझे निम्नलिखित चेतावनी देता है

प्रतिक्रिया हुक का उपयोग करें इसकी निर्भरता सरणी में एक फैल तत्व है। इसका अर्थ है कि हम सही रूप से सत्यापित नहीं कर सकते हैं कि आपने सही निर्भरताएँ पास की हैं। प्रतिक्रिया (प्रतिक्रिया-हुक / संपूर्ण-डिप्रेशन)

मेरे पास एक और स्थिति है जहां यह काम नहीं करता है

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

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

    return toggle
}

इससे मुझे चेतावनी मिलती है

रिएक्ट हुक का उपयोग करेंफैटेक्ट एक निर्भरता सूची पारित किया गया था जो एक सरणी शाब्दिक नहीं है। इसका अर्थ है कि हम सही रूप से सत्यापित नहीं कर सकते हैं कि आपने सही निर्भरताएँ पास की हैं। प्रतिक्रिया (प्रतिक्रिया-हुक / संपूर्ण-डिप्रेशन)

मैं चेतावनी के बिना और एस्लेंट को अक्षम किए बिना यह काम कैसे कर सकता हूं?

Comments

तुम सही हो। मेरा उत्तर मृत-गलत है। मैंने आपको और दूसरों को भ्रमित न करने के लिए इसे हटा दिया। मैं माफी चाहता हूं

— d

@ dance2die आपका उत्तर गलत नहीं था, लेकिन इसने एक और प्रकार की चेतावनी दी।

— वेंकोव्स्की

आपके नम्र शब्दों के लिए धन्यवाद। मैं इसे रेफरी के साथ काम करने में सक्षम नहीं था, इसलिए मैं इस मामले को दूसरों पर छोड़

— दूंगा

अपने दूसरे उदाहरण के लिए बस एक सरणी के अंदर निर्भरताएं डालें:useEffect(() => { setToggle(t => !t) }, [dependencies])

— जॉन बी

Answer 1

निर्भरता सूची का उपयोग इस मामले में बहुत अजीब है।
मुझे चेतावनी को नजरअंदाज करने या चुप करने के अलावा कोई दूसरा रास्ता नहीं दिख रहा है।

चेतावनी को चुप करने के लिए, हमें eslintपूरी तरह से अक्षम करने की आवश्यकता नहीं है ।
आप इस विशिष्ट लाइन के लिए इस विशिष्ट नियम को अक्षम कर सकते हैं:

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

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

    return toggle
}