Suspense na React.lazy zinatoaa kazi vipi kwa ajili ya mgawanyiko wa nambari?

Question

Accepted Answer

**`React.lazy`** hupanika sehemu ya JavaScript ya komponenti **on demand** (tu wakati inakayanzwa kwa mara ya kwanza). **`Suspense`** inaonyesha UI ya fallback wakati mtoto yeyote lazy (au data-suspending) bado inakipakia. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Kwa nini linavyomaanisha: kupakia kwa awali kidogo Bila mgawanyiko wa nambari, kivinjari kinakipakia app yako **nzima** (ikiwa ni pamoja na maktaba nzito ya chati) kabla ya kuonyesha chochote. Kwa `lazy`, nambari ya `Chart` imegawanywa katika faili yake mwenyewe na kupatikana tu wakati mtumiaji akifika kwake halisi — inaboresha wakati wa kupakia wa awali na Core Web Vitals. ## Jinsi Suspense inavyoandaa Kakati `Chart` ikisimamia (paket yake haipo tayari), React "inasimamia" sehemu hiyo ya mti na inaonyesha fallback ya `Suspense` inayokaribia badala yake, kisha inabadilisha komponenti halisi mara tu inapakia. Hudud moja inaweza kuzunguka watoto wengi wa lazy na kuonyesha fallback moja: ```jsx }>

``` ## Zaidi ya mgawanyiko wa nambari Suspense pia inasambaza **kupakia data** na midati/maktaba inayosimamia kwenye kufanya fetch, na inapandana na **SSR ya streaming** (Next.js App Router) kumtumia shell haraka na kumtiria sehemu za polepole. Weka hudud kwa makini ili kuepuka mabadiliko makubwa, yanayotikisa yanayogusuka mipango wakati maudhui yanajitokeza.