Hooks এর সাথে পরিচিতি

React এর ডকুমেন্টেশন থেকে আমরা জানতে পারি hooks হচ্ছে react এর নতুন এডিশন যেটার মাধ্যমে আমরা React এর স্টেট এবং অন্যান্য ফিচার ব্যাবহার করতে পারব class component না লিখেই, অর্থাৎ ফাংশনাল কম্পোনেন্টের মাধ্যমেই।

যেকোনো ইন্টারেক্টিভ অ্যাপ্লিকেশনে আমাদের অ্যাপের স্টেট ধরে রাখা লাগে (store) কোথাও না কোথাও এবং এই স্টেট এর ডিপেন্ড করেই কিন্তু আমরা আমাদের আপ্লিকেশনকে ইন্টারেক্টিভ করে থাকি।

এখন আসা যাক তাহলে React এ। আমরা React এ কিছু স্পেশাল ফাংশন ব্যাবহার করে থাকি আমাদের অ্যাপকে ইন্টারেক্টিভ করার জন্যে। এই ফাংশন গুলোকেই আমরা “Hooks” বলি। React আমাদের এরকম কিছু কমন বিল্ট-ইন hooks দিয়ে দিয়েছে।

• React.useState
• React.useEffect
• React.useContext
• React.useRef
• React.useReducer

এখানে প্রত্যেকটি একটি স্পেশাল ফাংশন যেটার কথা আমরা একটু আগেই জেনে এসেছি। আমরা এই ফাংশনগুলোর মাধ্যমে আমাদের React কম্পোনেন্টে ডাটা স্টোর করতে পারি (যেমন স্টেট) অথবা আমরা বিভিন্ন অ্যাকশান পারফর্ম করতে পারি (সাইড ইফেক্ট)। উপড়ের hooks গুলো ছাড়াও আরও কিছু বিল্ট-ইন hooks আছে যেগুলো আমাদের ক্ষেত্রবিশেষে ব্যাবহার করা লাগে।

এখানে ইম্পরট্যান্ট ব্যাপার হচ্ছে যে প্রত্যেকটি hooks এরই কিন্তু নিজস্ব Unique API রয়েছে। কিছু hooks শুধুমাত্র একটি value রিটার্ন করে (যেমন React.useRef এবং React.useContext), আবার কিছু আছে যারা একটি pair of values রিটার্ন করে থাকে। (যেমন React.useState and React.useReducer) এবং বাকিরা কিছুই রিটার্ন করে না (যেমন React.useEffect)।

আশা করি আমরা hooks এর একটি বেকগ্রাউন্ড পেয়েছি উপড়ের আলোচনায়। এখন আমরা আলোচনা করবো আমাদের প্রথম হুক useState নিয়ে।

useState

আমরা সম্ভবত এই hook টি সবথেকে বেশি ব্যাবহার করে থাকি আমাদের অ্যাপে। কারণ আমরা এটির মাধ্যমেই আমরা আমাদের ইন্টারনাল স্টেট মেনেজ করে থাকি। মূল আলোচনায় যাওয়ার আগে আমরা আগে দেখে নেই কোডে এটির ব্যাবহার –

function Counter() {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(count + 1)
  return <Pressable onPress={increment}>{count}</Pressable>
}

আমরা প্রথমে এই লাইনের ব্যাখ্যায় আসি; const [count, setCount] = React.useState(0)

এখানে আমরা দেখতে পারছি, React.useState(0) হচ্ছে একটি ফাংশন যেটি এটি একটি initial value গ্রহন করে। তো আমাদের ক্ষেত্রে আমাদের ষ্টেটের initial value হচ্ছে 0।

এই ফাংশনটি আসলে কি রিটার্ন করে আমাদের জন্যে? React.useState এক জোড়া (২টি) value রিটার্ন করে এবং এই জোড়া value টি একটি array টাইপে রিটার্ন হয়ে আসে যেটার ভিতরে ২টি এলেমেন্ট থাকে। আমরা যদি console.log দিয়ে এটার রিটার্ন দেখি তাহলে বুঝতে আরও সুবিধা হবে।

const a = React.useState(0)
console.log("useState",  a) -----> [0, f()] // output

