Suspense અને React.lazy કોડ વિભાજન માટે કેવી રીતે કાર્ય કરે છે?

Question

Accepted Answer

**`React.lazy`** એક ઘટકના JavaScript બંડલ **માંગ પર** (જ્યારે તે પહેલીવાર રેન્ડર થાય તે સમયે) લોડ કરે છે. **`Suspense`** કોઈપણ આળસુ (અથવા ડેટા-સસ્પેન્ડિંગ) બાળક હજી પણ લોડ થઈ રહ્યું હોય તે વખતે ફોલબેક UI દર્શાવે છે. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## શા માટે તે મહત્વપૂર્ણ છે: નાની પ્રારંભિક લોડ કોડ વિભાજન વિના, બ્રાউઝર તમારી **સંપૂર્ણ** એપ્લિકેશન (ભારે ચાર્ટિંગ લાઇબ્રેરી સહિત) ડાউનલોડ કરે છે કોઈપણ વસ્તુ દર્શાવે તે પહેલાં. `lazy` સાથે, `Chart` નો કોડ તેની પોતાની ફાઇલમાં વિભાજિત થાય છે અને તે જ સમયે જ ફેચ થાય છે જ્યારે વપરાશકર્તા ખરેખર તેમાં પહોંચે - પ્રારંભિક લોડ સમય અને Core Web Vitals સુધારે છે. ## કેવી રીતે Suspense તેને સંયોજિત કરે છે જ્યારે `Chart` સસ્પેન્ડ થાય (તેનું બંડલ તૈયાર નથી), React તે વૃક્ષના ભાગને "અટકાવે" છે અને તેની જગ્યાએ સૌથી નજીકનું `Suspense` ફોલબેક રેન્ડર કરે છે, પછી તે લોડ થયા પછી વાસ્તવિક ઘટકને બદલી નાખે છે. એક એકલ સીમાં કેટલાક આળસુ બાળકોને આવરી શકે છે અને એક ફોલબેક દર્શાવે: ```jsx }>

``` ## કોડ વિભાજન ની બહાર Suspense **ડેટા લોડિંગ**ને પણ સમન્વય કરે છે ફ્રેમવર્ક/લાઇબ્રેરીઓ સાથે જે બાકી આવતા ફેચ પર "સસ્પેન્ડ" કરે છે, અને **સ્ટ્રીમિંગ SSR** (Next.js App Router) સાથે જોડી શકે છે ઝડપી શેલ મોકલવા માટે અને ધીમી ભાગોને સ્ટ્રીમ કરવા માટે. સીમાઓને વિચારશીલતાથી સ્થાપિત કરો મોટા, તીખા લેઆઉટ શિફ્ટને ટાળવા માટે જ્યારે સામગ્રી પોપ ઇન થાય.