জর্ডান ওয়াল্ক এবং React: কিভাবে কম্পোনেন্টরা UI আর্কিটেকচার বদলে দিল

জর্ডান ওয়াল্ক কে, এবং কেন React গুরুত্বপূর্ণ\n\nজর্ডান ওয়াল্ক একজন সফটওয়্যার ইঞ্জিনিয়ার, যিনি Facebook-এ কাজ করার সময় React তৈরি করে খ্যাতি পান। React-এর আগ পর্যন্ত, ফ্রন্টএন্ডগুলো প্রায়শই পেজ, টেমপ্লেট, এবং HTML, CSS, JavaScript কে সিঙ্ক রাখার জন্য তৈরি হওয়া বাড়তে থাকা “গ্লু কোড”-এর উপর ভিত্তি করত। ওয়াল্কের মূল ধারণা ছিল মডেল উল্টে দেওয়া: UI-কে এমন ডকুমেন্ট হিসেবে নয় যা সময়ের সঙ্গে প্যাচ করতে হয়, বরং ছোট, পুনঃব্যবহারযোগ্য কম্পোনেন্টের একটি ট্রি হিসেবে ভাবুন যা বড় ফিচারে কম্পোজ করা যায়।\n\n### বদল: টেমপ্লেট থেকে কম্পোনেন্টে\n\nএটি শুধু একটি নতুন লাইব্রেরি ছিল না—এটি UI কাজ নিয়ে ভাবার একটি নতুন উপায় ছিল। একটি কম্পোনেন্ট একটি ইন্টারফেসের অংশকে প্রয়োজনীয় লজিক ও স্টেটের সঙ্গে বন্ড করে, এবং তারপর বাকি অ্যাপের কাছে একটি পরিষ্কার ইন্টারফেস (props) উন্মোচন করে। এতে UI এমন লাগে যেন লেগো ইট দিয়ে তৈরি—একটি নাজুক পেজ সম্পাদনার বদলে।\n\nReact গুরুত্বপূর্ণ হয়ে উঠেছিল কারণ এটি দলের কাজকে সাহায্য করেছিল:\n\n- পূর্বানুমেয় অংশগুলো কম্পোজ করে ফিচার তৈরি করা\n- DOM ম্যানুয়ালি আপডেট করার বদলে ডেটা পরিবর্তন দেখায় যা আপনি দেখতে পান\n- পরিষ্কার সীমা এবং পুনঃব্যবহারযোগ্য প্যাটার্ন দিয়ে কোডবেস স্কেল করা সহজ করে তোলা\n\n### এই পোস্টে কি থাকবে (কম জার্গন নিয়ে)\n\nআমরা সেই ব্যবহারিক ধারণাগুলো দেখাবো যেগুলো React কে প্রভাবশালী করেছিল:\n\n- কম্পোজিশন: কিভাবে কম্পোনেন্টগুলো একসাথে জোড়া লাগায় এবং রক্ষণাবেক্ষণযোগ্য থাকে\n- ডিক্লারেটিভ UI (JSX সহ): আপনি যে UI চাইছেন তা বর্ণনা করা, তা আঁকার ধাপ নয়\n- স্টেট-চালিত রেন্ডারিং এবং ওয়ান-ওয়ে ডেটা ফ্লো: আপডেটগুলোকে পূর্বানুমেয় রাখা\n- ভার্চুয়াল DOM ও রিকনসিলিয়েশনের উচ্চ-স্তরের দৃশ্য (কোনো মিথিক ছাড়া)\n- কিভাবে এই ধারণাগুলো ফ্রন্টএন্ড আর্কিটেকচার, দলের ওয়ারফ্লো, এবং দীর্ঘমেয়াদি রক্ষণাবেক্ষণ পরিবর্তন করলো\n\nফ্রেমওয়ার্ক-এক্সপার্ট হওয়ার দরকার নেই। লক্ষ্য হলো মানসিক মডেলটি স্পষ্ট করা—যাতে আপনি ভাল React প্যাটার্ন চিনতে পারেন, সাধারণ ভুল ধারণা এড়াতেন, এবং একই নীতি React ব্যতীতও প্রয়োগ করতে পারেন।\n\n## React যে ফ্রন্টএন্ড সমস্যাগুলো সমাধান করতে এসেছিল\n\nReact-এর আগ পর্যন্ত অনেক দল টেমপ্লেট, jQuery-শৈলীর DOM ম্যানিপুলেশন, এবং বাড়তে থাকা “যখন X ঘটল, তখন Y আপডেট করো” নিয়মগুলো কেটে কেটে সমৃদ্ধ ইন্টারফেস তৈরি করত। এটা কাজ করত—যতক্ষণ UI বেশ সাদামাটা ছিল।\n\n### ব্যথার বিন্দু #1: ম্যানুয়াল DOM আপডেট যা সারা সময় সঙ্গত থাকে না\n\nএকটি সাধারণ প্যাটার্ন ছিল: ডেটা নিয়ে আসো, HTML রেন্ডার করো, তারপর ইভেন্ট হ্যান্ডলার অ্যাটাচ করো যা সরাসরি DOM পরিবর্তন করে। স্টেট বদলালে (নতুন আইটেম, ভ্যালিডেশন এরর, টগল) তখনই কারো মনে রাখতে হত কোথায় কোথায় নির্ভরতা আছে।\n\nএর ফলে বাগ তৈরি হত, যেমন:\n\n- হেডারের কাউন্টার আপডেট হয় কিন্তু সাইডবারে নয়।\n- একটি লোডিং স্পিনার এক প্যানেলে অদৃশ্য হয় কিন্তু অন্যটায় আটকে থাকে।\n- একটি “এডিট” ফর্ম সেভ করার পরে পুরনো ভ্যালু দেখায়।\n\n### ব্যথার বিন্দু #2: ফিচার জুড়ে ডুপ্লিকেটেড UI লজিক\n\nস্ক্রীন বাড়ার সাথে সাথে একই ব্যবসায়িক নিয়ম বহু হ্যান্ডলারে নকল হয়ে যায়: “ফিল্ড ফাঁকা হলে বোতাম ডিসেবল করো”, “অরিড অন আইটেম হাইলাইট করো”, “কোন ফলাফল না থাকলে এম্পটি স্টেট দেখাও।” যখন রিকোয়্যারমেন্ট বদলে, আপনাকে অন্যমনস্ক ফাইল খুঁজে সব কপি আপডেট করতে হত।\n\n### কেন UI জটিলতা ডেটা জটিলতার চেয়ে দ্রুত বাড়ে\n\nডেটা কয়েকটি পরিষ্কার কাঠামোর মাধ্যমে মডেল করা যায়: পোস্টের তালিকা, ইউজার অবজেক্ট, ফিল্টার সেট। কিন্তু UI বিভিন্ন কম্বিনেশন যোগ করে: লোডিং বনাম লোডেড, এরর বনাম সফলতা, পড়া বনাম অনপড়া, এডিটিং বনাম ভিউ, ফিল্টারেড বনাম আনফিল্টারেড—প্রায়ই একসাথে।\n\n### দরকার: যখন ডেটা বদলে যায় তখন পূর্বানুমেয় রেন্ডারিং\n\nএকটি নিউজ ফিড কল্পনা করুন:\n\n- আপনি 20টি পোস্ট লোড করেন।\n- একটি “নতুন পোস্ট” ব্যানার আসে।\n- আপনি একটি পোস্ট লাইক করেন, আরেকটিকে পঠিত মার্ক করেন, এবং একটি ফিল্টার প্রয়োগ করেন।\n\n"UI হল স্টেটের একটি ফাংশন"—এমন একটি নিয়ম ছাড়া আপনি অনেকগুলো DOM এডিট সমন্বয় করতে থাকবেন যা একে অপরের সঙ্গে সংঘাত করতে পারে। React-এর লক্ষ্য ছিল আপডেটগুলো নির্ভরযোগ্য করা: ডেটা/স্টেট বদলাও, এবং UI প্রতিটি বার মিলিয়ে রি-রেন্ডার করে।\n\n## কম্পোনেন্ট মডেল: UI-কে ছোট, পুনঃব্যবহারযোগ্য টুকরো হিসেবে দেখা\n\nএকটি কম্পোনেন্ট হলো UI-এর একটি ছোট টুকরো যাকে আপনি নাম দিতে পারেন, পুনঃব্যবহার করতে পারেন, এবং নিজেই যুক্তি করে বোঝাতে পারেন। সাধারণ ভাষায়: একটি কম্পোনেন্ট নেয় ইনপুট, এবং দেয় সেই ইনপুটের জন্য UI কেমন হওয়া উচিত।\n\nওই “ইনপুট → আউটপুট” ফ্রেমিংই কম্পোনেন্ট মডেলের মূল। একটি স্ক্রীনকে এক বড় টেমপ্লেট হিসেবে না দেখে উদ্দেশ্যমূলক বিল্ডিং ব্লকগুলোতে ভাগ করা হয়—বাটন, কার্ড, মেন্যু, ফর্ম, এবং পুরো সেকশন—এবং সেগুলো একসাথে অ্যাসেম্বল করা হয়।\n\n### Props: যা আপনি দেখতে চান তা নির্ধারণ করে\n\nReact-এ সবচেয়ে সাধারণ ইনপুট হলো props (প্রোপার্টিজের সংক্ষিপ্ত রূপ)। Props হলো এমন মান যা আপনি একটি কম্পোনেন্টে পাস করেন সেটি কনফিগার করার জন্য: টেক্সট, সংখ্যা, ফ্ল্যাগ, ইভেন্ট হ্যান্ডলার, বা এমনকি অন্য UI।\n\nআউটপুট হলো কম্পোনেন্ট যে UI রেন্ডার করে। যদি props বদলে যায়, কম্পোনেন্ট ভিন্ন আউটপুট দিতে পারে—আপনাকে DOM আপডেট কোথায় করতে হবে খুঁজে বের করতে হবে না।\n\nউদাহরণস্বরূপ, একটি Button কম্পোনেন্ট label, disabled, এবং onClick মতো props পেতে পারে। একটি UserCard পেতে পারে name, avatarUrl, এবং status। আপনি কম্পোনেন্টের ইন্টারফেস (তার props) পড়তে পারেন ঠিক যেমনটি একটি প্রোডাক্ট স্পেস পড়ার মতো: “এই UI-কে সঠিকভাবে রেন্ডার করতে কি দরকার?”\n\n### পুনঃব্যবহার এবং সামঞ্জস্য: একবার বানাও, সবখানে ব্যবহার করো\n\nUI-কে কম্পোনেন্টে ভাঙা দ্রুতই ফল দেয়:\n\n- পুনঃব্যবহার: একই Modal, Input, বা Dropdown বহু পেজে ব্যবহার করা যায়।\n- সামঞ্জস্য: শেয়ার করা কম্পোনেন্ট একরকম লুক-এন্ড-ফিল এবং আচরণ (ভ্যালিডেশন, স্পেসিং, অ্যাক্সেসিবিলিটি) নিশ্চিত করে, প্রতিটি পেজ আলাদাভাবে নতুন করে তৈরি না করার বদলে।\n- দ্রুত পরিবর্তন: কম্পোনেন্ট একবার আপডেট করলে যেখানে যেখানে ব্যবহৃত হয়েছে সবখানেই প্রভাব পড়ে।\n\nএটি পেজ-প্রতি মার্কআপ কপি-পেস্ট করার পর থেকে বিশাল বদল। কম্পোনেন্টগুলো ডুপ্লিকেশনকে অনাবশ্যক বলে মনে করায়—এবং শেষমেষ গ্রহণযোগ্য হিসেবে নির্ধারণ করে।\n\n### মানসিক মডেল পরিবর্তন: টুকরো ভাবুন\n\nReact আপনাকে উৎসাহ দেয় সিস্টেম ডিজাইন করার মতভাবে: কম্পোজেবল অংশ হিসেবে। একটি “চেকআউট পেজ” হয়ে ওঠে কম্পোনেন্টের ট্রি—CheckoutPage যার মধ্যে OrderSummary, ShippingForm, এবং PaymentMethod আছে। প্রতিটি অংশের স্পষ্ট ইনপুট ও দায়িত্ব থাকে।\n\nএই পরিবর্তন—কম্পোনেন্ট-ফার্স্ট ভাবে চিন্তা করা—React কেন ফ্রন্টএন্ড আর্কিটেকচারে পরিবর্তন এনেছে তার একটি বড় কারণ। এটা দলগুলিকে একটি ভাগ করা উন্নয়ন এবং ডিজাইন ইউনিট দিল: কম্পোনেন্ট।\n\n## ডিক্লারেটিভ UI এবং JSX: ভিউ বর্ণনা করা\n\nReact-এর সবচেয়ে বড় মানসিক বদল হলো ডিক্লারেটিভ UI: আপনি একটি দেয়া স্টেটের জন্য ইন্টারফেস কেমন হওয়া উচিত তা বর্ণনা করেন, এবং React সেই স্টেট বদলালে পেজ আপডেট করে দেয়।\n\nহাতিয়ে-মেনে এলিমেন্ট খোঁজা, টেক্সট বদলানো, ক্লাস টগল করা, এবং DOM সিঙ্ক রাখার বদলে আপনি UI-র “আকৃতি” নিয়ে মনোযোগ রাখেন। যখন ডেটা বদলায়, UI আবার বর্ণিত হয়, এবং React দরকারি সবচেয়ে ছোট সেটের পরিবর্তন নির্ণয় করে করে দেয়।\n\n### JSX: স্ট্রাকচার প্রকাশ করার একটি পাঠযোগ্য উপায়\n\nJSX হলো একটি সুবিধাজনক উপায় কম্পোনেন্ট স্ট্রাকচার লেখার জন্য এমন সিনট্যাক্স যা JavaScript-এর ভিতরে HTML-এর মতো দেখায়। এটি নতুন একটি টেমপ্লেটিং ভাষা নয় যা সম্পূর্ণ আলাদা করে শেখা দরকার; এটি একটি শর্টহ্যান্ড যে “এই কম্পোনেন্ট এই ট্রি ওপুট করে”—এবং মার্কআপ ও সেই মার্কআপ নিয়ন্ত্রণ করা লজিক একসাথে থাকে, যা কম্পোনেন্টকে পৃথকভাবে বুঝতে সহজ করে।\n\n### ডিক্লারেটিভ বনাম ইম্পেরেটিভ (সংক্ষেপে তুলনা)\n\nইম্পেরেটিভ কোড কিভাবে UI আপডেট করতে হবে তা ধাপে ধাপে বলে:\n\njs\n// Imperative: manually keep the DOM in sync\nfunction setLoggedIn(isLoggedIn) {\n const el = document.querySelector('#status');\n el.textContent = isLoggedIn ? 'Welcome back' : 'Please sign in';\n el.classList.toggle('ok', isLoggedIn);\n el.classList.toggle('warn', !isLoggedIn);\n}\n\n\nডিক্লারেটিভ কোড কন্ট্রোল করে এই স্টেটের জন্য UI কেমন হওয়া উচিত:\n\njsx\nfunction Status({ isLoggedIn }) {\n return (\n \u003cp className={isLoggedIn ? 'ok' : 'warn'}\u003e\n {isLoggedIn ? 'Welcome back' : 'Please sign in'}\n \u003c/p\u003e\n );\n}\n\n\n### কেন দলগুলো এটি পছন্দ করে\n\nকারণ রেন্ডারিং একটি খাঁটি বর্ণনা হিসেবে প্রকাশ করা হয়, কম্পোনেন্টগুলো সাধারণত আরও পাঠযোগ্য, রিভিউ করা সহজ, এবং রিফ্যাক্টর করা সহজ হয়। ডিজাইনার, প্রোডাক্ট-মাইন্ডেড ইঞ্জিনিয়ার, এবং নতুন সহকর্মীরা প্রায়ই JSX অন্বেষণ করে DOM ম্যানিপুলেশন বা ইভেন্ট হ্যান্ডলার খুঁজে বেড়ানো ছাড়াই বুঝে নিতে পারেন।\n\nএই স্পষ্টতা সহযোগিতা উন্নত করে: UI সিদ্ধান্তগুলো এক জায়গায় দৃশ্যমান থাকে, এবং পরিবর্তনগুলো অন্যান্য অংশে অদৃশ্য সাইড-ইফেক্ট তৈরি করার সম্ভাবনা কমায়।\n\n## স্টেট-চালিত রেন্ডারিং এবং ওয়ান-ওয়ে ডেটা ফ্লো\n\n"স্টেট" হল সহজভাবে সেই ডেটা যা ব্যবহারকারীর ইন্টারঅ্যাকশনের সময় পরিবর্তিত হতে পারে। এটা হতে পারে সার্চ বক্সের বর্তমান টেক্সট, মেন্যু খোলা আছে কিনা, কার্টের আইটেম, বা নেটওয়ার্ক রিকোয়েস্টের ফল। যদি এটা পরিবর্তিত হতে পারে এবং স্ক্রীনকে প্রতিফলিত করা উচিত, তবে সেটা স্টেট।\n\n### স্টেট-চালিত রেন্ডারিং: UI ডেটার অনুসরণ করে\n\nReact-এর মূল চাল হলো রেন্ডারিংকে স্টেটের ফলাফল হিসেবে ট্রীট করা, ম্যানুয়াল DOM ধাপের একটি সিকোয়েন্স হিসেবে নয়। আপনি একটি স্টেটের জন্য UI কেমন হওয়া উচিত তা বর্ণনা করেন। স্টেট আপডেট হলে React সংশ্লিষ্ট অংশগুলো আবার রেন্ডার করে।\n\nএই মানসিক মডেল "একটি এলিমেন্ট খুঁজে তারপর তার টেক্সট আপডেট করো, তারপর এই ক্লাসটোগল করো"—এর থেকে আলাদা। বরং আপনি স্টেট আপডেট করেন, এবং UI সেই স্টেট থেকে স্বাভাবিকভাবে আপডেট হয়।\n\n### ওয়ান-ওয়ে ডেটা ফ্লো: কম অপ্রত্যাশ্য, সহজ ডিবাগিং\n\nওয়ান-ওয়ে ডেটা ফ্লো অর্থ:

\n- একটি প্যারেন্ট কম্পোনেন্ট ডেটা নিচে পাঠায় props-এ।\n- চিলড্রেন কলব্যাক কল করে পরিবর্তনের অনুরোধ করে।\n- স্টেট একটি পরিষ্কার মালিকে থাকে (প্রায়শই সেই কম্পোনেন্টই যেটা ফিচার সমন্বয় করে)।\n\nএতে অপ্রত্যাশ্যতা কমে কারণ আপনি আপডেটের পথ অনুসরণ করতে পারেন: একটি ইভেন্ট ঘটে, স্টেট এক জায়গায় বদলে যায়, এবং UI সেই নতুন স্টেট থেকে রেন্ডার করে। কোথায় মান পরিবর্তিত হলো—এই জটিল প্রশ্ন কমে যায়।\n\n### একটি ছোট দৃশ্যকল্প: বোতামের ক্লিক কাউন্ট আপডেট করে\n\n\n\nএখানে, স্টেট। বোতামে ক্লিক করলে -এর মাধ্যমে স্টেট আপডেট হয়। React তারপর রেন্ডার করে এবং প্যারাগ্রাফ নতুন সংখ্যা দেখায়। আপনি কখনই সরাসরি DOM এ “এডিট” করেন না।\n\nএটাই ফিল্টার করা তালিকা (স্টেট = ফিল্টার টেক্সট, UI = ফিল্টার করা আইটেম) বা ফর্ম ভ্যালিডেশন (স্টেট = ফিল্ড ভ্যালু ও এরর, UI = মেসেজ) পর্যন্ত স্কেল করে। ডেটা আগে বদলায়; ভিউ শুধু ফলাফল।\n\n## রিকনসিলিয়েশন এবং ভার্চুয়াল DOM (উচ্চ-স্তরের দৃশ্য)\n\nReact-এর মূল ভাবনা হলো “পেজ দ্রুত আবার আঁক” নয়। বরং: , এবং যখন স্টেট বদলায়, এবং —এই দুটির তুলনা করে শুধুমাত্র যে অংশগুলো বদলাতে হবে সেগুলো আপডেট করা।\n\n### সম্পূর্ণভাবে পুনরায় লিখার বদলে UI সংস্করণগুলি তুলনা করা\n\nযখন একটি কম্পোনেন্টের স্টেট বা প্রপস বদলায়, React আপনার কম্পোনেন্টগুলোকে আবার কল করে একটি নতুন UI বর্ণনা তৈরি করে। এটাকে ভাবুন দুটো স্ন্যাপশট নেওয়ার মতো:\n\n- স্ন্যাপশট A: আগের UI কেমন ছিল\n- স্ন্যাপশট B: এখন UI কেমন হওয়া উচিত\n\nReact DOM মুছে ফেলে সবকিছু পুনর্নির্মাণ করার বদলে A থেকে B-তে যাওয়ার জন্য সবচেয়ে ছোট DOM অপারেশন সেট নির্ণয় করার চেষ্টা করে।\n\n### "ভার্চুয়াল DOM" মানে কি (হাইপ ছাড়া)\n\n“ভার্চুয়াল DOM” হচ্ছে React-এর ইন-মেমরি প্রতিনিধি—UI-এর একটি হালকা ওজনের ট্রি যা এলিমেন্ট এবং কম্পোনেন্ট আউটপুট বর্ণনা করে। এটা ব্রাউজারের একটি দ্বিতীয় DOM নয় বা কোনও দ্রুত DOM নয়—এটি এমন একটি ডেটা স্ট্রাকচার যাকে React দক্ষভাবে পরিদর্শন ও তুলনা করতে পারে।\n\n### রিকনসিলিয়েশন: কি বদলেছে নির্ণয় করা\n\n হলো আগের ভার্চুয়াল ট্রি আর নতুন ট্রির মধ্যে কি বদলেছে তা নির্ণয় করার প্রক্রিয়া। React দ্রুত করতে এমন হিউরিস্টিক ব্যবহার করে, যেমন:\n\n- বিভিন্ন ধরনের এলিমেন্টগুলো আলাদা হিসেবে ধরা হয় (একটি একটি নয়)\n- কী (keys) তালিকার আইটেমগুলো শনাক্ত করতে সাহায্য করে যাতে React রেন্ডারের মধ্যেই “একই আইটেম” মিলিয়ে নিতে পারে\n\nReact কি বদলেছে তা জানার পরে, এটি বাস্তব DOM-এ লক্ষ্যভিত্তিক আপডেট প্রয়োগ করে।\n\n### পারফরম্যান্স সম্পর্কে ব্যবহারিক নোট\n\nএটা জাদু নয়। পারফরম্যান্স নির্ভর করে প্যাটার্নগুলোর ওপর: স্থিতিশীল কী, অনাবশ্যক রি-রেন্ডার এড়ানো, কম্পোনেন্ট কাজ ছোট রাখা, এবং রেন্ডারিংয়ের সময়ে ব্যয়বহুল গণনা না করা। React DOM চূর্ণ চাপ কমাতে পারে, কিন্তু ই এখনও নির্ধারণ করে অ্যাপ কতটা মসৃণ লাগবে।\n\n## স্কেল করা যায় এমন UI কম্পজিশন প্যাটার্নগুলো\n\nReact-এর সবচেয়ে বড় স্কেলিং টূকটিক নেই ফিচার বা ফ্ল্যাগ—এটি কম্পোজিশন: কম্পোনেন্টগুলোকে নেস্ট করে, প্রপস পাঠিয়ে, এবং ব্যবহার করে একটি কম্পোনেন্টকে অন্যান্য UI আচ্ছাদিত করার মাধ্যমে স্ক্রীন তৈরি করা।\n\nযখন দলগুলো কম্পোজিশনে ঢুকে পড়ে, তারা এক-অফ পেজ চিন্তা বন্ধ করে দেয় এবং ছোট, নির্ভরযোগ্য অংশগুলোর কথা ভাবতে শুরু করে যা পুনরায় বিন্যাস করা যায় ব্যতীত সবকিছু পুনরায় লিখা।\n\n### কম্পোজিশনের বেসিক: নেস্টিং, প্রপস, এবং \n\nনেস্টিং হলো UI কিভাবে গঠিত তার ভিজুয়াল রূপ: একটি পেজে সেকশন থাকে, সেকশনে কার্ড থাকে, কার্ডে বাটন থাকে। প্রপস হলো কনফিগারেশন নোব (টেক্সট, স্টেট, কলব্যাক)। আর হলো এমন একটি উপায় যা দিয়ে একটি কম্পোনেন্ট স্ট্রাকচার দেয় কিন্তু কলারদের সিদ্ধান্ত নিতে দেয় ভিতরে কি যাবে।\n\nএকটি ভাল মানসিক মডেল: , , ।\n\n### সুস্থ React কোডবেসে দেখা প্যাটার্নগুলো\n\n গঠন ও স্পেসিং নির্ধারণ করে কিন্তু ব্যবসায়িক লজিক নিজের করে না। উদাহরণ: , , , . সেগুলো প্রায়ই -এর উপর নির্ভর করে, যাতে একই লেআউট অনেক স্ক্রীন ঘিরে রাখতে পারে।\n\n গুলো ফর্ম আচরণ ও স্টাইলিং স্ট্যান্ডার্ডাইজ করে: , , . লেবেল, এরর স্টেট, ভ্যালিডেশন মেসেজ প্রতিটি স্ক্রীনে কপি-পেস্ট করার বদলে আপনি কেন্দ্রভূত করে নেন এবং একটি সরল prop API প্রকাশ করেন।\n\n পুনরাবৃত্ত UI-কে পূর্বানুমেয় রাখে। একটি সাধারণ বিভাজন হলো (ফেচিং, পেজিনেশন, এম্পটি স্টেট) এবং (একটি আইটেম কেমন দেখায়)। এতে ডেটা হ্যান্ডলিং टूटে না করে রেন্ডারিং পরিবর্তন করা সহজ হয়।\n\n### মার্কআপ শেয়ার না করে আচরণ শেয়ার করা\n\nহুকস (hooks) হল আধুনিক উপায় স্টেটফুল আচরণ (টগল, ফর্ম স্টেট, বা ফেচিং) পুনরায় ব্যবহার করার, এমনভাবে যে কম্পোনেন্টগুলোকে একই UI আকৃতিতে বাঁধা না করে। এই বিভাজন দলগুলোকে ডিজাইন পরিবর্তন করতে দেয় যখন লজিক স্থিত থাকে।\n\n### কেন এটি ডিজাইন সিস্টেমকে সমর্থন করে\n\nকম্পোজিশনই ডিজাইন সিস্টেমগুলোকে অবিচল রাখে: কম্পোনেন্টগুলো হয়ে ওঠে অনুমোদিত বিল্ডিং ব্লক, এবং লেআউটগুলো স্পেসিং ও হায়ারার্কির নিয়ম নির্ধারণ করে। যখন সিস্টেম আপডেট হয়—রং, টাইপোগ্রাফি, ইন্টারঅ্যাকশন স্টেট—প্রোডাক্টগুলো কম ম্যানুয়াল এডিটে আপডেট অর্জন করে।\n\n## স্টেট ম্যানেজমেন্ট: লোকাল থেকে শেয়ার্ড পর্যন্ত\n\nস্টেট হলো কেবল “পরিবর্তনশীল ডেটা।” React-এ স্টেট কোথায় থাকে তাও ততটাই গুরুত্বপূর্ণ যতটা স্টেট নিজেই।\n\n### লোকাল কম্পোনেন্ট স্টেট: যেখানে ব্যবহার করা হয় সেখানেই রাখুন\n\nলোকাল স্টেট সেই কম্পোনেন্টের মালিকানাধীন যা একাই সেটি পড়ে। ভাবুন: একটি ড্রপডাউন খোলা আছে কিনা, ইনপুটের বর্তমান মান, অথবা কোন ট্যাব সিলেক্টেড।\n\nএই স্টেট লোকাল রাখলে সমন্বয় কমে এবং কম্পোনেন্ট পুনঃব্যবহার সহজ হয়। সাধারণ নিয়ম: যদি শুধুমাত্র এক কম্পোনেন্টই যত্ন করে, সেটা সারাদেশে এক্সপোর্ট করবেন না।\n\n### কখন স্টেট শেয়ার্ড হয়ে যায় (এবং কেন)\n\nশেয়ার্ড অ্যাপ স্টেট হলো এমন ডেটা যা UI-র একাধিক অংশকে একরকমভাবে জানতে হবে। সাধারণ উদাহরণ: \n- অথেনটিকেশন স্ট্যাটাস ও কারেন্ট ইউজার\n- থিম (লাইট/ডার্ক) ও অ্যাক্সেসিবিলিটি পছন্দ