ইউজস্টেট হুক - একটি ব্যাপক গাইড

একটি রাষ্ট্র কি?

ইউজস্টেট হুকের গভীরে যাওয়ার আগে আসুন প্রথমে শব্দটি বুঝতে পারি অবস্থা.

রাষ্ট্র একটি নির্দিষ্ট সময়ে কিছু সম্পর্কে তথ্য উপস্থাপন করে।

উদাহরণস্বরূপ, আসুন একটি পাঠ্যবক্স বিবেচনা করুন।

প্রাথমিকভাবে, এই টেক্সটবক্সের ভিতরে কিছুই নেই, তাই এর অবস্থা খালি. ধরুন আপনি এটির ভিতরে হ্যালো টাইপ করা শুরু করেছেন, প্রতিটি কী স্ট্রোকের জন্য টেক্সটবক্সের অবস্থা পরিবর্তন হবে। প্রথমে এটি হবে “H”, তারপর “He”, তারপর “Hel” ইত্যাদি যতক্ষণ না এটি “Hello” হয়ে যায়।

এছাড়াও, লক্ষ্য করুন যে আপনি যখন টাইপ করছেন, আপনি আগের মান হারাচ্ছেন না। আপনি যদি "H" এর পরে "e" চাপেন তবে আপনি "He" পাচ্ছেন এবং শুধু "e" নয়। অন্য কথায় আপনি রাষ্ট্রকে হিসাবে ভাবতে পারেন স্মৃতি টেক্সটবক্সের।

একটি প্রতিক্রিয়া উপাদান রাষ্ট্রের প্রয়োজন.

আসুন এটি একটি উদাহরণের সাহায্যে বুঝতে পারি।

রাষ্ট্র ছাড়া কোডসানবক্স

এখানে আমরা একটি ক্লিক কাউন্টার কম্পোনেন্ট যা ইনক্রিমেন্ট বাটনে ক্লিক করার সংখ্যা প্রদর্শন করে।

আমরা একটি ব্যবহার করছি স্থানীয় পরিবর্তনশীল "কাউন্টার" ক্লিক গণনা রাখা.

যতবার আমরা ইনক্রিমেন্ট বোতামে ক্লিক করি, handleClick ফাংশন আহ্বান করা হবে। এই ফাংশনটি কাউন্টারের মান 1 দ্বারা বৃদ্ধি করবে এবং কনসোলে মানটি লগ করবে।

এগিয়ে যান, কোডস্যান্ডবক্স প্রিভিউতে ইনক্রিমেন্ট বোতামে ক্লিক করুন।

কিছুই ঘটেনি?

ভাল আমাদের যুক্তি সঠিক বলে মনে হচ্ছে. কনসোলে লগ করা মান (কোডস্যান্ডবক্স) প্রতিবার ক্লিক করার সময় সঠিকভাবে আপডেট হয়, কিন্তু কেন এই আপডেটটি UI-তে প্রতিফলিত হয় না?

এটা কারণ প্রতিক্রিয়া কাজ করে উপায়.

• স্থানীয় ভেরিয়েবলের পরিবর্তনগুলি পুনরায় রেন্ডারকে ট্রিগার করে না।
• রি-রেন্ডারের সময়, স্ক্র্যাচ থেকে একটি কম্পোনেন্ট তৈরি করা হয় অর্থাৎ একটি কম্পোনেন্টের ফাংশন (এই উদাহরণে এটি ClickCounter ফাংশন) আবার এক্সিকিউট করা হয়। যেহেতু ভেরিয়েবল (উদাহরণস্বরূপ, কাউন্টার) ফাংশনের স্থানীয়, তাদের পূর্ববর্তী মান হারিয়ে গেছে।

তাই কিভাবে আমরা উপাদান রেন্ডারের মধ্যে মান মনে রাখতে পারি?

হ্যাঁ, আপনি এটা ঠিক পেয়েছেন! এর সাহায্যে আমরা এটি করি রাজ্য ব্যবহার করুন হুক

ইউজ স্টেট হুক

useState হুক রাষ্ট্রকে সংরক্ষণ করতে এবং পুনরায় রেন্ডারকে ট্রিগার করার প্রক্রিয়া প্রদান করে।

এর ব্যবহার দেখি।

