Removing Effect Dependencies

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

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

Dependencies should match the code

একটি useEffect লিখতে গেলে, প্রথমে ভাবো তুমি এই ইফেক্ট দিয়ে কী করতে চাও। সাধারণত ইফেক্টের দুটি অংশ থাকে:
১. স্টার্ট করা (যেমন: কিছু কাজ চালু করা)
২. স্টপ করা (যেমন: ক্লিনআপ করা)

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

উদাহরণ:

useEffect(() => {
  console.log("Effect is running!");
}, []);

এখানে ডিপেন্ডেন্সি অ্যারে ফাঁকা রাখার মানে ইফেক্টটি শুধুমাত্র একবার (কম্পোনেন্ট মাউন্টের সময়) চলবে। তবে, যদি তুমি এমন কোনো রিয়াক্টিভ ভ্যালু ব্যবহার করো, যা রেন্ডারের সময় পরিবর্তন হতে পারে, তাহলে তা ডিপেন্ডেন্সি অ্যারেতে যোগ করতে হবে।

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

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

ভুল পদ্ধতি:

ধরো, তোমার কোড এমন:

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

এখানে roomId হলো একটি রিয়াক্টিভ ভ্যালু। তাই linter তোমাকে এটি ডিপেন্ডেন্সি অ্যারেতে যোগ করতে বলবে।

কিন্তু তুমি যদি মনে করো roomId কখনো পরিবর্তন হবে না, এবং এটি ডিপেন্ডেন্সি অ্যারেতে যোগ করার দরকার নেই, তুমি হয়তো অ্যারে ফাঁকা রাখবে:

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => connection.disconnect();
}, []); // 🔴 Warning: 'roomId' is missing from the dependencies

এতে linter ওয়ার্নিং দেবে। অনেকে মনে করেন এই ওয়ার্নিং থেকে বাঁচার জন্য linter-কে সাপ্রেস করা উচিত:

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => connection.disconnect();
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

কখনোই এমনটি করো না! এতে কোডে বাগ তৈরি হতে পারে এবং ভবিষ্যতে সমস্যা দেখা দেবে।

সঠিক পদ্ধতি:

যদি নিশ্চিত হও যে কোনো ভ্যালু কখনো পরিবর্তন হবে না, তাহলে সেটিকে কম্পোনেন্টের বাইরে নিয়ে যাও এবং "স্ট্যাটিক" করে দাও।

const serverUrl = "https://localhost:1234";
const roomId = "general"; // Static value
 
function ChatRoom() {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, []); // ✅ No warning, because roomId is static
}

এভাবে তুমি roomId-কে রিয়াক্টিভ ভ্যালু হিসেবে না দেখিয়ে স্ট্যাটিক ভ্যালু বানিয়ে নিতে পারবে।

মনে রাখার জিনিস:

1. linter-এর সাজেশন গুরুত্ব দাও:
   যদি linter কোনো ডিপেন্ডেন্সি যোগ করার পরামর্শ দেয়, তা উপেক্ষা করো না। কারণ এটি তোমার ইফেক্ট সঠিকভাবে কাজ করার জন্য প্রয়োজনীয়।

2. কোডের সাথে ডিপেন্ডেন্সি মেলাও:
   তোমার ইফেক্ট এবং ডিপেন্ডেন্সি অ্যারের মধ্যে সবসময় মিল থাকতে হবে। এটি নিশ্চিত করবে যে ইফেক্ট ঠিক মতো আপডেট হচ্ছে।

3. কখনো linter-কে সাপ্রেস করো না:
   linter-কে সাপ্রেস করলে ভবিষ্যতে নতুন সমস্যা তৈরি হতে পারে। এটি সমস্যা সমাধানের সঠিক উপায় নয়।

4. স্ট্যাটিক ভ্যালু ব্যবহার করো:
   যদি কোনো ভ্যালু নিশ্চিতভাবে পরিবর্তন না হয়, সেটি কম্পোনেন্টের বাইরে নিয়ে যাও।

এখনো কোনো প্রশ্ন থাকলে বলতে পারো, আমি আরেকটু ভেঙে বা উদাহরণ দিয়ে বুঝিয়ে দেব! 😊