আমরা দেখতে পারছি আমরা যদি console.log করি আমাদের useState কে, তাহলে আমরা রিটার্ন এ একটি array পাই যেটার ভিতরে ২ টি এলেমেন্ট আছে, ফার্স্ট ইনডেক্সে আমাদের initial value 0 পাই এবং সেকেন্ড ইনডেক্সে আমরা একটি ফাংশন পাচ্ছি এবং এই ফানশনের মাধ্যমেই আমরা আমাদের ষ্টেট ডাটা আপডেট করি। কমন প্রাকটিস হচ্ছে আমরা সবসময় এই ২টি value কে array destructuring এর মাধ্যমে ২টি ভেরিয়েবেলে সেট করে দেই।

আমরা পাচ্ছি তাহলে [count, setCount] = [0, f()], count এর value হচ্ছে 0. (আমাদের array এর ইনডেক্স 0) এবং setCount এর value হচ্ছে আমাদের ফাংশনটি যেটি আমরা array এর ইনডেক্স ১ এ কিন্তু দেখেছি। আশা করি আমরা array destructuring টি বুঝতে পেরেছি। নিচে array destructuring কিভাবে কাজ করে সেটি দেখানো হল।

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]

ভালো কথা, আমরা যে এতক্ষণ ষ্টেট ষ্টেট করলাম, আসলে ষ্টেট টা কি? এটার সংজ্ঞায় বলা যায় যে, ষ্টেট হচ্ছে এমন একটি ডাটা অথবা ভেলু যেটা চেঞ্জ হয় সময়ের সাথে। তাহলে আসলে কিভাবে চেঞ্জ হয় আমাদের ষ্টেট। আমরা যদি আমাদের Counterএ ফিরে যাই তাহলে দেখব আমরা যখন বাটন ক্লিক করছি তখন আমরা একটি ফাংশন কল করছি, সেটি হল increment এবং এই ফাংশনের ভিতরে আমরা আমাদের ষ্টেটকে আপডেট করে দিচ্ছে আমাদের setCount এর মাধ্যমে। এই setCount কিন্তু আমরা সেই প্রথমেই destructuring করে পেয়েছি এবং এই ফাংশনের কাজই হচ্ছে আমাদের count ষ্টেটকে আপডেট করা।

ওকে, তাহলে আমরা ষ্টেট পেলাম আবার ষ্টেট কে আপডেটও করলাম, তাহলে এখন কি হবে? এখানেই আসলে React এর মজা। আমরা যখন setCount ফাংশনটি call করি তখন আসলে আমরা React কে বলি যে আমাদের state আপডেট হয়েছে, React তখন পুরো Counter কে আবার রেন্ডার করে, আর যখন এটি re-render হয় তখন আমাদের পুরো কম্পোনেন্ট ফাংশনটি আবার re-run হয়। এবং এই re-run হওয়ার মাধ্যমে আমরা আমাদের আপডেটেড ষ্টেট value টি পাই।

প্রথমে আমাদের counter state এর value হচ্ছে 0, পরে setCount কল হলে আমরা এটার value ১ বাড়িয়ে দেই। React তখন পুরো Counter কম্পোনেন্টকে আবার রেন্ডার করে এবং নেক্সট রানে আমাদের counter এর value হয় ১। এই counter এর value কম্পোনেন্ট রিমুভ হওয়ার আগে পর্যন্ত বিদ্যমান থাকে।

এটাই ছিল মূলত useState hook এর সহজ ব্যাখ্যা। 2টি পয়েন্ট এখন আলোচনায় নিয়ে আসিনি, কারণ এগুলো আমরা সচারচর ব্যাবহার করি না, কিন্তু এখানে আমি তার রেফারেন্স দিয়ে দিচ্ছে কেউ যদি আগ্রহী হয়।

• কিভাবে আমরা কারেন্ট ষ্টেট value পেতে পারি আমাদের ষ্টেট আপডেট ফাংশনে? https://saadbashar.com/2021/03/30/getting-current-state-value-from-setstate-function/
• useState lazy initialisation https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates#usestate-lazy-initialization

সিরিজে পরের পর্বগুলো খুব শীঘ্রই আসবে ইনসাআল্লাহ. নিচে এই সিরিজের পরের পর্বগুলোর লিস্ট দেয়া হল।

• useEffect
• useRef
• useContext
• useReducer
• useMemo
• useCallback
• custom hooks

source – https://epicreact.dev/learn, https://reactjs.org/docs/hooks-intro.html