পিওর ফাংশন কী?

একটি ফাংশনকে পিওর (pure) বলা হয় যদি তা নিচের দুটি শর্ত পূরণ করে:

1. সেম ইনপুটের জন্য সেম আউটপুট: পিওর ফাংশন সবসময় তার ইনপুট অনুযায়ী নির্দিষ্ট আউটপুট প্রদান করে। অর্থাৎ একই ইনপুটের জন্য সবসময় একই আউটপুট পাওয়া যাবে।
2. সাইড-ইফেক্টের অনুপস্থিতি: পিওর ফাংশন বাইরের কোনো স্টেট বা ভ্যারিয়েবল পরিবর্তন করে না। এটি শুধুমাত্র ইনপুট অনুযায়ী কাজ করে এবং বাইরে কোনো পরিবর্তন আনে না।

উদাহরণ

function add(a, b) {
  return a + b;
}

এখানে add ফাংশনটি পিওর, কারণ এটি কেবল তার ইনপুট অনুযায়ী আউটপুট দিচ্ছে এবং বাহ্যিক কোনো স্টেট পরিবর্তন করছে না।

অন্য একটি উদাহরণ

function multiply(x, y) {
  return x * y;
}

এই multiply ফাংশনটি একইভাবে পিওর, যেহেতু এটি নির্দিষ্ট ইনপুটের জন্য নির্দিষ্ট আউটপুট প্রদান করে এবং বাহ্যিক স্টেটের ওপর নির্ভর করে না।

ইমপিওর ফাংশনের উদাহরণ

let x = 10;
 
function addWithSideEffect(a, b) {
  x = a + b; // বাহিরের ভ্যারিয়েবল পরিবর্তন করা হচ্ছে
  return x;
}

এই ফাংশনটি ইমপিওর, কারণ এটি বাহ্যিক ভ্যারিয়েবল x এর মান পরিবর্তন করছে, যা একটি সাইড-ইফেক্ট সৃষ্টি করছে।

আরেকটি ইমপিওর ফাংশন উদাহরণ

let userCount = 0;
 
function incrementUserCount() {
  userCount++; // বাহিরের ভ্যারিয়েবল পরিবর্তন করা হচ্ছে
  return userCount;
}

এই incrementUserCount ফাংশনটি userCount নামের বাহ্যিক ভ্যারিয়েবলের মান পরিবর্তন করছে, তাই এটি একটি ইমপিওর ফাংশন।

কেন React-এ পিওর ফাংশনাল কম্পোনেন্ট ব্যবহার করা উচিত?

React কম্পোনেন্টগুলোকে পিওর রাখতে রিকমেন্ড, কারণ এতে বেশ কিছু সুবিধা রয়েছে। আসুন, এই সুবিধাগুলো বিস্তারিতভাবে দেখি:

১. অপ্রয়োজনীয় রেন্ডার এড়ানো

React পিওর ফাংশনাল কম্পোনেন্টগুলোর ক্ষেত্রে ইনপুট বা প্রপসে কোনো পরিবর্তন না হলে কম্পোনেন্টটি পুনরায় রেন্ডার করে না। অর্থাৎ, ইনপুট এক থাকলে React আগের আউটপুট ব্যবহার করতে পারে, যা অ্যাপ্লিকেশনের রেন্ডারিংয়ের কার্যকারিতা বৃদ্ধি করে।

উদাহরণ

import React from "react";
 
const Greeting = React.memo(function Greeting({ name }) {
  console.log("Rendering Greeting");
  return <h1>Hello, {name}!</h1>;
});

এখানে React.memo ব্যবহারের মাধ্যমে এই কম্পোনেন্টকে পিওর করা হয়েছে। যদি name প্রপসের কোনো পরিবর্তন না ঘটে, তাহলে React পূর্বের রেন্ডারকৃত আউটপুটই পুনরায় ব্যবহার করবে, নতুন করে রেন্ডার করা প্রয়োজন হবে না।

২. সহজ এবং ক্লিন কোড

পিওর ফাংশনাল কম্পোনেন্টের ব্যবহারে কোড সহজ ও ক্লিন হয়। যেহেতু এগুলো শুধু ইনপুটের ওপর নির্ভরশীল এবং কোনো বাহ্যিক স্টেটের উপর নির্ভর করে না, তাই এগুলো সহজেই বোঝা যায় এবং প্রয়োগ করা যায়।

