আপনি অ্যাসিঙ্ক/লোডিং অবস্থা কীভাবে মডেল করেন?

অ্যাসিঙ্ক্রোনাস অপারেশনগুলি (API কল) একাধিক সম্ভাব্য ফলাফল রয়েছে, তাই আপনাকে শুধুমাত্র ডেটার চেয়ে বেশি কিছু মডেল করতে হবে — আপনাকে লোডিং, সাফল্য এবং ত্রুটি অবস্থা উপস্থাপন করতে হবে। এটি ভালভাবে মডেল করা UI বাগ প্রতিরোধ করে যেমন পুরানো ডেটা দেখানো বা কোন প্রতিক্রিয়া না দেওয়া।

নিরাপদ পদ্ধতি এবং এর ত্রুটি

// ❌ separate booleans — can represent impossible combinations
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
// What does { loading: true, error: "x", data: [...] } even mean? An invalid state.

স্বাধীন ফ্ল্যাগ পরস্পর বিরোধী সমন্বয়ের অনুমতি দেয় (লোডিং এবং ত্রুটি এবং ডেটা একই সাথে) যা অসম্ভব হওয়া উচিত — বিভ্রান্তিকর 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 এর দিকে পরিচালিত করে, এবং জানা যে সার্ভার-স্টেট লাইব্রেরি এই সবকিছু পরিচালনা করে তা ডেটা-ফেচিং কোডকে সহজ এবং শক্তিশালী রাখে।