Declare an Effect. (ইফেক্ট ডিক্লেয়ার করা)

ইফেক্ট ডিক্লেয়ার করার জন্য প্রথমে আমাদের কম্পোনেন্টের ভিতর useEffect হুককে ইম্পোর্ট করতে হবে। তারপর useEffect কে কম্পোনেন্টের টপ লেবেলে কল করতে হবে।

import React, { useEffect } from "react";
 
const App = () => {
  useEffect(() => {
    // effect code will go here
  }, []);
 
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
};
 
export default App;

ইফেক্টের কোড শুধুমাত্র কম্পোনেন্ট রি-রেন্ডার হয়ে যাওয়ার পর স্ক্রিনে যখন ভিজিবল হয়, তখন এক্সিকিউট হয়। এই অবস্থায় ইফেক্টের ভিতরে আমরা যা লিখবো তা প্রতিবার কম্পোনেন্ট রি-রেন্ডার হওয়ার সাথে সাথে রান হবে।

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

Specify the Effect dependencies. (ইফেক্ট রান হওয়ার ডিপেন্ডেন্সিগুলো বলে দেওয়া)

রিয়াক্টের ইফেক্টের উপর আমাদের কন্ট্রোল আনার জন্য আমরা ডিপেন্ডেন্সি এড করবো। এটি আমাদের বলে দেয় যে আমাদের কম্পোনেন্ট কখন কখন রান করা উচিত।

ডিপেন্ডেন্সি এড করার জন্য আমাদের ইফেক্টের সেকন্ড প্যারামিটারে কিছু ভ্যালু ([] অথবা অন্যান্য ডিপেন্ডেন্সি) দিতে হয়।

• যদি আমরা চাই যে প্রতিবার রি-রেন্ডারে ইফেক্ট কল হবে:

useEffect(() => {
  // code will go here
});

এক্ষেত্রে কোনও ডিপেন্ডেন্সি দিতে হয় না।

• যদি আমরা চাই যে শুধু প্রথম রেন্ডারে ইফেক্ট কল হবে এবং পরবর্তীতে রি-রেন্ডার হলেও আর ইফেক্ট কল হবে না:

useEffect(() => {
  // code will go here
}, []);

এক্ষেত্রে সেকন্ড প্যারামিটারে শুধু একটি [] দিতে হয়।

• যদি আমরা চাই যে কম্পোনেন্ট লোড হওয়ার সাথে সাথে একবার রান হবে এবং কোন স্পেসিফিক কিছু চেঞ্জ হলে আবার রান হবে:

useEffect(() => {
  // code will go here
}, [a, b]);

এক্ষেত্রে a এবং b ডিপেন্ডেন্সিতে এড করা হয়েছে। আমরা মাল্টিপল ডিপেন্ডেন্সি এড করতে পারি।

রিয়াক্ট প্রতিবার কম্পোনেন্ট রেন্ডার হয়ে যাওয়ার পর চেক করে দেখবে যে সেই ভ্যালুগুলো আগের রেন্ডারে যা ছিল, পরের রেন্ডারে কি তাই আছে নাকি। এটি Object.is() মেথডের মাধ্যমে করা হয়। যদি কোনও একটি ভ্যালু চেঞ্জ হয়, তবে রিয়াক্ট ইফেক্টকে আবার কল করবে।

Add cleanup if needed. (ইফেক্ট ক্লিন-আপ করা যদি প্রয়োজন হয়)

এখন আমরা একটি উদাহরণ দেখি যাতে আমরা বুঝতে পারি যে কখন আমাদের ক্লিন-আপ করা প্রয়োজন।

ধরি, আমাদের একটি চ্যাট অ্যাপ্লিকেশন আছে। যখনই কোনও ইউজার চ্যাট করার জন্য অ্যাপ্লিকেশনটি অন করে, তখন চ্যাট কম্পোনেন্টে ক্লিক করলে ইফেক্টের মাধ্যমে একটি চ্যাট সার্ভারের সাথে কানেকশন ঘটানো হবে।

import { useEffect } from "react";
import { createConnection } from "./chat.js";
 
export default function ChatRoom() {
  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    return () => {
      connection.disconnect(); // ক্লিন-আপ
    };
  }, []);
 
  return <h1>Welcome to the chat!</h1>;
}

export function createConnection() {
  // বাস্তবভাবে সার্ভারের সাথে কানেক্ট করার জন্য
  return {
    connect() {
      console.log("✅ Connecting...");
    },
    disconnect() {
      console.log("❌ Disconnected.");
    },
  };
}

এখন যদি ইউজার অন্য পেজে চলে যায় এবং পুনরায় চ্যাট কম্পোনেন্টে ফিরে আসে, তাহলে নতুন একটি কানেকশন ঘটবে।

যদি আমরা লক্ষ্য করি, প্রথমবার যখন ইউজার চ্যাট আইকনে ক্লিক করেছিল, সেই কানেকশন বন্ধ হয়নি। যদি ইউজার বার বার বেক এবং ফোর্থ করে, তবে অসংখ্য কানেকশন রানিং হয়ে যাবে এবং এতে মেমরি লিক হতে পারে। তাই সবসময় কম্পোনেন্ট যখন আনমাউন্ট হয়, তখন আমাদের ইফেক্টকে ক্লিন-আপ করতে হবে।

এজন্য, আমাদের ইফেক্টের কলব্যাক ফাংশনের ভিতর থেকে একটি ফাংশন রিটার্ন করতে হবে, যার ভিতরে আমরা ক্লিন-আপ কোড লিখব।

useEffect(() => {
  const connection = createConnection();
  connection.connect();
  return () => {
    connection.disconnect(); // ক্লিন-আপ ফাংশন
  };
}, []);