import React, { useState } from "react";
const state = useState(initialValue);

// OR

const state = React.useState(initialValue);

useState হুক একটি অ্যারে প্রদান করে যাতে দুটি আইটেম থাকে:

• A রাষ্ট্র পরিবর্তনশীল যেটি পুনরায় রেন্ডার করার সময় এর মান ধরে রাখে। UseState-এ পাস করা প্রাথমিক মানটি প্রথম রেন্ডারের সময় স্টেট ভেরিয়েবলে বরাদ্দ করা হয়।
• A সেটার ফাংশন যেটি স্টেট ভেরিয়েবল আপডেট করে এবং একটি রি-রেন্ডার ট্রিগার করে।

const state = useState(0);
const data = state[0];
const setData = state[1];

ব্যবহার অ্যারে ডি-স্ট্রাকচারিং , আমরা উপরের বিবৃতিগুলিকে একটি একক বিবৃতিতে রিফ্যাক্টর করতে পারি, যেমনটি নীচে দেখানো হয়েছে:

const [data, setData] = useState(0);

UseState-এ পাস করা প্রাথমিক মান শুধুমাত্র প্রথম রেন্ডারের সময় ব্যবহার করা হয়। পুনরায় রেন্ডারের জন্য, এটি উপেক্ষা করা হয়।

useState সঙ্গে কাউন্টার

এখন, useState হুক অন্তর্ভুক্ত করতে আগের কাউন্টার উদাহরণটি আপডেট করা যাক।

• যেহেতু আমাদের রি-রেন্ডারের মধ্যে কাউন্টার ভ্যালু দরকার, আসুন এটিকে একটি স্টেটে রূপান্তর করি।

const [counter, setCounter] = useState(0);

• হ্যান্ডেলক্লিক ফাংশনের ভিতরে সেট কাউন্টার কল করা হচ্ছে।

const handleClick = () => {
  setCounter(counter + 1);
  console.log(`%c Counter:${counter}`, "color:green");
};

setCounter ফাংশন কাউন্টার মান 1 দ্বারা আপডেট করবে এবং একটি পুনরায় রেন্ডার ট্রিগার করবে। যখন কম্পোনেন্টের ফাংশনটিকে পুনরায় রেন্ডার করার জন্য কল করা হয় তখন useState দ্বারা প্রত্যাবর্তিত স্টেট ভেরিয়েবলের আপডেট করা মান থাকবে।

আপডেট করা কোড সহ CodeSandbox ব্যবহার করে দেখুন। ইনক্রিমেন্ট বোতামে ক্লিক করুন এবং ইউজস্টেটের জাদু দেখুন।

UseState সহ Codesanbox

আপনি এটি একটি পুনরায় রেন্ডারে যাচাই করতে পারেন, কার্যকরী উপাদান ক্লিক কাউন্টার কনসোল লগগুলি দেখে আবার কল করা হয়। লগ "ClickCounter start" যা কম্পোনেন্টের শুরুতে যোগ করা হয়েছে প্রতিটি রেন্ডারে লগ করা হবে।

আপডেটার ফাংশন

ধরুন আমরা প্রতি ক্লিকে কাউন্টারের মান 4 করে বাড়াতে চাই।

const handleClick = () => {
  setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    console.log(`%c Counter:${counter}`, "color:green");
    };

অনুমান করুন যে কাউন্টারের প্রাথমিক মান হল 0। বোতামটি ক্লিক করার পরে আপনি কী দেখতে পাবেন?

আপডেটার ফাংশন ছাড়া

আপনি গণনা 4 হবে বলে আশা করেছিলেন? কিন্তু আপনি কেন এর পরিবর্তে 1 দেখতে পাচ্ছেন?

ক) প্রতিটি রেন্ডার একটি রাষ্ট্রের সাথে যুক্ত। সেই রাষ্ট্রের মান সেই রেন্ডারের জীবনকালের জন্য লক করা থাকে।

লক্ষ্য করুন যে handleClick ফাংশনের ভিতরের লগটি কাউন্টার মান 0 হিসাবে প্রিন্ট করে।

আপনি কতবার সেট কাউন্টার পদ্ধতিতে কল করুন না কেন, কাউন্টারের মান একই থাকে।

const handleClick = () => {
  setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);
    console.log(`%c Counter:${counter}`, "color:green");
    };

