Resetting State at the Same Position

তুমি জানো তো, যখন কোনো কম্পোনেন্ট একই জায়গায় থাকে, রিয়াক্ট তার স্টেট ধরে রাখে যতক্ষণ সেই কম্পোনেন্টের অবস্থান পরিবর্তন না হয়। তবে, কখনো কখনো এমনও হতে পারে যে তুমি চাও একই পজিশনে থাকা কম্পোনেন্টের স্টেট রিসেট করুক, ঠিক যেমন নতুন কম্পোনেন্ট রেন্ডার হলে হয়।

এখন, এই কাজটা আমরা দুইটা ভিন্ন উপায়ে করতে পারিঃ

1. কম্পোনেন্টকে ভিন্ন পজিশনে রেন্ডার করে।
2. key দিয়ে কম্পোনেন্টকে স্পষ্টভাবে আলাদা আইডেন্টিটি দিয়ে।

Rendering a Component in Different Positions

এবার প্রথম উপায়টা দেখে নিই, যেখানে আমরা কম্পোনেন্টকে ভিন্ন পজিশনে রেন্ডার করব।

import { useState } from "react";
 
export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA ? <Counter person="Taylor" /> : <Counter person="Sarah" />}
      <button
        onClick={() => {
          setIsPlayerA(!isPlayerA);
        }}
      >
        Next player!
      </button>
    </div>
  );
}
 
function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);
 
  let className = "counter";
  if (hover) {
    className += " hover";
  }
 
  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>
        {person}'s score: {score}
      </h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

এখানে একটা স্কোরবোর্ড তৈরি করেছি যেখানে আমরা একজন প্লেয়ারের স্কোর গুনছি। প্রথমে প্লেয়ার Taylor-এর স্কোর কাউন্ট হবে। যখন তুমি Add one বাটনে ক্লিক করবে, স্কোর বাড়বে। নিচে আরেকটা বাটন আছে, Next player!, যেটাতে ক্লিক করলে প্লেয়ার চেঞ্জ হবে, Taylor থেকে Sarah হয়ে যাবে। কিন্তু তুমি খেয়াল করবে, স্কোর কিন্তু পরিবর্তন হচ্ছে না; Taylor-এর স্কোর যেখানে ছিলো, সেখানেই আছে, কারণ কম্পোনেন্টটি একই পজিশনে আছে, তাই রিয়াক্ট তার স্টেট ধরে রেখেছে।

স্টেট রিসেট করা: একই কোডের পরিবর্তন

এখন আমরা যদি চেয়েছিলাম যে, প্লেয়ার চেঞ্জ হলেই স্কোর রিসেট হবে, তাহলে কম্পোনেন্টকে আলাদা পজিশনে রেন্ডার করতে হবে। এটা আমরা এমনভাবে করতে পারিঃ

{
  isPlayerA && <Counter person="Taylor" />;
}
{
  !isPlayerA && <Counter person="Sarah" />;
}

এই অবস্থায়, যখন isPlayerA false হবে, তখন উপরের কম্পোনেন্ট রেন্ডার হবে না এবং নিচের কম্পোনেন্ট রেন্ডার হবে। এক্ষেত্রে, প্রতিটা কম্পোনেন্ট আলাদা আলাদা জায়গায় রেন্ডার হচ্ছে। এক জায়গায় যখন কিছু রেন্ডার হবে না, তখন সেটা আসলে null রিটার্ন করছে, আর অন্য জায়গায় নতুন কম্পোনেন্ট রেন্ডার হচ্ছে। এজন্য রিয়াক্ট ধরে নিচ্ছে, কম্পোনেন্ট বদলাচ্ছে, এবং স্টেট রিসেট হচ্ছে।

Resetting State with a key

তুমি কি জানো, key প্রপস দিয়ে তুমি খুব সহজেই কম্পোনেন্টের স্টেট রিসেট করতে পার? আমরা যখন লিস্ট রেন্ডার করার সময় key প্রপস ব্যবহার করেছিলাম, তখনও লক্ষ্য করেছিলে যে প্রতিটি এলিমেন্টকে আলাদা চিহ্ন দিয়ে আলাদা করে রাখতে হয়। ঠিক একইভাবে, যদি তুমি key প্রপস ব্যবহার করো, তাহলে রিয়াক্ট প্রতিটা কম্পোনেন্টকে আলাদা হিসেবে দেখবে।

