React સિલેક્ટિવ હાઇડ્રેશન સ્ટ્રેટેજી એન્જિન: વૈશ્વિક પ્રદર્શન માટે બુદ્ધિશાળી કમ્પોનન્ટ લોડિંગ

વેબ ડેવલપમેન્ટના સતત વિકસતા લેન્ડસ્કેપમાં, અસાધારણ પ્રદર્શન પહોંચાડવું સર્વોપરી છે. React સાથે બનેલી એપ્લિકેશન્સ માટે, આ ઘણીવાર પ્રારંભિક લોડ સ્પીડ માટે સર્વર-સાઇડ રેન્ડરિંગ (SSR) અને ઇન્ટરેક્ટિવિટી માટે ક્લાયન્ટ-સાઇડ રેન્ડરિંગ (CSR) વચ્ચે કાળજીપૂર્વક સંતુલન જાળવવાનો સમાવેશ કરે છે. જોકે, હાઇડ્રેશન પ્રક્રિયા દરમિયાન એક સામાન્ય પડકાર ઉભો થાય છે – ક્લાયન્ટ પર સર્વર-રેન્ડર થયેલ HTML માં JavaScript ઇવેન્ટ લિસનર્સનું ફરીથી જોડાણ. પરંપરાગત હાઇડ્રેશન એક અવરોધ બની શકે છે, ખાસ કરીને ઘણા બધા ઘટકો ધરાવતી જટિલ એપ્લિકેશન્સ માટે, પ્રારંભિક વપરાશકર્તા અનુભવ અને જોડાણને અસર કરે છે, ખાસ કરીને અમારા વૈશ્વિક પ્રેક્ષકો માટે જેઓ વિવિધ નેટવર્ક પરિસ્થિતિઓ અને ઉપકરણ ક્ષમતાઓ પર સંપર્ક કરી રહ્યા છે.

આ તે છે જ્યાં React સિલેક્ટિવ હાઇડ્રેશન સ્ટ્રેટેજી એન્જિનનો ખ્યાલ એક શક્તિશાળી ઉકેલ તરીકે ઉભરી આવે છે. એક મોનોલિથિક, ઓલ-ઓર-નથિંગ હાઇડ્રેશન અભિગમને બદલે, એક સિલેક્ટિવ વ્યૂહરચના બુદ્ધિશાળી, પ્રાધાન્યતા સાથે ઘટકોના લોડિંગ અને હાઇડ્રેશન માટે પરવાનગી આપે છે. આ બ્લોગ પોસ્ટ આવા એન્જિનના સિદ્ધાંતો, આર્કિટેક્ચર, લાભો અને વ્યવહારિક અમલીકરણમાં ઊંડાણપૂર્વક પ્રવેશ કરે છે, ડેવલપર્સને ઝડપી, વધુ પ્રતિભાવશીલ અને વૈશ્વિક સ્તરે સુલભ React એપ્લિકેશન્સ બનાવવા માટે સશક્ત બનાવે છે.

પરંપરાગત હાઇડ્રેશનમાં સમસ્યા

આપણે ઉકેલોનું અન્વેષણ કરીએ તે પહેલાં, React માં પરંપરાગત હાઇડ્રેશન પ્રક્રિયાની મર્યાદાઓને સમજવી મહત્વપૂર્ણ છે.

હાઇડ્રેશન શું છે?

SSR નો ઉપયોગ કરતી વખતે, સર્વર બ્રાઉઝર પર પૂર્વ-રેન્ડર કરેલ HTML મોકલે છે. આ HTML ક્લાયન્ટ-સાઇડ પર React નિયંત્રણ લે ત્યાં સુધી સ્થિર છે. હાઇડ્રેશન એ પ્રક્રિયા છે જેના દ્વારા React આ સર્વર-રેન્ડર થયેલ HTML ને સ્કેન કરે છે, વર્ચ્યુઅલ DOM રજૂઆત બનાવે છે, અને પછી DOM ને ઇન્ટરેક્ટિવ બનાવવા માટે સંબંધિત ઇવેન્ટ લિસનર્સ અને લોજિક જોડે છે. આવશ્યકપણે, તે સ્થિર પૃષ્ઠને ગતિશીલ બનાવી રહ્યું છે.

અવરોધ: એક મોનોલિથિક અભિગમ

