Removing Effect Dependencies

যখনি আপনি কোন ইফেক্ট ডিক্লেয়ার করবেন,তখন linter অটোমেটিক ভেরিফাই করবে যে আপনি সকল রিয়াক্টিভ ভ্যালু তার ডিপেন্ডেন্সি অ্যারেতে এড করেছেন, কিন্তু কখনো কখনো যদি আপনি অপ্রয়োজনীয় ডিপেন্ডেন্সি এড করেন, এটা আপনার এপ্লিকেশনে বাগ সৃষ্টি করতে পারে ।

এই লেসনে আমরা জানবো কিভাবে আমরা ইফেক্টের ডিপেন্ডেন্সি থেকে অপ্রয়োজনীয় ডিপেন্ডেন্সি বাদ দিতে পারি।

Dependencies should match the code

যখনি কোন ইফেক্ট লিখবেন, আপনি ইফেক্টের মাধ্যমে কি করতে চান তার শুধু স্টার্ট আর স্টপ লিখবেন, তারপর যদি আপনি ইফেক্টর ডিপেন্ডেন্সি ইম্পটি রাখলে linter আপনাকে প্রয়োজনীয় ডিপেন্ডেন্সিগুলো অটো সাজেস্ট করবে। আপনাকে শুধু সেই সাজেশন অনুযায়ী ডিপেন্ডেন্সিগুলো ডিপেন্ডেন্সি অ্যারেতে লিখে দিতে হবে।

অর্থাৎ আপনাকে ইফেক্টের ডিপেন্ডেন্সি নিয়ে কোন চিন্তা করতে হবেনা, প্রয়োজনীয় ডিপেন্ডেন্সিগুলো linterই আপনাকে বলে দিবে।

To remove a dependency, prove that it’s not a dependency

যেহেতু আপনাকে ইফেক্টের ডিপেন্ডেন্সিগুলো আপনাকে সিলেক্ট করতে হবেনা, প্রয়োজনীয় ডিপেন্ডেন্সিগুলো linterই আপনাকে বলে দিবে। তাই যদি এমন হয় যে এমন কোন ডিপেন্ডেন্সি linter আপনাকে সাজেস্ট করছে ডিপেন্ডেন্সিতে এড করতে কিন্তু আপনি সিওর জানেন যে সেটা কখনো চেঞ্জ হবেনা, আর তাই আপনি সেটা ডিপেন্ডেন্সিতে দিতে চান না, তাহলে রিয়াক্টকে এটা কোডের মাধ্যমে বুঝাবেন যে এটা কখনো চেঞ্জ হবেনা। কিন্তু আপনি কিন্তু এমন ক্ষেত্রে কখনই linter কে সাপ্রেস করবেন না।

ধরুন আপানার কোড এমন ,

const serverUrl = "https://localhost:1234";
 
function ChatRoom({ roomId }) {
    // This is a reactive value
    useEffect(() => {
        const connection = createConnection(serverUrl, roomId); // This Effect reads that reactive value
        connection.connect();
        return () => connection.disconnect();
    }, [roomId]); // ✅ So you must specify that reactive value as a dependency of your Effect
    // ...
}

এক্ষত্রে linter আপনাকে সাজেস্ট করবে roomId কে ডিপেন্ডেন্সিতে এড করার জন্য। কিন্তু আপনি জানেন যে roomId কখনোই চেঞ্জ হবেনা। আর তাই আপনি হয়তো roomId কে ডিপেন্ডেন্সি থেকে বাদ দিলেন,

const serverUrl = "https://localhost:1234";
 
function ChatRoom({ roomId }) {
    useEffect(() => {
        const connection = createConnection(serverUrl, roomId);
        connection.connect();
        return () => connection.disconnect();
    }, []); // 🔴 React Hook useEffect has a missing dependency: 'roomId'
    // ...
}

তখনি দেখবেন linter আপনাকে ওয়ার্নিং দেবে, আর তাই আপনি হয়তো ওয়ার্নিং থেকে বাচার জন্য linter কে এভাবে সাপ্রেস করে দিলেন।

const serverUrl = "https://localhost:1234";
 
function ChatRoom({ roomId }) {
    useEffect(() => {
        const connection = createConnection(serverUrl, roomId);
        connection.connect();
        return () => connection.disconnect();
        // eslint-ignore-next-line react-hooks/exhaustive-deps
    }, []);
    // ...
}

এটা কখনই করবেন না, কারণ এতে আপনার কম্পোনেন্টে বাগ তৈরি হবে, এবং পরে আর কখনই এই কম্পোনেন্টে linter সাজেশন দিবেনা, আর তাই হয়তো আপনি কোন প্রয়োজনীয় ডিপেন্ডেন্সি মিস করে যেতে পারেন, এতে আপনার কম্পনেন্টের বিহেবিয়ার চেঞ্জ হয়ে যাবে। তাই আপনি যদি একদম শিওর হন যে, roomId কখনই চেঞ্জ হবেনা,তাহলে আপনাকে রিয়াক্টকে বুঝাতে হবে যে roomId কখনই চেঞ্জ হবেনা। আর এটা করার জন্য আপনি roomId কে কম্পোনেন্টের বাহিরে নিয়ে স্ট্যাটিক ভাবে লিখে রাখতে পারেন।

const serverUrl = "https://localhost:1234";
const roomId = "general";
 
function ChatRoom() {
    useEffect(() => {
        const connection = createConnection(serverUrl, roomId);
        connection.connect();
        return () => connection.disconnect();
    }, []);
    // ...
}

মনে রাখবেন ডিপেন্ডেন্সি থেকে কোন কিছু বাদ দিতে চাইলে কখনওই linter কে সাপ্রেস করবেন না । বরং আপনি কোড চেঞ্জ করবেন। কোড অনুযায়ী ডিপেন্ডেন্সি ম্যাচ করবে।