অ্যাসিঙ্ক্রোনাস অপারেশনগুলি (API কল) একাধিক সম্ভাব্য ফলাফল রয়েছে, তাই আপনাকে শুধুমাত্র ডেটার চেয়ে বেশি কিছু মডেল করতে হবে — আপনাকে লোডিং, সাফল্য এবং ত্রুটি অবস্থা উপস্থাপন করতে হবে। এটি ভালভাবে মডেল করা UI বাগ প্রতিরোধ করে যেমন পুরানো ডেটা দেখানো বা কোন প্রতিক্রিয়া না দেওয়া।
[data, setData] = ();
[loading, setLoading] = ();
[error, setError] = ();
স্বাধীন ফ্ল্যাগ পরস্পর বিরোধী সমন্বয়ের অনুমতি দেয় (লোডিং এবং ত্রুটি এবং ডেটা একই সাথে) যা অসম্ভব হওয়া উচিত — বিভ্রান্তিকর UI বাগের একটি উৎস।
// ✅ a single `status` makes states mutually exclusive
const [state, setState] = useState({ status: "idle", data: null, error: null });
// status is one of: 'idle' | 'loading' | 'success' | 'error'
async function load() {
setState({ status: "loading", data: null, error: null });
try {
const data = await api.get();
setState({ status: "success", data, error: null });
} catch (e) {
setState({ status: "error", data: null, error: e.message });
}
}
একটি একক status ক্ষেত্র অবস্থাগুলিকে পারস্পরিক একচেটিয়া করে তোলে — আপনি লোডিং এবং ত্রুটিযুক্ত উভয়ই হতে পারেন না। রেন্ডারিং একটি পরিষ্কার সুইচ হয়ে ওঠে:
switch (state.status) {
case "loading": return <Spinner />;
case "error": return <Error message={state.error} />;
case "success": return <List data={state.data} />;
default: return <Idle />;
}
idle — hasn't started yet (vs loading)
empty — succeeded but no results (show "No items" not a blank screen)
refetching— has old data AND is loading new (show data + a subtle spinner)
// React Query / SWR model all of this for you
const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn });
সার্ভার-স্টেট লাইব্রেরি এই অবস্থাগুলি প্রদান করে (প্লাস ক্যাশিং, রিফেচ, স্টেল-হোয়াইল-রিভ্যালিডেট) বাক্সের বাইরে — সাধারণত হ্যান্ড-রোলিংয়ের চেয়ে ভাল।
অ্যাসিঙ্ক অবস্থা সঠিকভাবে মডেল করা — একটি একক স্ট্যাটাস হিসাবে বিচ্ছিন্ন বুলিয়ান পরিবর্তে — UI বাগের একটি পুরো শ্রেণী দূর করে (পরস্পর বিরোধী অবস্থা, অনুপস্থিত লোডিং/ত্রুটি/খালি প্রতিক্রিয়া) এবং রেন্ডারিং লজিককে পরিষ্কার এবং ব্যাপক করে তোলে।
অবস্থার সম্পূর্ণ সেটটি স্বীকৃতি দেওয়া (আইডেল, লোডিং, সাফল্য, ত্রুটি, খালি, রিফেচিং) আরও ভাল UX এর দিকে পরিচালিত করে, এবং জানা যে সার্ভার-স্টেট লাইব্রেরি এই সবকিছু পরিচালনা করে তা ডেটা-ফেচিং কোডকে সহজ এবং শক্তিশালী রাখে।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন