নির্ভরতা পুনরুদ্ধার করে এমন একটি কাস্টম হুক কীভাবে তৈরি করবেন?

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

তবে এটি আমাকে নিম্নলিখিত সতর্কতা দেয়

প্রতিক্রিয়া হুক ব্যবহারের প্রভাবটির নির্ভরতা অ্যারেতে একটি স্প্রেড উপাদান রয়েছে। এর অর্থ আপনি সঠিক নির্ভরতাগুলি পাস করেছেন কিনা তা আমরা স্থিরভাবে যাচাই করতে পারি না es

আমার আরও একটি পরিস্থিতি রয়েছে যেখানে এটি কার্যকর হয় না

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

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

    return toggle
}

এটি আমাকে সতর্কতা দেয়

প্রতিক্রিয়া হুক ব্যবহারের প্রভাবটি নির্ভরতা তালিকাটি পাস করেছিল যা কোনও অ্যারে আক্ষরিক নয়। এর অর্থ আপনি সঠিক নির্ভরতাগুলি পাস করেছেন কিনা তা আমরা স্থিরভাবে যাচাই করতে পারি না es

সতর্কতা ছাড়াই এবং এসিলিন্ট অক্ষম না করে আমি কীভাবে এই কাজটি করতে পারি?

Comments

তুমি ঠিক. আমার উত্তরটি মৃত-ভুল। আপনাকে এবং অন্যদের আরও বিভ্রান্ত না করার জন্য এটি আমি মুছে ফেলেছি। আমি ক্ষমাপ্রার্থী 🙏

— নাচ 2d

@ 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
}