ઘણા SSR ફ્રેમવર્ક (જેમ કે Next.js તેના પ્રારંભિક સંસ્કરણોમાં અથવા મેન્યુઅલ સેટઅપ્સ) માં ડિફોલ્ટ વર્તન પૃષ્ઠ પરના બધા ઘટકોને એક સાથે હાઇડ્રેટ કરવાનું સમાવેશ કરે છે. આ અનેક સમસ્યાઓ તરફ દોરી શકે છે:

• ઉચ્ચ પ્રારંભિક JavaScript અમલીકરણ સમય: ક્લાયંટના બ્રાઉઝરને દરેક ઘટકને હાઇડ્રેટ કરવા માટે નોંધપાત્ર પ્રમાણમાં JavaScript પાર્સ, કમ્પાઇલ અને એક્ઝિક્યુટ કરવાની જરૂર છે. આ મુખ્ય થ્રેડને અવરોધિત કરી શકે છે, ઇન્ટરેક્ટિવિટીમાં વિલંબ કરી શકે છે અને ખરાબ ફર્સ્ટ કન્ટેન્ટફુલ પેઇન્ટ (FCP) અને લાર્જેસ્ટ કન્ટેન્ટફુલ પેઇન્ટ (LCP) તરફ દોરી શકે છે.
• વધેલી મેમરી વપરાશ: એકસાથે અનેક ઘટકોને હાઇડ્રેટ કરવાથી નોંધપાત્ર મેમરીનો વપરાશ થઈ શકે છે, ખાસ કરીને ઓછી-ક્ષમતાવાળા ઉપકરણો પર અથવા જૂના બ્રાઉઝરમાં જે અમુક પ્રદેશોમાં સામાન્ય છે.
• બિનજરૂરી કાર્ય: ઘણી વાર, વપરાશકર્તાઓ શરૂઆતમાં પૃષ્ઠના ઘટકોના ફક્ત પેટા-સમૂહ સાથે સંપર્ક કરે છે. તાત્કાલિક દૃશ્યમાન અથવા ઇન્ટરેક્ટિવ ન હોય તેવા ઘટકોને હાઇડ્રેટ કરવા એ સંસાધનોનો બગાડ છે.
• વૈશ્વિક પ્રદર્શન અસમાનતાઓ: ઉચ્ચ-લેટેન્સી નેટવર્ક અથવા મર્યાદિત બેન્ડવિડ્થવાળા પ્રદેશોમાં વપરાશકર્તાઓ આ વિલંબનો વધુ તીવ્રતાથી અનુભવ કરશે, વિશ્વભરમાં પ્રદર્શન અસમાનતાઓને વધારશે.

સિલેક્ટિવ હાઇડ્રેશન સ્ટ્રેટેજી એન્જિનનો પરિચય

એક સિલેક્ટિવ હાઇડ્રેશન સ્ટ્રેટેજી એન્જિનનો ઉદ્દેશ્ય હાઇડ્રેશન પ્રક્રિયાને બુદ્ધિશાળી અને ગતિશીલ બનાવીને આ મર્યાદાઓને સંબોધવાનો છે. એક બ્લેન્કેટ અભિગમને બદલે, તે વિવિધ માપદંડોના આધારે ઘટકોને પ્રાધાન્ય આપે છે અને લોડ કરે છે, ખાતરી કરે છે કે એપ્લિકેશનના સૌથી જટિલ ભાગો પ્રથમ ઇન્ટરેક્ટિવ બને.

સિલેક્ટિવ હાઇડ્રેશનના મુખ્ય સિદ્ધાંતો

આંતરિક દર્શનશાસ્ત્ર આની આસપાસ ફરે છે:

• પ્રાધાન્યતા: વપરાશકર્તા ક્રિયાપ્રતિક્રિયા અથવા પ્રારંભિક જોડાણ માટે કયા ઘટકો સૌથી જટિલ છે તે ઓળખવું.
• આળસ: ઘટકોને હાઇડ્રેટ કરવાનું મુલતવી રાખવું જ્યાં સુધી તેઓ ખરેખર જરૂરી અથવા દૃશ્યમાન ન હોય.
• ગતિશીલ લોડિંગ: માંગ પર ઘટકોને લોડ કરવું અને હાઇડ્રેટ કરવું.
• રૂપરેખાંકન: ડેવલપર્સને હાઇડ્રેશન વ્યૂહરચનાઓને કસ્ટમાઇઝ કરવા અને વ્યાખ્યાયિત કરવાની મંજૂરી આપવી.

