স্থানীয় অবস্থা একটি একক উপাদান (বা একটি ছোট উপবৃক্ষ) এর অন্তর্গত এবং অন্য কোথাও প্রয়োজন নয়। বৈশ্বিক অবস্থা সারা অ্যাপ জুড়ে অনেক, প্রায়শই দূরবর্তী, উপাদান জুড়ে ভাগ করা হয়।
() {
[query, setQuery] = ();
;
}
স্থানীয় অবস্থা উপাদানের মধ্যে বাস করে (useState, ref, data())। উদাহরণ: ইনপুট মান, ড্রপডাউন খোলা আছে কিনা, হোভার অবস্থা, একটি ফর্মের খসড়া। অন্য কোন উপাদান এটি সম্পর্কে যত্নশীল নয়।
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
বৈশ্বিক অবস্থা এমন ডেটা যা অনেক সম্পর্কহীন উপাদান সামঞ্জস্যপূর্ণভাবে পড়তে বা আপডেট করতে অবশ্য করে: প্রমাণিত ব্যবহারকারী, থিম, শপিং কার্ট, অ্যাপ-ব্যাপী বিজ্ঞপ্তি। এটি একটি Context, একটি store (Redux/Zustand/Pinia), বা অনুরূপ মধ্যে বাস করে।
Ask: "How many components need this, and how far apart are they?"
One component (or parent+child) → LOCAL state
Many unrelated components / whole app → GLOBAL state
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);
// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
সবকিছু বৈশ্বিক করা বয়লারপ্লেট যোগ করে, উপাদানগুলিকে যুক্ত করে এবং কর্মক্ষমতাকে ক্ষতি করতে পারে (আরও পুনঃ-রেন্ডার)। সর্বোত্তম অনুশীলন হল অবস্থা যতটা সম্ভব স্থানীয় রাখুন, এবং শুধুমাত্র যখন ভাগাভাগি সত্যিই প্রয়োজন তখনই এটিকে বৈশ্বিক করুন।
স্থানীয় বনাম বৈশ্বিক নির্বাচন করা সবচেয়ে গুরুত্বপূর্ণ অবস্থা সিদ্ধান্তগুলির মধ্যে একটি।
অবস্থা স্থানীয় রাখা উপাদানগুলিকে সহজ, স্ব-নিহিত এবং কর্মক্ষম রাখে; শুধুমাত্র যখন ডেটা সত্যিই ভাগ করা হয় তখনই বৈশ্বিক অবস্থার দিকে পৌঁছানো অপ্রয়োজনীয় জটিলতা এড়ায়।
ঘন ঘন অ্যান্টি-প্যাটার্ন — সবকিছু একটি বৈশ্বিক store এ রাখা "শুধু ক্ষেত্রে" — ফোলা, কঠোরভাবে-যুক্ত অ্যাপের দিকে পরিচালিত করে।
নির্দেশনামূলক নিয়ম: ডিফল্টরূপে স্থানীয়করণ করুন, শুধুমাত্র যখন ভাগাভাগি এটি দাবি করে তখনই বৈশ্বিক করুন।