উদাহরণ

function WelcomeMessage({ user }) {
  return <p>Welcome, {user}!</p>;
}

এই ধরনের কম্পোনেন্ট অত্যন্ত ক্লিন এবং সহজপাঠ্য, কারণ এটি কোনো বাহ্যিক স্টেট পরিবর্তন করে না, বরং শুধুমাত্র প্রপসের মাধ্যমে আউটপুট প্রদান করে।

৩. প্রেডিক্টেবল আচরণ

পিওর ফাংশনাল কম্পোনেন্ট সবসময় নির্দিষ্ট ইনপুট অনুযায়ী নির্দিষ্ট আউটপুট দেয়। এতে করে এদের আচরণ প্রেডিক্টেবল হয়, অর্থাৎ আগেভাগেই অনুমান করা সম্ভব। এটি ডিবাগিং এবং বাগ সমাধানের ক্ষেত্রে গুরুত্বপূর্ণ, কারণ আচরণ সবসময় পূর্বানুমানযোগ্য থাকে।

৪. সহজ টেস্টিং

পিওর ফাংশনাল কম্পোনেন্ট সহজেই টেস্ট করা যায়, কারণ এগুলো ইনপুট এবং আউটপুটের উপর নির্ভরশীল। ইনপুট অনুযায়ী আউটপুট পরীক্ষা করলেই সহজে বোঝা যায় যে ফাংশনটি সঠিকভাবে কাজ করছে কি না।

উদাহরণ

function sum(a, b) {
  return a + b;
}
 
// টেস্টিং উদাহরণ:
console.log(sum(2, 3)); // আউটপুট হবে: 5

৫. Memoization এর সুবিধা

React-এ পিওর ফাংশনাল কম্পোনেন্ট ব্যবহারের ফলে memoization সহজ হয়। একই ইনপুটের জন্য React আগের আউটপুট সংরক্ষণ করতে পারে, ফলে অপ্রয়োজনীয় রেন্ডার এড়িয়ে পারফরম্যান্স উন্নত করা যায়। React.memo এই কাজে বিশেষভাবে ব্যবহৃত হয়।

React-এ পিওর ফাংশনাল কম্পোনেন্ট ব্যবহারের মাধ্যমে কোডের সহজ হয়, প্রেডিক্টেবিলিটি এবং পারফরম্যান্স বৃদ্ধি পায়। অপ্রয়োজনীয় রেন্ডারিং এড়ানো, সহজে টেস্ট করা, এবং কোড ক্লিন রাখার জন্য পিওর ফাংশন ব্যবহার অত্যন্ত গুরুত্বপূর্ণ। তাছাড়া, React এর memoization ফিচারের কারণে পিওর ফাংশনাল কম্পোনেন্ট ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের কার্যকারিতা উল্লেখযোগ্যভাবে বৃদ্ধি পায়।

যদি আমাদেরকে এমন কোন কাজ করতেই হয় যাতে কম্পোনেন্টের পিওরিটি নষ্ট হলেও করতে হবে,এমনবস্থায় কি করবো ?

হ্যা,এটা ঠিক যে সবসময় কম্পোনেন্টের পিওরিটি বজায় রাখা সম্ভব নাও হতে পারে,আমাদের এমন কিছু করা লাগতে পারে যাতে হয়তো কম্পোনেন্টের পিওরিটি নষ্ট হবে, এমন অবস্থায় আমরা দুটি কাজ করতে পাড়িঃ

Manage With Event Handler:

যেসব সাইড-এফেক্টগুলো আমরা event-handler এর মাধ্যমে করতে পারবো, তা আমরা event-handler এর ভিতর করার চেষ্টা করবো। কারণ event-handler রিয়াক্টের রেন্ডারিং টাইমে একটিভ হয়না, তাই event-handler পিওর হউয়ার প্রয়োজন নাই। event-handler Hydration (রিয়াক্টের কম্পোনেন্ট লোড হউয়ায়র পর যেই টাইমটায় জাভাস্ক্রিপ্ট একটিভ হয়, ওই প্রসেসটা হলো Hydration) টাইমে একটিভ হয়। মূল কোথা হলো যাতে রিয়াক্টের রেন্ডারিং টাইমে কোন সাইড-এফেক্ট না হয়।

useEffect হুকের মাধ্যমে সাইড-এফেক্ট ম্যানেজ করাঃ

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