তাহলে আগের উদাহরণটাই যদি নাও, এবং শুধু key যোগ করো:

{
  isPlayerA ? (
    <Counter key="Taylor" person="Taylor" />
  ) : (
    <Counter key="Sarah" person="Sarah" />
  );
}

এখানে, key দিয়ে তুমি প্লেয়ারদের আলাদা আইডেন্টিটি দিচ্ছো। এর ফলে, রিয়াক্ট প্রতিটা প্লেয়ারকে আলাদা কম্পোনেন্ট হিসেবে দেখছে এবং যখন তুমি প্লেয়ার চেঞ্জ করবে, তখন নতুন key এর জন্য রিয়াক্ট পুরনো স্টেট ধরে রাখবে না, বরং নতুন স্টেট দিয়ে শুরু করবে। তাই এবার তুমি Taylor থেকে Sarah-তে গেলে স্কোর শূন্য হয়ে যাবে, কারণ নতুন key মানে নতুন কম্পোনেন্ট।

সহজ ভাবে বললে

এটা ভাবো, তুমি যদি দুটি আলাদা স্কোরকার্ড তৈরি করো, যেখানে Taylor এবং Sarah দুজনের আলাদা আলাদা স্কোর থাকছে। যখন তুমি Taylor থেকে Sarah-তে সুইচ করো, এটা হচ্ছে যেন Taylor-এর স্কোরকার্ড সরিয়ে Sarah-এরটা বসিয়ে দিলে। আর তুমি key ব্যবহার করলে, এটা রিয়াক্টকে বলছো, "দেখো, এইটা একেবারে নতুন স্কোরকার্ড, আগেরটার সঙ্গে এর সম্পর্ক নেই।"

এখন তুমি যখন প্লেয়ার চেঞ্জ করবে, প্রতিবার স্টেট রিসেট হবে, কারণ রিয়াক্ট ধরে নেবে এটা নতুন কিছু।

এইভাবেই তুমি সহজে একই পজিশনে থাকা কম্পোনেন্টের স্টেট রিসেট করতে পারো!

আচ্ছা, তাহলে আমরা আরও কিছু বিশদ যোগ করি, যেন বিষয়টা আরও পরিষ্কার হয়। একটু ভাবো, তুমি যখন রিয়াক্টে কাজ করছো, তখন স্টেট রিসেট করা খুব গুরুত্বপূর্ণ হয়, বিশেষত যখন তুমি চাও কিছু পুরনো ডাটা মুছে গিয়ে নতুন ডাটা প্রদর্শিত হোক। এখানে কিছু অতিরিক্ত ধারণা এবং কৌশল নিয়ে আলোচনা করছি, যা তোমাকে এই বিষয়টা আরও ভালোভাবে বুঝতে সাহায্য করবে।

কেন স্টেট রিসেট প্রয়োজন?

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

এটা তুমি হয়তো ছোট একটা ফিচার ভাবছো, কিন্তু অ্যাপ্লিকেশন ব্যবহারকারীর অভিজ্ঞতা (UX) উন্নত করার জন্য এই কৌশলটা খুব গুরুত্বপূর্ণ।

key এর আরও গভীর ব্যাখ্যা

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

যেমন, ধরো তোমার কাছে নিচের মতো লিস্ট আছে:

<ul>
  <li key="1">Item 1</li>
  <li key="2">Item 2</li>
  <li key="3">Item 3</li>
</ul>

এখানে, রিয়াক্ট জানে প্রতিটা আইটেম আলাদা, কারণ তাদের আলাদা key আছে। ঠিক একইভাবে, যদি key প্রপস কম্পোনেন্টে ব্যবহার করো, যেমন Taylor এবং Sarah-এর উদাহরণে, তখন রিয়াক্ট ধরে নেয় এই কম্পোনেন্টগুলোও আলাদা, এবং তাদের স্টেটও আলাদা।