খ) যতক্ষণ না একটি ইভেন্ট হ্যান্ডলারের ভিতরের সমস্ত কোড নির্বাহ করা হয়, ততক্ষণ রিঅ্যাক্ট পুনরায় রেন্ডারকে ট্রিগার করবে না।

এই কারণে প্রতিটি সেট কাউন্টার কল একটি পৃথক রেন্ডার ট্রিগার করে না। পরিবর্তে প্রতিক্রিয়া একটি সারিতে এই সেটার ফাংশন যোগ করে। তারা সারিবদ্ধ ছিল সেই ক্রমে তাদের কার্যকর করে। সমস্ত বিবৃতি কার্যকর করার পরে রাজ্যে করা আপডেটগুলি পরবর্তী রেন্ডারে প্রতিফলিত হয়। একাধিক রাজ্য আপডেটের এই সারি হিসাবে পরিচিত হয় Batching. এটি প্রতিক্রিয়াকে আরও কার্যকরী হতে দেয়।

অতএব, এখানে আমরা 4টি ভিন্ন রেন্ডারের পরিবর্তে একটি একক রেন্ডার পাচ্ছি।

এই উদাহরণটি সহজ এবং আপনি নীচে দেখানো কোডটি আপডেট করে এই সমস্যাটি সমাধান করতে পারেন:

const handleClick = () => {
setCounter(counter + 4);
    console.log(`%c Counter:${counter}`, "color:green");
    };

কিন্তু যদি আপনার একটি ব্যবহারের ক্ষেত্রে থাকে যেখানে আপনি পরবর্তী রেন্ডারের আগে একাধিকবার রাজ্য আপডেট করতে চেয়েছিলেন।

সেখানেই _ আপডেটার _ ফাংশন কাজে আসে।

আমরা আপডেটার ফাংশনের সাথে পূর্ববর্তী উদাহরণটিকে নিম্নরূপ রিফ্যাক্টর করতে পারি:

const handleClick = () => {
  setCounter(prevCounter => prevCounter + 1);
    setCounter(prevCounter => prevCounter + 1);
    setCounter(prevCounter => prevCounter + 1);
    setCounter(prevCounter => prevCounter + 1);
    console.log(`%c Counter:${counter}`, "color:green");
    };

এখানে prevCounter ⇒ prevCounter + 1 আপডেটার ফাংশন প্রতিনিধিত্ব করে।

পূর্বে ব্যাখ্যা করা হয়েছে, এই আপডেটার বিবৃতিগুলিও সারিবদ্ধ (ব্যাচিং)।

আপডেটার ফাংশন একটি মুলতুবি/পূর্ববর্তী অবস্থা পায় যা এটি পরবর্তী অবস্থা গণনা করতে ব্যবহার করে।

নীচে কোডস্যান্ডবক্স আপডেটার ফাংশন যুক্ত করা হয়েছে। ইনক্রিমেন্ট বোতামে ক্লিক করার চেষ্টা করুন।

আপডেটার ফাংশন স্যান্ডবক্স

ইনিশিয়ালাইজার ফাংশন

নিচের উদাহরণটি দেখুন। এখানে আমরা স্টেটের প্রাথমিক মান পেতে getItems ফাংশনকে কল করছি।

import React from "react";
import { useState } from "react";
function ListItems() { 
  const getItems = () => { 
    console.log(`%c getItems called`, "color:hotpink");
    	return Array(50).fill(0); 
    }; 
  const [items, setItems] = useState(getItems()); 
    
    return ( 
    	<div className="card">
        <ul> {items.map((item, index) => 
        	( <li key={index}>Item {index + 1}		</li>))} 
        </ul> <button onClick={() => setItems([...items, 0])}>Add Item</button> 	</div> );
} 
export default ListItems;

এই ফাংশনটি আকার 50 সহ একটি অ্যারে তৈরি করে এবং অ্যারেটি শূন্য দিয়ে পূরণ করে। নীচের ছবিটি পড়ুন.

এই আইটেমগুলি তারপর পর্দায় প্রদর্শিত হয়.

সবকিছু ঠিক আছে বলে মনে হচ্ছে কিন্তু আমাদের এখানে একটি সমস্যা আছে।

ক্লিক করুন আইটেম যোগ করুন তালিকায় একটি নতুন আইটেম যোগ করতে বোতাম (আইটেমের তালিকার পরে অবস্থিত)। লগগুলি পর্যবেক্ষণ করুন।

ইনিশিয়ালাইজার ফাংশন ছাড়া

আপনি কি এখানে দেখতে সমস্যা?

আপনি যখনই একটি আইটেম যোগ করেন তখন লগ "getItems called" কনসোলে যুক্ত হয়৷ এর মানে হল যে এই ফাংশনটি প্রতিটি রেন্ডারে কল করা হচ্ছে।

মনে রাখবেন যে useState প্রথম রেন্ডারের পরে এটিতে পাস করা প্রাথমিক মানটিকে উপেক্ষা করে, তবে এখানে প্রাথমিক মানটি এখনও পুনরায় গণনা করা হচ্ছে। এটি ব্যয়বহুল হতে পারে যদি আমরা বড় অ্যারে তৈরি করি বা ভারী গণনা করি।

আমরা পাস করে এই সমস্যা সমাধান করতে পারেন প্রাপ্ত আইটেম একটি _ হিসাবে আরম্ভকারী _ ফাংশন।

এখন, কোডে একটি ছোট পরিবর্তন করা যাক।

const [items, setItems] = useState(getItems);

ইনিশিয়ালাইজার ফাংশন সহ

কোডস্যান্ডবক্সে কনসোল উইন্ডোটি দেখুন। লক্ষ্য করুন যে “getItems called” লগ শুধুমাত্র প্রথম রেন্ডারে প্রিন্ট করা হয়েছে। পরবর্তী আইটেম যোগ করা হলে এই লগ সেখানে নেই.

যদিও দুটি উদাহরণের মধ্যে কোন চাক্ষুষ পার্থক্য নেই, কর্মক্ষমতার দিক থেকে তারা ভিন্ন।

মনে রাখবেন যখন আপনার প্রাথমিক অবস্থার জন্য একটি ফাংশন প্রয়োজন, সর্বদা ফাংশনটি পাস করুন বা অন্য ফাংশনের ভিতরে ফাংশনটিকে কল করুন। সরাসরি ফাংশন কল করবেন না.

✅ const [items, setItems] = useState(getItems);
✅ const [items, setItems] = useState(() => getItems());
❌ const [items, setItems] = useState(getItems());

কতগুলো ইউজ স্টেট হুক আমার থাকতে পারে

আপনার একটি উপাদানের ভিতরে যতগুলি ইউজস্টেট হুক প্রয়োজন ততগুলি থাকতে পারে।

কোডস্যান্ডবক্স দেখুন

একাধিক ইউজ স্টেট হুক

নিচের কম্পোনেন্টটিতে তিনটি ভিন্ন অবস্থা রয়েছে - ব্যবহারকারীর নাম, পাসওয়ার্ড, KeepMeSignedIn।

ব্যবহারকারীর নামের মান আপডেট করার চেষ্টা করুন, KeepMeSignedIn। লগইন বোতামে ক্লিক করার সময় আপডেট হওয়া অবস্থাগুলি কনসোলে লগ ইন করা হয়।

হাইলাইট

• useState একটি রি-রেন্ডার ট্রিগার করার জন্য একটি প্রক্রিয়া প্রদান করে এবং পুনরায় রেন্ডারের মধ্যে স্থিতি বজায় রাখে।
• আপনি যখন প্রয়োজন তখন আপডেটার ফাংশন ব্যবহার করুন:
  • পূর্ববর্তী অবস্থার উপর ভিত্তি করে পরবর্তী অবস্থা গণনা করুন।
  • পরবর্তী রেন্ডারের আগে রাজ্যে একাধিক আপডেট সম্পাদন করুন।
• যদি একটি ফাংশন থেকে প্রাথমিক অবস্থা পাওয়া যায় - ইনিশিয়ালাইজার ফাংশন সিনট্যাক্স ব্যবহার করুন।
• একটি উপাদানের ভিতরে একাধিক useState হুক থাকতে পারে।

এই পোস্ট পছন্দ হয়েছে? অন্যদের সাথে শেয়ার করুন.
মূলত আমার ব্যক্তিগত ব্লগের জন্য লেখা- https://gauravsen.com/use-state-hook