lifting state up বা স্টেটকে উপরে নিয়ে যাওয়া, এটা হচ্ছে রিয়াক্টের বেস্ট ডিজাইন প্যাটার্নগুলোর মধ্যে একটা

লিফটং স্টেট আপ বলতে কি বুঝায় ?

রিয়াক্টে কোন স্টেট কে কম্পোনেন্টের লোকাল জায়গায় না রেখে সেটাকে লিফট করে প্যারেন্ট কম্পোনেন্ট এ নিয়ে যাওয়াকে লিফটিং স্টেট আপ বা স্টেট উপরে নিয়া যাওয়া বুঝায়।

লিফটিং স্টেট আপ কেন করতে হয়?

আমরা জানি যে, রিয়াক্ট কম্পোনেন্টের স্টেটগুলো সেই কম্পোনেন্টের ভিতর আইসোলেটেড থাকে, মানে তা হলো তার নিজস্ব কম্পোনেন্ট। সেই কম্পোনেন্ট একাধিকবার ব্যাবহার করা হলেও প্রতিটা ইউজে সে আলাদা আলাদা স্টেট মেন্টেইন করবে, কখনো একটা আরেকটার সাথে সিঙ্ক থাকবেনা। আবার এমনও হতে পারে যে কোন একটা কম্পোনেন্টে দুইটা বা তিনটা Sibling কম্পোনেন্ট আছে, যেমনঃ

const App = () => {
    return (
        <div>
            <Product />
            <Cart />
        </div>
    );
};
 
export default App;

এখানে App নামে একটা প্যারেন্ট কম্পোনেন্ট আছে, যার দুইটা চাইল্ড কম্পোনেন্ট হলো Product এবং Cart। Product এবং Cart এরা নিজেরা আবার Sibling

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

এই ক্ষেত্রেই কাজে লাগে lifting state up প্যাটার্ণ। আমরা Productকম্পোনেন্টের লোকাল স্টেটকে তাদের ইমিডিয়েট প্যারেন্ট কম্পোনেন্ট App এ নিয়ে আসতে পারি। এবং App থেকে Props পাস করার মাধ্যমে আমরা একই স্টেট Product এবং Cart দুটো কম্পোনেন্টেই পাঠাতে পারি।

Controlled and Uncontrolled Components

Controlled and Uncontrolled Components এটা সম্পূর্ন রিয়াক্টের একটা টার্ম,এটা কোন প্রোগ্রামিং এর টেকনিক্যাল টার্ম না।

Controlled Components

রিয়াক্টে Controlled Component বলতে বুঝায় যেসব কম্পোনেন্টের কনট্রোল সম্পুর্নভাবে প্যারেন্টের কাছে থাকে, মানে প্যারেন্ট তার নিজস্ব স্পেসে স্টেট ম্যানেজ করছে, এবং শুধু ডাটাগুলো Props এর মাধ্যমে চাইল্ডে পাঠিয়ে দিচ্ছে, এমন কম্পোনেন্ট কে রিয়াক্টে Controlled Component বলা হয়।

অর্থাৎ Controlled Component গুলো Props এর উপর নির্ভর করে।

UnControlled Components

যেসব রিয়াক্ট কম্পোনেন্ট তার নিজ লোকাল স্পেসে স্টেট নিয়ে সেই স্টেট দিয়ে কাজ করে,সেটা হলো UnControlled Component

মানে হলো সেই কম্পোনেন্টের উপর প্যারেন্টের কোন কনট্রোল নেই,সে তার নিজস্ব স্টেট ডাটার উপর নির্ভর করে, প্যারেন্টর Propsএর উপর নির্ভর করেনা।