মজার উদাহরণ: নতুন খাতা খুলে ফেলা

তুমি যদি key ব্যবহার করো, সেটা অনেকটা নতুন খাতা খোলার মতো। প্লেয়ার Taylor-এর জন্য তুমি একটা খাতা খুলেছো, যেখানে তার সব স্কোর লেখা হচ্ছে। কিন্তু যখন তুমি প্লেয়ার চেঞ্জ করো (যেমন Sarah-তে), তখন নতুন একটা খাতা খুলছো। আর সেই খাতা তো একেবারে ফাঁকা! তাই স্কোরও শূন্য থেকে শুরু হচ্ছে।

কিন্তু যদি তুমি key ব্যবহার না করো, তাহলে রিয়াক্ট ভাবে যে এই কম্পোনেন্টগুলো একই, অর্থাৎ একই খাতাতেই লিখতে থাকবে। এজন্যই স্কোর রিসেট হয় না।

আরও একটি উদাহরণ যোগ করা যাক

ধরো তুমি একটি টাস্ক ম্যানেজমেন্ট অ্যাপ তৈরি করছো। সেখানে ইউজাররা বিভিন্ন ক্যাটাগরির টাস্ক যোগ করে। তুমি চাও যখন তারা ক্যাটাগরি বদলায়, তখন সেই ক্যাটাগরির টাস্কগুলোর স্টেট রিসেট হয়ে নতুন তালিকা দেখাবে। key ব্যবহার করে তুমি সহজেই এটা করতে পারবে।

{
  isCategoryA ? (
    <TaskList key="CategoryA" category="Work" />
  ) : (
    <TaskList key="CategoryB" category="Personal" />
  );
}

এখানে তুমি দেখছো, প্রতিটি ক্যাটাগরির জন্য আলাদা key প্রপস ব্যবহার করা হয়েছে। সুতরাং, ইউজার যখন ক্যাটাগরি বদলায়, টাস্কের তালিকা রিসেট হয়ে যাবে, এবং নতুন ক্যাটাগরির জন্য নতুন স্টেট তৈরি হবে।

গুরুত্বপূর্ণ জিনিস মাথায় রাখার জন্য

• key এর অনন্যতা: key প্রপসের একটি মূল শর্ত হলো, প্রতিটি key অবশ্যই ইউনিক হতে হবে। তুমি একই key ব্যবহার করলে রিয়াক্ট বিভ্রান্ত হতে পারে, এবং কম্পোনেন্টের স্টেট ঠিকমতো রিসেট হবে না।
• বড় প্রোজেক্টে স্টেট ম্যানেজমেন্ট: তোমার প্রোজেক্ট যদি বড় হয়, এবং অনেক কম্পোনেন্ট থাকে, তাহলে key ব্যবহার করে প্রতিটি কম্পোনেন্টের স্টেট ঠিকভাবে ম্যানেজ করা খুবই জরুরি হয়ে পড়ে। কারণ, রিয়াক্ট যখন কাজ করে, তখন সে দেখে কোন কম্পোনেন্ট নতুন, কোনটি পুরোনো, সেটার উপর ভিত্তি করে সে কম্পোনেন্টগুলো রিসাইকেল করে। key না থাকলে, পুরোনো স্টেট ব্যবহার হয়ে যেতে পারে।

উপসংহার

এইভাবে তুমি কম্পোনেন্টের স্টেট রিসেট করতে পারো, এবং এতে তোমার অ্যাপ্লিকেশন আরও কার্যকর এবং ব্যবহারবান্ধব হয়ে উঠবে। আর key এর মতো ছোট্ট একটা প্রপস দিয়ে তুমি অনেক বড় সমস্যার সমাধান করতে পারো।

তাহলে, এখন থেকে যখন তুমি প্লেয়ার চেঞ্জ করবে বা কোনো ফর্ম রিসেট করবে, মনে রাখবে যে key এবং কম্পোনেন্টের পজিশন কতটা গুরুত্বপূর্ণ!