Suspense, Lazy Loading & Error Boundaries

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Suspense, Lazy Loading & Error Boundaries ရဲ့ render, state နဲ့ interaction behavior ကိုရှင်းပြနိုင်ရန်

Loading, error, accessibility နဲ့ lifecycle cases စမ်းနိုင်ရန်

Maintainable, testable နဲ့ performant React code ရေးနိုင်ရန်

Suspense, Lazy Loading & Error Boundaries ကို pending, success, empty, error, retry, cancellation နဲ့ navigation recovery states ပါသော user flow အဖြစ်တည်ဆောက်ပါ။ Route သို့ async boundary တစ်ခုချင်းစီတွင် fallback နဲ့ error recovery ကိုရည်ရွယ်ချက်ရှိရှိထားပါ။

ပိုပြီးနားလည်ထားရမယ့် အချက်

လက်တွေ့မှာ ဘယ်လိုအသုံးချမလဲ

Suspense, Lazy Loading & Error Boundaries example ကို empty/loading/error states, keyboard-only interaction, slow network, rapid repeated events နဲ့ component unmount/remount cases ဖြင့်စမ်းပါ။ Browser console, React DevTools, tests နဲ့ profiler ကိုလိုအပ်သလိုအသုံးပြုပြီး behavior ကိုအတည်ပြုပါ။

ဒီသင်ခန်းစာပြီးရင်

Source of truth နဲ့ component boundary ကိုရှင်းပြနိုင်ခြင်း
Keyboard နှင့် failure state ပါသော example ရေးနိုင်ခြင်း
User-visible behavior တစ်ခုကို test သို့ profiler ဖြင့်စစ်နိုင်ခြင်း

jsx

import { Component, lazy, Suspense } from 'react';

const Reports = lazy(() => import('./Reports.jsx'));

class ErrorBoundary extends Component {
  state = { failed: false };
  static getDerivedStateFromError() { return { failed: true }; }
  render() {
    return this.state.failed ? <p role="alert">Could not load reports.</p> : this.props.children;
  }
}

export default function App() {
  return <ErrorBoundary>
    <Suspense fallback={<p>Loading reports…</p>}>
      <Reports />
    </Suspense>
  </ErrorBoundary>;
}

You should see

Loading fallback ပြပြီး Reports သို့ recoverable error message ပေါ်မည်။

ကိုယ်တိုင်စမ်းကြည့်ရန်

State/Effect သတိပေးချက်

Happy path တစ်ခု render မှန်ရုံဖြင့် stale state, repeated effects, accessibility, loading နဲ့ error paths အားလုံးမှန်ပြီဟုယူဆခြင်း။

Suspense — React