✅ React কীভাবে জানে কোন কম্পোনেন্টের state ধরে রাখবে আর কোনটার রিসেট করবে?

কম্পোনেন্টগুলোর মধ্যে স্টেট আলাদা থাকে।

React-এর স্টেট ম্যানেজমেন্টের মূল বিষয় হলো, প্রতিটি কম্পোনেন্টের নিজস্ব স্টেট থাকে। যখনই কোনো কম্পোনেন্টের স্টেট পরিবর্তন হয়, তখন React সেই কম্পোনেন্টটিকে আবার রেন্ডার করে। কিন্তু কখনো কখনো React স্টেট ধরে রাখে (preserve) এবং কখনো রিসেট (reset) করে।

React UI tree-তে প্রতিটি কম্পোনেন্ট কোথায় আছে তার উপর ভিত্তি করে কোন স্টেট কোন কম্পোনেন্টের সেটা ট্র্যাক করে। আপনি চাইলে নির্ধারণ করতে পারেন, কোন সময়ে স্টেট ধরে রাখা হবে (preserve) আর কোন সময়ে সেটা রিসেট (reset) হবে।

আপনি যা শিখবেনঃ

• কখন React স্টেট ধরে রাখে আর কখন রিসেট করে
• কীভাবে আপনি জোর করে কোনো কম্পোনেন্টের স্টেট রিসেট করাতে পারেন
• কীভাবে key এবং component এর type স্টেট ধরে রাখা বা রিসেট করার উপর প্রভাব ফেলে

React state ধরে রাখে সেই কম্পোনেন্টের জন্য যেটি আগের রেন্ডারেও ছিল একই অবস্থানে (same position in the tree)।

📍 মানে হলো: JSX-এ কীভাবে লিখেছো সেটা না, বরং UI Tree-এর কাঠামোতে সেই কম্পোনেন্ট কোন “অবস্থানে” আছে সেটা React দেখে।

State is tied to a position in the render tree

🔁 যদি একই component থাকে একই জায়গায়, তাহলে state থাকে preserved:

{
  isFancy ? <Counter isFancy={true} /> : <Counter isFancy={false} />;
}

➡️ উপরের দুইটা <Counter /> আলাদা JSX লাইন হলেও React দেখে যে এটা দুই ক্ষেত্রেই একই পজিশনে আছে। তাই state মুছে না ফেলে ধরে রাখে।

❌ কিন্তু যদি একই জায়গায় আলাদা component আসে (যেমন <Counter /> vs <p>) তাহলে state মুছে যায়:

{
  isPaused ? <p>See you later!</p> : <Counter />;
}

➡️ এখানে <p> আর <Counter /> একে অপরের বদলে আসে। দুইটা আলাদা টাইপের component। তাই React আগেরটা (Counter) সরিয়ে দেয় এবং নতুনটা (p) তৈরি করে। ফলে Counter-এর state মুছে যায়।

🔁 এমনকি যদি wrapper tag-ও পাল্টে ফেলো (section vs div), তাহলে ভেতরের state-ও reset হয়:

{
  isFancy ? (
    <div>
      <Counter isFancy={true} />
    </div>
  ) : (
    <section>
      <Counter isFancy={false} />
    </section>
  );
}

➡️ এখানে <Counter /> তো একই, কিন্তু ওর parent tag পাল্টে গেছে — div আর section। তাই React ভাবে পুরো branch পাল্টে গেছে। পুরনোটা মুছে দিয়ে নতুনটা তৈরি করে। ফলে state রিসেট হয়।

❗ Pitfall: Component ফাংশন ভেতরে define করলে state ধরে রাখা যায় না:

function MyComponent() {
  function MyTextField() {
    const [text, setText] = useState('');
    ...
  }
 
  return <MyTextField />;
}

➡️ এখানে প্রতি রেন্ডারে MyTextField নতুন করে তৈরি হচ্ছে। তাই React ধরে নেয় এটা নতুন component — পুরোনো state মুছে যায়।

✅ সমাধান: সব কম্পোনেন্ট ফাংশন গুলো উপরে declare করো (বাইরে)।

🔑 শেষ কথা:

React-এর state কখন ধরে রাখবে, আর কখন রিসেট করবে তা নির্ভর করে:

• component এর টাইপ একই কিনা
• UI tree-তে তার অবস্থান একই কিনা

একই টাইপ + একই অবস্থান = state preserved
ভিন্ন টাইপ বা ভিন্ন অবস্থান = state destroyed