React useState Hook

স্টেট কী

আমরা যখনই রিয়্যাক্ট শেখা শুরু করি বা রিয়্যাক্ট নিয়ে কাজ করি, তখনই একটা শব্দ খুব বেশি শুনতে পাই। সেই শব্দটা হলো State. এই স্টেট কি? এটা কি United States of America বা ভারতের স্টেটগুলোর মতো কোনো স্টেট? ডিকশনারি খুঁজলে দেখা যাচ্ছে স্টেট মানে হচ্ছে অবস্থা বা রাজ্য। রিয়্যাক্টে তো রাজ্যের কোনো বিষয় নেই। তাহলে এক অবস্থা হতে পারে। কি অবস্থা, কেমন অবস্থা? রিয়্যাক্ট তো কোনো পদার্থ নয় যে তার কঠিন, তরল বা বায়বীয় অবস্থা থাকবে। তাহলে what the heck is state? স্টেট হচ্ছে একটা কম্পোনেন্টের মেমোরি। এখন কম্পোনেন্টের মেমোরি আবার কি জিনিস? ধরেন আপনার কোনো একটা প্রোডাক্ট পছন্দ হলো। আপনি সেটা কার্টে অ্যাড করতে চাইছেন। Add to Cart বাটনে ক্লিক করলে সেটা কার্টে অ্যাড হয়ে যাবে। এখন কার্টে যে যে প্রোডাক্ট অ্যাড হচ্ছে এটা কম্পোনেন্টের কোনো না কোনো জায়গায় স্টোর হচ্ছে। যে জায়গায় স্টোর হচ্ছে সেটাই হচ্ছে কম্পোনেন্টের স্টেট।

useState

এখন প্রশ্ন হলো স্টোর তো হচ্ছে। সেটা কিভাবে হচ্ছে? দেখা যাক।

import './App.css';

const App = () => {
    let cart = 0;

    const handleClick = () => {
        cart += 1;
    };

    return (
        <div>
            <button onClick={handleClick}>Add to Cart</button>
            <p>Cart Items: {cart}</p>
        </div>
    );
};

export default App;

আমাদের তো বাটনে ক্লিক করলে কার্ট এক করে বৃদ্ধি পাওয়ার কথা। কিন্তু দেখা যাচ্ছে বাটনে ক্লিক করলে কিছুই হচ্ছে না। দুইটি কারণে আমরা কোনো চেইঞ্জ দেখতে পারছি না।

খেয়াল করুন এখানে handleClick ফাংশন একটা লোকাল ভ্যারিয়েবলকে আপডেট করছে। কিন্তু যখন রিয়্যাক্ট এই কম্পোনেন্টকে দ্বিতীয়বার রেন্ডার করছে তখন সে স্ক্র্যাচ থেকে রেন্ডার করছে। তাই সবসময় ইনিশিয়াল যে ভ্যালু সেটাই থেকে যাচ্ছে।
লোকাল ভ্যারিয়েবলের কোনো চেইঞ্জের ফলে কোনো রেন্ডার ট্রিগার হয়না। অর্থাৎ রিয়্যাক্ট বুঝতেই পারে না যে এখানে একটা নতুন ডাটা এসেছে যার ফলে আমাকে আবার কম্পোনেন্ট রি-রেন্ডার করতে হবে।

এখন একটা কম্পোনেন্টে নতুন ডাটা আপডেট করতে গেলে আমাদের দুইটা জিনিস দরকার।

ডাটা কোথাও স্টোর করে রাখতে হবে।
নতুন ডাটা আসার পরে কোনোভাবে রিয়্যাক্টকে কম্পোনেন্ট রেন্ডার করার জন্য ট্রিগার করতে হবে।

এই কাজগুলো করার জন্য রিয়্যাক্টে একটি হুক আছে যার নাম useState . এখন এই হুকটা কি করে। useState মূলত একটি ফাংশন, যার আর্গুমেন্ট আকারে থাকে আমাদের ইনিশিয়াল ডাটা। এটি যেকোনো টাইপের হতে পারে অর্থাৎ নাম্বার, স্ট্রিং, অ্যারে, অবজেক্ট ইত্যাদি যেকোনো টাইপের হতে পারে। এটি আমাদের রিটার্ন করে একটি অ্যারে। যার প্রথম আইটেম হিসেবে থাকে একটি ভ্যারিয়েবল যেখানে আমাদের ডাটা স্টোর করে রাখতে পারবো আর দ্বিতীয় আইটেম হিসেবে থাকে একটি আপডেটার ফাংশন যার মাধ্যমে আমরা আমাদের ডাটা আপডেট করতে পারি। চলুন আমরা একটু দেখি।

import { useState } from 'react';
import './App.css';

const App = () => {
    const cartState = useState(0);

    const cart = cartState[0];
    const setCart = cartState[1];

    const handleClick = () => {
        setCart(cart + 1);
    };

    return (
        <div>
            <button onClick={handleClick}>Add to Cart</button>
            <p>Cart Items: {cart}</p>
        </div>
    );
};

export default App;

এখানে দেখুন useState এর আর্গুমেন্ট আকারে আমরা দিয়েছি ০। অর্থাৎ কার্টে প্রথমে কোনো আইটেম থাকবে না। এরপর cartState এর প্রথম আইটেম হলো একটি ভ্যারিয়েবল এবং দ্বিতীয় আইটেম হলো একটি ফাংশন। সেই ফাংশনের আর্গুমেন্ট আকারে আমরা আমাদের ডাটা আপডেট করার জন্য যা করতে হয় তা করবো। এখানে আমাদের কার্ট এক করে বৃদ্ধি পাবে, তাই setCart(cart + 1); দিয়েছি। এখন যদি আপনারা ব্রাউজারে গিয়ে বাটনে ক্লিক করেন দেখবেন কার্ট এক করে বৃদ্ধি পাচ্ছে। তাহলে বুঝতেই পারছেন useState কি কাজ করছে এখানে। সে ডাটা স্টোর করে রাখছে, নতুন ডাটা আপডেট করছে এবং প্রতি আপডেটের পর রিয়্যাক্টকে পিঞ্চ করছে যে এই বলে, “আমি ডাটা আপডেট করেছি, তুমি এবার কম্পোনেন্ট রি-রেন্ডার করো।”

useState থেকে ভ্যারিয়েবল এবং আপডেটার ফাংশনকে এভাবে আলাদাভাবে বের করে না নিয়ে আমরা জাভাস্ক্রিপ্টের ডিস্ট্রাকচার পদ্ধতি অনুসরণ করতে পারি। এটাই কনভেনশন।

import { useState } from 'react';
import './App.css';

const App = () => {
    const [cart, setCart] = useState(0);

    const handleClick = () => {
        setCart(cart + 1);
    };

    return (
        <div>
            <button onClick={handleClick}>Add to Cart</button>
            <p>Cart Items: {cart}</p>
        </div>
    );
};

export default App;

এটা একই কাজ করবে। আপডেটার ফাংশনের নাম যেকোনো কিছুই দেয়া যাবে। কিন্তু এটা একটা কনভেনশন যে আপনি ভ্যারিয়েবলের নাম যাই দিবেন আপডেটার ফাংশনের নাম হবে ঐ ভ্যারিয়েবলের নামের আগে set বসিয়ে। এটা সবাই ফলো করে। তাই আমাদের এই কনভেনশন ফলো করতে হবে।

আরো উদাহরণ

স্টেটে যেকোনো টাইপের ডাটা থাকতে পারে। যেমন আপনি অ্যারেও রাখতে পারেন। এটার একটা উদাহরণ আমরা দেখি।

import { useState } from 'react';
import './App.css';

const App = () => {
    const [emailInput, setEmailInput] = useState('');
    const [email, setEmail] = useState([]);

    const handleChange = (e) => {
        setEmailInput(e.target.value);
    };

    const handleClick = () => {
        setEmail([...email, emailInput]);
        setEmailInput('');
    };

    return (
        <div>
            <input type="email" value={emailInput} onChange={handleChange} />
            <button onClick={handleClick}>Add Email</button>
            <ul>
                {email.map((email, index) => (
                    <li key={index}>{email}</li>
                ))}
            </ul>
        </div>
    );
};

export default App;

এখানে আমরা প্রথমে একটা ইনপুট ফিল্ডে যা যা লিখবো সেটা emailInput এ গিয়ে স্টোর হচ্ছে। এরপর যখন বাটনে ক্লিক করছি তখন তা email এ গিয়ে সবার শেষে স্টোর হচ্ছে এবং সাথে সাথে ইনপুট খালি হয়ে যাচ্ছে। আপডেট হওয়ার পর সেই ইমেইল লিস্টে অ্যাড হয়ে যাচ্ছে এবং আমাদের শো করছে। এটাই useState এর পাওয়ার। আমাদের অনেক কাজ সহজ করে দিয়েছে এই হুকটি।

আশা করি আপনারা যারা নতুন রিয়্যাক্টে তারা বুঝতে পেরেছেন useState কি এবং কেন ইউজ করা হয়। যদি কোনো সাজেশন থাকে জানাতে ভুলবেন না। হ্যাপি লার্নিং 😊