સ્ટ્રેટેજી એન્જિનના આર્કિટેક્ચરલ ઘટકો

એક મજબૂત સિલેક્ટિવ હાઇડ્રેશન સ્ટ્રેટેજી એન્જિન સામાન્ય રીતે અનેક મુખ્ય ઘટકો ધરાવે છે:

1. કમ્પોનન્ટ રજિસ્ટ્રી: એક કેન્દ્રીય સ્થાન જ્યાં તમામ ઘટકો મેટાડેટા સાથે નોંધાયેલા છે જે તેમના હાઇડ્રેશન વર્તનને માર્ગદર્શન આપે છે. આ મેટાડેટામાં પ્રાધાન્યતા સ્તરો, દૃશ્યતા થ્રેશોલ્ડ અથવા સ્પષ્ટ નિર્ભરતા માહિતી શામેલ હોઈ શકે છે.
2. હાઇડ્રેશન મેનેજર: ઓર્કેસ્ટ્રેટર જે એપ્લિકેશનની સ્થિતિનું નિરીક્ષણ કરે છે અને નક્કી કરે છે કે કયા ઘટકો હાઇડ્રેશન માટે તૈયાર છે. તે કમ્પોનન્ટ રજિસ્ટ્રી અને બ્રાઉઝરના વ્યૂપોર્ટ અથવા અન્ય સંકેતો સાથે સંપર્ક કરે છે.
3. લોડિંગ સ્ટ્રેટેજી મોડ્યુલ: આ મોડ્યુલ ઘટકો ક્યારે અને કેવી રીતે લોડ અને હાઇડ્રેટ થવા જોઈએ તેના નિયમો વ્યાખ્યાયિત કરે છે. આ વ્યૂપોર્ટ દૃશ્યતા (ઇન્ટરસેક્શન ઓબ્ઝર્વર), વપરાશકર્તા ક્રિયાપ્રતિક્રિયા (સ્ક્રોલ, ક્લિક), અથવા સમય-આધારિત ટ્રિગર્સ પર આધારિત હોઈ શકે છે.
4. હાઇડ્રેશન કતાર: હાઇડ્રેશન કાર્યોના ક્રમ અને સમકાલીનતાનું સંચાલન કરવા માટે એક પદ્ધતિ, ખાતરી કરે છે કે ઉચ્ચ-પ્રાધાન્યતા ઘટકો પ્રથમ પ્રક્રિયા કરવામાં આવે છે અને બ્રાઉઝરને વધુ પડતું ભારણ થતું અટકાવે છે.
5. રૂપરેખાંકન ઇન્ટરફેસ: ડેવલપર્સ માટે એપ્લિકેશનના વિવિધ ઘટકો અથવા વિભાગો માટે હાઇડ્રેશન વ્યૂહરચનાઓને ઘોષણાત્મક અથવા આદેશાત્મક રીતે વ્યાખ્યાયિત કરવાની રીત.

સિલેક્ટિવ હાઇડ્રેશન માટેની વ્યૂહરચનાઓ

સિલેક્ટિવ હાઇડ્રેશન એન્જિનની અસરકારકતા તે રોજગારી આપે છે તે વ્યૂહરચનાઓની વિવિધતા અને બુદ્ધિ પર આધાર રાખે છે. અહીં કેટલાક સામાન્ય અને શક્તિશાળી અભિગમો છે:

1. વ્યૂપોર્ટ-આધારિત હાઇડ્રેશન (લેઝી હાઇડ્રેશન)

આ સૌથી સાહજિક અને અસરકારક વ્યૂહરચનાઓમાંની એક છે. જે ઘટકો હાલમાં વપરાશકર્તાના વ્યૂપોર્ટની અંદર નથી તે હાઇડ્રેશનથી મુલતવી રાખવામાં આવે છે. ઘટક દૃશ્યમાં સ્ક્રોલ થાય ત્યારે જ હાઇડ્રેશન ટ્રિગર થાય છે.

