React-এর ডেভেলপমেন্ট টিম React ভার্সন ১৬.৮-এ Hooks কনসেপ্ট চালু করে। একটি React Hook ফাংশন কম্পোনেন্টে state এবং অন্যান্য React ফিচার ব্যবহার করার অনুমতি দেয়। useState Hook-র সাথে, একটি ফাংশন কম্পোনেন্ট ক্লাস কম্পোনেন্টে রিরাইট না করেই নিজস্ব ইন্টারন্যাল state সেট করতে পারে।
React ক্লাস এবং ফাংশনাল কম্পোনেন্টের পার্থক্য রিভিউ করার জন্য এই গাইড চেক আউট করুন।
React-এ অন্য একটি ব্যাপকভাবে ব্যবহৃত Hook হলো useEffect। useEffect-র সাথে, সাইড ইফেক্টস (অথবা "effects") একটি ফাংশনাল কম্পোনেন্টের কন্টেক্সট থেকে পারফর্ম করা যায়। মনে রাখবেন যে সাইড ইফেক্টস জাভাস্ক্রিপ্ট ফাংশনগুলেও ঘটে।
সাইড ইফেক্টস ঘটে যখন একটি ফাংশন তার বডির বাইরে কিছু পরিবর্তন করে। React-এ, এটি একই জিনিস এবং এতে ডেটা ফেচিং, সাবস্ক্রিপশন, বা React কম্পোনেন্টের পূর্বে DOM পরিবর্তন করা অন্তর্ভুক্ত থাকতে পারে।
useEffect কী?
React Hook useEffect একটি ফাংশনাল কম্পোনেন্টকে সাইড ইফেক্টস পারফর্ম করতে দেয়। এটি React ক্লাস কম্পোনেন্টের lifecycle methods componentDidMount, componentWillUpdate, এবং componentWillUnmount-এর অনুরূপ কাজ করে। React lifecycle methods-এ ইন্ট্রোডাকশন এর জন্য এই রেফারেন্সটি দেখুন।
এই আর্টিকেলে, আমরা Hooks ব্যবহার শুরু করার একটি বেসিক উদাহরণ দেখব। এই আর্টিকেলের উদ্দেশ্য হলো একটি ইন্ট্রোডাকশন হিসেবে কাজ করা, গভীর ডাইভ নয়। useEffect-এ কমপ্রিহেনসিভ লুক জন্য, React Hooks সাথে পরিচিত হওয়ার পর এই ওভারভিউ পড়ুন।
React Hooks সিনট্যাক্স
useEffect বুঝতে, আমাদের প্রথমে useState Hook-এর সিনট্যাক্স সংক্ষিপ্তে জানতে হবে। Hooks ব্যবহার করার সময়, সেগুলো ইম্পোর্ট করতে হয় যেভাবে React ইম্পোর্ট করা হয়।
import React, { useState, useEffect } from 'react';
এখন আমরা আমাদের Hooks-সহ ফাংশনাল কম্পোনেন্ট ডিফাইন করতে পারি। এটি জাভাস্ক্রিপ্ট ফাংশন স্কোপ ব্যবহার করে। যখন আমরা ফাংশনাল কম্পোনেন্টের ভিতরে useEffect Hook ডিফাইন করি, তখন এর স্কোপের মাধ্যমে state এবং props-এ অ্যাক্সেস থাকে। স্কোপ সম্পর্কে আরও জানতে এই প্রাইমার রিভিউ করুন।
useState সিনট্যাক্স
স্পষ্টতার জন্য, আমাদের উদাহরণ হিসেবে একটি সিম্পল কাউন্টার ব্যবহার করি। আমরা DOM-এ আউটপুট করব একটি বাটন কতবার ক্লিক হয়েছে। আমাদের ফাংশনাল কম্পোনেন্ট imports-সহ এই রকম দেখাবে:
import React, {useState, useEffect} from 'react'
import ReactDOM from 'react-dom'
const ButtonCounter = () => {
return (
<button>Click Me</button>
)
}
ReactDOM.render(
<ButtonCounter />,
document.getElementById('container')
);
এটি আমাদের বাটনটি DOM-এ রেন্ডার করে। useEffect ডিফাইন করার আগে, আমরা useState Hook ডিফাইন করে আমাদের ইনিশিয়াল state সেট করতে পারি।
const [count, setCount] = useState(0);
এই সিনট্যাক্স ব্যবহার করে, React প্রথম ভেরিয়েবলটিকে ইনিশিয়াল state-এ সেট করে। এই কেসে, "count" ভেরিয়েবলটি useState-এ পাস করা আর্গুমেন্ট দ্বারা সেট হয়। React আমাদের count-এর ইনিশিয়াল state ০ সেট করেছে। দ্বিতীয় ভেরিয়েবলটি একটি ফাংশন হিসেবে ব্যবহার হবে count আপডেট করার জন্য।
এখন যেহেতু আমরা count-এর ইনিশিয়াল state ০ সেট করেছি, আমরা আমাদের setCount ফাংশন ব্যবহার করে state আপডেট করতে পারি।
const ButtonCounter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked the button {count} times</p>
<button onClick={() => setCount(count + 1)}>Click Me</button>
</div>
)
}
আমাদের setCount কে onClick প্রপার্টির একটি কলব্যাক ফাংশন হিসেবে ব্যবহার করে, আমরা বাটন ক্লিক হলে প্রতি বার DOM আপডেট করতে পারি।
এটি মানে আমাদের setCount ফাংশনটি যা useState-এ ইনিশিয়াল state সেট করার সময় ডিফাইন করা হয়েছিল তা কাজ করছে! এখন যেহেতু আমরা useState Hook-এর সিনট্যাক্স দেখেছি, আসুন useEffect-এ তাকাই।
useEffect সিনট্যাক্স
উল্লিখিতভাবে, useEffect সাইড ইফেক্টসের ব্যবহার ডিফাইন করে। ডেটা ফেচিং এবং ম্যানুয়াল DOM পরিবর্তনের মাধ্যমে কম্পোনেন্টগুলোর পরিবর্তন সাইড ইফেক্টস গড়ে তোলে। useEffect Hook কম্পোনেন্ট রেন্ডার হওয়ার প্রতি বার কল হয়।
এটি React ক্লাস কম্পোনেন্টের componentDidMount এবং componentDidUpdate-এর অনুরূপ কাজ করে। আমাদের কাউন্টার উদাহরণের সাথে এগিয়ে যাওয়ায়, আমরা useEffect-র মাধ্যমে আমাদের DOM আপডেট করব একটি নাম আমাদের <p> এলিমেন্টে দেখিয়ে।
const [count, setCount] = useState(0);
const [name, setName] = useState(" ");
useEffect(() => {
setName(name + "Ryan")
})
return (
<div>
<p>Hello {name}! You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click Me</button>
</div>
)
এটি जानবুঝकर ভুলভাবে কোড করা হয়েছে। DOM-এ যা পুশ হচ্ছে সেটা প্রুফ করে যে useEffect কম্পোনেন্টের প্রতিটি রেন্ডারে কল হচ্ছে।
এটি হচ্ছে কারণ ডিফল্টরূপে, useEffect Hook componentDidMount এবং componentWillUpdate-এর কাম্বিনেশনের মতো behave করে।
আমাদের Hook কাস্টোমাইজ করতে যাতে এটি শুধু কম্পোনেন্ট মাউন্ট হলে রেন্ডার করে, আমরা useEffect-এ একটি দ্বিতীয় আর্গুমেন্ট পাস করতে পারি। useEffect-এ একটি খালি অ্যারে ([]) দ্বিতীয় আর্গুমেন্ট হিসেবে পাস করলে, React বুঝতে পারে useEffect শুধু কম্পোনেন্ট মাউন্ট হলে কল করবে।
useEffect(() => {
setName(name + "Ryan")
}, [])
এখন, আমাদের ফাংশনাল কম্পোনেন্ট মাউন্ট হলে স্ট্রিং "Ryan" একবার মাত্র দেখাবে।
বাহ! Hooks ব্যবহার করার অভ্যাস গড়ে তোলার কিছু সময় লাগবে। সেটা মনে রেখে, অফিসিয়াল React ডকুমেন্টেশনে Hooks ব্যবহার করার একটি আপডেটেড গাইড আছে। এখানে পড়ুন।
উপসংহার
React useEffect Hook-এ এই ইন্ট্রোডাকশনে, আমরা শিখেছি Hooks কী এবং কীভাবে সেগুলো ব্যবহার করতে হয়। আমরা useState এবং useEffect Hooks-এর সিনট্যাক্সও কভার করেছি প্রতিটি জন্য একটি এলিমেন্টারি উদাহরণের সাথে।
Hooks-এর পটেনশিয়াল ব্যবহার এই প্রাইমারে কভার করা থেকে অনেক বেশি দুরে যায়। এটি পড়ার পর এবং নিজের কোডে কিছু সময় কাটানোর পর, লিংক করা রিসোর্সগুলোর দিকে برن আউট করুন React Hooks-এ আপনার ধারণা গভীর করতে। যদিও ক্লাস কম্পোনেন্টগুলো কোথাও যাচ্ছে না, Hooks হলো React-এর ভবিষ্যৎ, তাই সেগুলো সম্পর্কে ইনফর্মড এবং আপ টু ডেট থাকুন!
