রিয়্যাক্ট হুক
রিয়্যাক্ট হুক
রিয়্যাক্ট কম্পোনেন্ট সাধারনত দুই ধরনের হয়ে থাকে ফাংশনাল ও ক্লাস বেইজড কম্পোনেন্ট। রিয়্যাক্ট এর ফাংশনাল কম্পোনেন্ট এর কিছু সীমাবদ্ধতা ছিল।
ফাংশনাল কম্পোনেন্টে আমরা কোন state ডিক্লেয়ার করতে পারতাম না তাই একে stateless কম্পোনেন্ট ও বলা হত।
এছাড়া,আমরা ক্লাস বেইজড কম্পোনেন্টে যে life-cycle মেথড গুলা ইউজ করতাম যেমন, componentDidUpdate(), componentDidUpdate(), componentWillUnmount() ইত্যাদি মেথড গুলো ফাংশনাল কম্পোনেন্টে ব্যবহার করার কোনো উপায় ছিল না।
এই ধরনের কিছু সমস্যা সমাধানের জন্য রিয়্যাক্ট ভার্শন 16.8 এ নিয়ে আসা হয় রিয়্যাক্ট হুক।
useState হুক
সহজ ভাষায় state হচ্ছে রিয়্যাক্ট ক্লাস কম্পোনেন্টের একটা স্পেশাল ভ্যারিয়েবল । তবে সাধারণ ভ্যারিয়েবল এর সাথে এটার কিছুটা পার্থক্য আছে। আর ফাংশনাল কম্পোনেন্টে state ডিফাইন করার জন্য আমাদের useState হুক ব্যবহার করতে হয়।
নিচের কোডে আমরা দেখব কিভাবে রিয়্যাক্ট এ একটা স্ট্যান্ডার্ড একটি ক্লাস কম্পোনেন্ট এ state ভেরিয়েবল ডিক্লেয়ার করা হয় এবং কিভাবে তা যে JSX এ এক্সেস করা হয় এবং কিভাবে this.setState() মেথড ব্যবহার করে state পরিবর্তন করা হয়।
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return ()
আমরা প্রথমে আমাদের Example ক্লাস কম্পোনেন্টের constructor ফাংশন এ count নামে একটা ভ্যারিয়েবল ডিক্লেয়ার করছি এবং একে একটা ইনিশিয়াল ভ্যালু 0 দিচ্ছি ।
এই ভ্যারিয়েবল এর মান আমরা JSX এর <p> ট্যাগ এর মধ্যে {this.state.count} হিসেবে এক্সেস করেছি।
এরপর একটা বাটন এর একটা onClick ইভেন্ট হ্যান্ডলার যোগ করেছি এবং এর মধ্যে আমরা this.setState() ব্যবহার করে আমাদের state এর মান পরিবর্তন করেছি।
ফাংশনাল কম্পোনেন্টের যেহেতু কোন constructor নেই তাই state ভ্যারিয়েবল ডিক্লেয়ার করতে চাইলে আমাদের useState হুক ব্যবহার করতে হবে ।
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return ()
হুক ব্যবহার করতে হলে প্রথমেই আমাদের রিয়্যাক্ট থেকে যে হুক টি ব্যবহার করতে চাই সেটা ইমপোর্ট করে নিতে হবে।
তাই আমরা প্রথমেই useState হুক টি রিয়েক্ট লাইব্রেরী থেকে ইমপোর্ট করে নিব।
import React, { useState } from 'react';
( useState কে একটি curly bracket {} দিয়ে আটকে দেয়া হয়েছে কারণ এটি একটি named export )
এখন আমাদের state ভ্যারিয়েবল ডিক্লেয়ার করার পালা এটা আমরা করবো নিচের কোডে,
const [count, setCount] = useState(0);
কোড টা দেখে অনেক কঠিন মনে হলেও আসলে খুবই সহজ কিছু কনসেপ্ট এখানে ব্যাবহার করা হয়েছে।
প্রথমেই আমরা const কিওয়ার্ড টি ইউজ করছি যা কিনা ES2015 এর একটি ফিচার।
এরপর ব্যবহার করা হয়েছে ES6 এর একটি ফিচার array destructuring.
[count, setCount] = useState(0);
এই কোড এর ডান পাশের useState() অংশ টি দুই টি ভ্যাল্যু রিটার্ন করে, current state এবং একে পরিবর্তন করার জন্য একটি ফাংশন। এই ভ্যালু দুটি কোডের বাম পাশের count এবং setCount ভ্যরিয়েবেল এ এসাইন হয়।
এখানে useState() ফাংশন টি কে একটি ইনিশিয়াল ভ্যালু 0 দিয়ে দিচ্ছি যেমনটা আমরা আমাদের ক্লাস কম্পোনেন্টের constructor ফাংশনে দিয়েছিলাম।
এরপর আমরা JSX এ count ভ্যালু টি সরাসরি ব্যাবহার করতে পারবো । ক্লাস কম্পোনেন্ট এর মত this.state.count লিখতে হবে না।
আর আমাদের বাটনের onClick ইভেন্ট হ্যান্ডলার এ আমরা আমাদের setState ফাংশনটি ব্যবহার করে খুব সহজেই state পরিবর্তন করতে পারব।
onClick={() => setCount(count + 1)}
রিয়্যাক্ট এ আরো অনেক হুক আছে এবং আমরা চাইলে নিজেরাই আমাদের প্রয়োজন মতো হুক তৈরি করতে পারবো। এগুলো নিয়ে আমরা পরবর্তীতে বিস্তারিত আলোচনা করবো।