• પદ્ધતિ: `Intersection Observer` API નો ઉપયોગ કરે છે, જે કાર્યક્ષમ રીતે શોધી કાઢે છે કે તત્વ ક્યારે વ્યૂપોર્ટમાં પ્રવેશ કરે છે અથવા બહાર નીકળે છે.
• લાભો: પ્રારંભિક JavaScript લોડ અને અમલીકરણ સમયમાં નોંધપાત્ર ઘટાડો કરે છે, જે વપરાશકર્તા માટે ખૂબ ઝડપી માનવામાં આવતા લોડ તરફ દોરી જાય છે. તે ખાસ કરીને ફોલ્ડની નીચે ઘણા બધા ઘટકોવાળા લાંબા પૃષ્ઠો માટે ફાયદાકારક છે.
• વૈશ્વિક સુસંગતતા: ધીમા ઇન્ટરનેટ કનેક્શન્સવાળા પ્રદેશોમાં ખાસ કરીને મૂલ્યવાન છે જ્યાં બધી JavaScript પહેલાથી ડાઉનલોડ અને એક્ઝિક્યુટ કરવી પ્રતિબંધિત હોઈ શકે છે.

ઉદાહરણ: ઈ-કોમર્સ ઉત્પાદન સૂચિ પૃષ્ઠ પર, સ્ક્રીનની બહાર પ્રારંભિક રૂપે ઉત્પાદનો માટેના ઘટકો ત્યાં સુધી હાઇડ્રેટ કરવામાં આવશે નહીં જ્યાં સુધી વપરાશકર્તા નીચે સ્ક્રોલ ન કરે અને તે દૃશ્યમાન ન થાય.

2. પ્રાધાન્યતા-આધારિત હાઇડ્રેશન

બધા ઘટકો સમાન રીતે બનાવવામાં આવતા નથી. કેટલાક તાત્કાલિક વપરાશકર્તા અનુભવ (દા.ત., નેવિગેશન, હીરો વિભાગ, પ્રાથમિક કૉલ-ટુ-એક્શન) માટે નિર્ણાયક છે, જ્યારે અન્ય ઓછા મહત્વપૂર્ણ છે (દા.ત., ફૂટર્સ, સંબંધિત વસ્તુઓ, ચેટ વિજેટ્સ).

• પદ્ધતિ: ઘટકોને પ્રાધાન્યતા સ્તર (દા.ત., 'ઉચ્ચ', 'મધ્યમ', 'નિમ્ન') સોંપવામાં આવે છે. હાઇડ્રેશન મેનેજર આ પ્રાધાન્યતાઓ પર આધારિત હાઇડ્રેશન કતાર પર પ્રક્રિયા કરે છે.
• લાભો: સુનિશ્ચિત કરે છે કે UI ના સૌથી નિર્ણાયક ભાગો પ્રથમ ઇન્ટરેક્ટિવ બને, ભલે તે તાત્કાલિક દૃશ્યમાન ન હોય અથવા ઓછા મહત્વપૂર્ણ ઘટકો સાથે રેન્ડર કરવામાં આવે.
• વૈશ્વિક સુસંગતતા: એક અનુરૂપ અનુભવ માટે પરવાનગી આપે છે જ્યાં આવશ્યક કાર્યો એવા વપરાશકર્તાઓ માટે પ્રાધાન્ય આપવામાં આવે છે જેઓ ઓછી-ક્ષમતાવાળા ઉપકરણો અથવા નેટવર્ક પર હોઈ શકે છે.

ઉદાહરણ: સમાચાર લેખ પૃષ્ઠ કદાચ લેખ સામગ્રી અને લેખકની માહિતી ('ઉચ્ચ' પ્રાધાન્યતા) ને ટિપ્પણી વિભાગ અથવા જાહેરાત મોડ્યુલ્સ ('નિમ્ન' પ્રાધાન્યતા) પર હાઇડ્રેટ કરવાની પ્રાધાન્યતા આપી શકે છે.

3. ક્રિયાપ્રતિક્રિયા-આધારિત હાઇડ્રેશન

ચોક્કસ ઘટકો ત્યારે જ સંબંધિત બને છે જ્યારે વપરાશકર્તા પૃષ્ઠના ચોક્કસ તત્વ અથવા વિભાગ સાથે સંપર્ક કરે છે.

• પદ્ધતિ: વપરાશકર્તા ક્રિયા દ્વારા ઘટકનું હાઇડ્રેશન ટ્રિગર થાય છે, જેમ કે બટન પર ક્લિક કરવું, તત્વ પર હોવર કરવું, અથવા ઇનપુટ ફીલ્ડ પર ફોકસ કરવું.
• લાભો: એવા ઘટકોના હાઇડ્રેશનને અટકાવે છે જે ક્યારેય કોઈ ચોક્કસ વપરાશકર્તા દ્વારા ઉપયોગમાં લેવાશે નહીં, સંસાધન ઉપયોગને શ્રેષ્ઠ બનાવે છે.
• વૈશ્વિક સુસંગતતા: મર્યાદિત ડેટા યોજનાઓવાળા વપરાશકર્તાઓ માટે નોંધપાત્ર વિચારણા, વિશ્વના ઘણા ભાગોમાં, ડેટા વપરાશ અને પ્રક્રિયા ઘટાડે છે.

ઉદાહરણ: મોડલ ડાયલોગ અથવા ટૂલટિપ ઘટક ફક્ત ત્યારે જ હાઇડ્રેટ થઈ શકે છે જ્યારે વપરાશકર્તા તેને ખોલતા બટન પર ક્લિક કરે છે.

4. સમય-આધારિત હાઇડ્રેશન

જે ઘટકો તાત્કાલિક નિર્ણાયક નથી પરંતુ અમુક સમયગાળા પછી બની શકે છે, તેમના માટે સમય-આધારિત ટ્રિગર્સનો ઉપયોગ કરી શકાય છે.

• પદ્ધતિ: હાઇડ્રેશન પૂર્વનિર્ધારિત વિલંબ પછી, અથવા પૃષ્ઠ લોડ થયાના પ્રારંભિક સમય પછી નિશ્ચિત સમય પસાર થયા પછી થવા માટે શેડ્યૂલ કરવામાં આવે છે.
• લાભો: ઘટકો માટે ઉપયોગી છે કે જેમાં મજબૂત ટ્રિગર નથી પરંતુ અંતે જરૂર પડી શકે છે, પ્રારંભિક લોડને અસર કરતા અટકાવે છે પરંતુ ખાતરી કરે છે કે તે ટૂંક સમયમાં ઉપલબ્ધ છે.
• વૈશ્વિક સુસંગતતા: જુદા જુદા બજારોમાં અપેક્ષિત વપરાશકર્તા વર્તન પર આધારિત ટ્યુન કરી શકાય છે, અપેક્ષિત ઉપયોગિતા સામે સંસાધન વપરાશને સંતુલિત કરી શકાય છે.

ઉદાહરણ: 'નવીનતમ સમાચાર' સાઇડબાર વિજેટ કે જે તાત્કાલિક ક્રિયાપ્રતિક્રિયા માટે નિર્ણાયક નથી તે પૃષ્ઠ લોડ થયાના 10 સેકન્ડ પછી હાઇડ્રેટ કરવા માટે શેડ્યૂલ થઈ શકે છે.

5. પ્રોગ્રેસિવ હાઇડ્રેશન

આ એક વધુ અદ્યતન ખ્યાલ છે, જે ઘણીવાર ઉપરોક્ત ઘણી વ્યૂહરચનાઓને જોડે છે. તેમાં હાઇડ્રેશન પ્રક્રિયાને નાના, વ્યવસ્થાપિત ભાગોમાં તોડવાનો સમાવેશ થાય છે જે સંસાધનો ઉપલબ્ધ થાય છે અને ટ્રિગર્સ પૂરા થાય છે તેમ ક્રમિક રીતે અથવા સમાંતર રીતે ચલાવવામાં આવે છે.

• પદ્ધતિ: ઘટકો બેચમાં હાઇડ્રેટ થાય છે, ઘણીવાર પ્રાધાન્યતા, દૃશ્યતા અને ઉપલબ્ધ બેન્ડવિડ્થના સંયોજન પર આધારિત.
• લાભો: પ્રદર્શન અને સંસાધન વપરાશ પર ઝીણવટભર્યું નિયંત્રણ પ્રદાન કરે છે, જે અત્યંત અનુકૂલનશીલ અને પ્રતિભાવશીલ વપરાશકર્તા અનુભવ માટે પરવાનગી આપે છે.
• વૈશ્વિક સુસંગતતા: ખરેખર વૈશ્વિક પ્રેક્ષકોને લક્ષ્ય બનાવતી એપ્લિકેશન્સ માટે નિર્ણાયક, કારણ કે તે વિશ્વભરમાં જોવા મળતી વિવિધ નેટવર્ક પરિસ્થિતિઓ અને ઉપકરણ ક્ષમતાઓમાં ગતિશીલ રીતે ગોઠવી શકે છે.

React સિલેક્ટિવ હાઇડ્રેશન સ્ટ્રેટેજી એન્જિન બનાવવું

કસ્ટમ સિલેક્ટિવ હાઇડ્રેશન એન્જિન વિકસાવવું જટિલ હોઈ શકે છે. Next.js અને Remix જેવા ફ્રેમવર્ક તેમના હાઇડ્રેશન વ્યૂહરચનાઓને વિકસાવી રહ્યા છે, અને લાઇબ્રેરીઓ આ સુવિધા આપવા માટે ઉભરી રહી છે. જોકે, મુખ્ય અમલીકરણ પેટર્નને સમજવી ફાયદાકારક છે.

મુખ્ય અમલીકરણ પેટર્ન

1. હાયર-ઓર્ડર કમ્પોનન્ટ્સ (HOCs) અથવા રેન્ડર પ્રોપ્સ: હાઇડ્રેશન લોજિક ઇન્જેક્ટ કરવા માટે ઘટકોને હાયર-ઓર્ડર કમ્પોનન્ટ સાથે લપેટો અથવા રેન્ડર પ્રોપ પેટર્નનો ઉપયોગ કરો. આ HOC લપેટેલા ઘટકની દૃશ્યતા અને હાઇડ્રેશન સ્થિતિનું સંચાલન કરી શકે છે.
2. સ્ટેટ મેનેજમેન્ટ માટે કોન્ટેક્સ્ટ API: એપ્લિકેશનમાં હાઇડ્રેશન મેનેજરની સ્થિતિ અને પદ્ધતિઓ પ્રદાન કરવા માટે React ના કોન્ટેક્સ્ટ API નો ઉપયોગ કરો, ઘટકોને પોતાને નોંધણી કરવાની અને તેમની હાઇડ્રેશન સ્થિતિ તપાસવાની મંજૂરી આપે છે.
3. કસ્ટમ હુક્સ: કસ્ટમ હુક્સ (દા.ત., `useSelectiveHydration`) બનાવો જે દૃશ્યતાનું નિરીક્ષણ કરવા, પ્રાધાન્યતા તપાસવા અને ચોક્કસ ઘટક માટે હાઇડ્રેશન શરૂ કરવા માટેના લોજિકને સમાવે છે.
4. સર્વર-સાઇડ એકીકરણ: સર્વરને HTML રેન્ડર કરવાની અને સંભવિત રૂપે દરેક ઘટક માટે મેટાડેટા શામેલ કરવાની જરૂર છે જે ક્લાયંટ-સાઇડ હાઇડ્રેશન એન્જિન દ્વારા ઉપયોગમાં લઈ શકાય છે. આ મેટાડેટા HTML તત્વો પર ડેટા એટ્રિબ્યુટ્સ હોઈ શકે છે.

ઉદાહરણ: એક સરળ વ્યૂપોર્ટ-આધારિત હાઇડ્રેશન હુક

ચાલો એક સરળ `useLazyHydration` હુક ધ્યાનમાં લઈએ. આ હુક દલીલો તરીકે ઘટક અને `IntersectionObserver` માટે `threshold` લેશે.

            
import React, { useState, useEffect, useRef } from 'react';

const useLazyHydration = (options = {}) => {
  const [isVisible, setIsVisible] = useState(false);
  const elementRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(elementRef.current);
        }
      },
      {
        root: null, // Observe relative to the viewport
        rootMargin: '0px',
        threshold: options.threshold || 0.1, // Default threshold
      }
    );

    if (elementRef.current) {
      observer.observe(elementRef.current);
    }

    return () => {
      if (elementRef.current) {
        observer.unobserve(elementRef.current);
      }
    };
  }, [options.threshold]);

  return [elementRef, isVisible];
};

export default useLazyHydration;

            

              
                Copy
              
            
          

તમારે પછીથી પેરેન્ટ કમ્પોનન્ટમાં આ હુકનો ઉપયોગ કરવો પડશે:

            
import React, { Suspense } from 'react';
import useLazyHydration from './useLazyHydration';

// Assume MyHeavyComponent is imported lazily using React.lazy
const MyHeavyComponent = React.lazy(() => import('./MyHeavyComponent'));

function LazyComponentWrapper({ children }) {
  const [ref, isVisible] = useLazyHydration({ threshold: 0.5 });

  return (
    

      {isVisible ? (
        Loading component...
}>
          {children}
        
      ) : (
        // Placeholder content while not visible
        

          Placeholder for future content
        
      )}