React Suspense: ડેટા ફેચિંગ અને કોડ સ્પ્લિટિંગ માટેની એક વિસ્તૃત માર્ગદર્શિકા

React Suspense એ React 16.6 માં રજૂ કરાયેલું એક શક્તિશાળી ફીચર છે જે તમને કોઈ વસ્તુની રાહ જોતી વખતે, જેમ કે ડેટા લોડ થવા અથવા કોડ ડાઉનલોડ થવા માટે, કોમ્પોનન્ટ રેન્ડરિંગને 'સસ્પેન્ડ' કરવાની મંજૂરી આપે છે. આ લોડિંગ સ્ટેટ્સનું સંચાલન કરવા અને એસિંક્રોનસ ઓપરેશન્સને સરળતાથી હેન્ડલ કરીને યુઝર એક્સપિરિયન્સને સુધારવા માટે એક ઘોષણાત્મક રીત પ્રદાન કરે છે. આ માર્ગદર્શિકા તમને Suspense ના કોન્સેપ્ટ્સ, તેના ઉપયોગના કેસો, અને તમારી React એપ્લિકેશન્સમાં તેને કેવી રીતે અમલમાં મૂકવું તેના પ્રેક્ટિકલ ઉદાહરણો દ્વારા લઈ જશે.

React Suspense શું છે?

Suspense એ એક React કોમ્પોનન્ટ છે જે અન્ય કોમ્પોનન્ટ્સને રેપ કરે છે અને જ્યારે તે કોમ્પોનન્ટ્સ કોઈ પ્રોમિસના રિઝોલ્વ થવાની રાહ જોતા હોય ત્યારે તમને ફોલબેક UI (દા.ત., લોડિંગ સ્પિનર) પ્રદર્શિત કરવાની મંજૂરી આપે છે. આ પ્રોમિસ આનાથી સંબંધિત હોઈ શકે છે:

• ડેટા ફેચિંગ: API માંથી ડેટા પુનઃપ્રાપ્ત થવાની રાહ જોવી.
• કોડ સ્પ્લિટિંગ: JavaScript મોડ્યુલ્સ ડાઉનલોડ અને પાર્સ થવાની રાહ જોવી.

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

મુખ્ય કોન્સેપ્ટ્સ

• Suspense કોમ્પોનન્ટ: <Suspense> કોમ્પોનન્ટ પોતે. તે એક fallback પ્રોપ સ્વીકારે છે, જે રેપ કરેલા કોમ્પોનન્ટ્સ સસ્પેન્ડ થાય ત્યારે પ્રદર્શિત કરવા માટેનું UI સ્પષ્ટ કરે છે.
• React.lazy(): એક ફંક્શન જે ડાયનેમિકલી કોમ્પોનન્ટ્સને ઇમ્પોર્ટ કરીને કોડ સ્પ્લિટિંગને સક્ષમ કરે છે. તે એક Promise પરત કરે છે જે કોમ્પોનન્ટ લોડ થાય ત્યારે રિઝોલ્વ થાય છે.
• પ્રોમિસ ઇન્ટિગ્રેશન: Suspense પ્રોમિસ સાથે સરળતાથી સંકલિત થાય છે. જ્યારે કોઈ કોમ્પોનન્ટ એવા પ્રોમિસમાંથી ડેટા રેન્ડર કરવાનો પ્રયાસ કરે છે જે હજી રિઝોલ્વ થયું નથી, ત્યારે તે 'સસ્પેન્ડ' થાય છે અને ફોલબેક UI પ્રદર્શિત કરે છે.

ઉપયોગના કેસો

1. Suspense સાથે ડેટા ફેચિંગ

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

ઉદાહરણ: API માંથી યુઝર ડેટા ફેચ કરવો

ધારો કે તમારી પાસે એક કોમ્પોનન્ટ છે જે API માંથી ફેચ કરેલા યુઝર ડેટાને પ્રદર્શિત કરે છે. Suspense વિના, તમારો કોડ આના જેવો હોઈ શકે છે:

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

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>યુઝર ડેટા લોડ થઈ રહ્યો છે...</p>;
  }

  if (error) {
    return <p>ભૂલ: {error.message}</p>;
  }

  if (!user) {
    return <p>કોઈ યુઝર ડેટા ઉપલબ્ધ નથી.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>ઈમેઈલ: {user.email}</p>
    </div>
  );
}

export default UserProfile;

આ કોડ કામ કરે છે, પરંતુ તેમાં બહુવિધ સ્ટેટ વેરિયેબલ્સ (isLoading, error, user) અને શરતી રેન્ડરિંગ લોજિકનું સંચાલન સામેલ છે. Suspense સાથે, તમે SWR અથવા TanStack Query (અગાઉ React Query) જેવી ડેટા ફેચિંગ લાઇબ્રેરીનો ઉપયોગ કરીને આને સરળ બનાવી શકો છો, જે Suspense સાથે સરળતાથી કામ કરવા માટે ડિઝાઇન કરવામાં આવી છે.

તમે SWR નો Suspense સાથે કેવી રીતે ઉપયોગ કરી શકો છો તે અહીં છે:

import React from 'react';
import useSWR from 'swr';

// એક સરળ fetcher ફંક્શન
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>ભૂલ: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>ઈમેઈલ: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>યુઝર ડેટા લોડ થઈ રહ્યો છે...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

આ ઉદાહરણમાં:

• અમે યુઝર ડેટા ફેચ કરવા માટે useSWR નો ઉપયોગ કરીએ છીએ. suspense: true વિકલ્પ SWR ને જણાવે છે કે જો ડેટા હજી ઉપલબ્ધ ન હોય તો પ્રોમિસ થ્રો કરો.
• UserProfile કોમ્પોનન્ટને લોડિંગ અથવા એરર સ્ટેટ્સનું સ્પષ્ટપણે સંચાલન કરવાની જરૂર નથી. તે ફક્ત યુઝર ડેટા ઉપલબ્ધ હોય ત્યારે તેને રેન્ડર કરે છે.
• <Suspense> કોમ્પોનન્ટ SWR દ્વારા થ્રો કરાયેલા પ્રોમિસને પકડે છે અને ડેટા ફેચ થતી વખતે ફોલબેક UI (<p>યુઝર ડેટા લોડ થઈ રહ્યો છે...</p>) પ્રદર્શિત કરે છે.

આ અભિગમ તમારા કોમ્પોનન્ટ લોજિકને સરળ બનાવે છે અને ડેટા ફેચિંગ વિશે વિચારવું સરળ બનાવે છે.

ડેટા ફેચિંગ માટે વૈશ્વિક વિચારણાઓ:

વૈશ્વિક પ્રેક્ષકો માટે એપ્લિકેશન્સ બનાવતી વખતે, નીચેનાનો વિચાર કરો:

• નેટવર્ક લેટન્સી: જુદા જુદા ભૌગોલિક સ્થળોના યુઝર્સને અલગ અલગ નેટવર્ક લેટન્સીનો અનુભવ થઈ શકે છે. જ્યારે દૂરના સર્વરથી ડેટા મેળવવામાં આવી રહ્યો હોય ત્યારે લોડિંગ ઇન્ડિકેટર્સ પ્રદર્શિત કરીને Suspense વધુ સારો યુઝર એક્સપિરિયન્સ પૂરો પાડવામાં મદદ કરી શકે છે. તમારા યુઝર્સની નજીક તમારા ડેટાને કેશ કરવા માટે કન્ટેન્ટ ડિલિવરી નેટવર્ક (CDN) નો ઉપયોગ કરવાનું વિચારો.
• ડેટા સ્થાનિકીકરણ: ખાતરી કરો કે તમારું API ડેટા સ્થાનિકીકરણને સપોર્ટ કરે છે, જેથી તમે યુઝરની પસંદગીની ભાષા અને ફોર્મેટમાં ડેટા સર્વ કરી શકો.
• API ઉપલબ્ધતા: એક સમાન યુઝર એક્સપિરિયન્સ સુનિશ્ચિત કરવા માટે જુદા જુદા પ્રદેશોમાંથી તમારા APIs ની ઉપલબ્ધતા અને કામગીરી પર નજર રાખો.

2. React.lazy() અને Suspense સાથે કોડ સ્પ્લિટિંગ

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

React કોમ્પોનન્ટ્સના કોડ સ્પ્લિટિંગ માટે React.lazy() ફંક્શન પ્રદાન કરે છે. જ્યારે Suspense સાથે ઉપયોગમાં લેવાય છે, ત્યારે તે તમને કોમ્પોનન્ટ ડાઉનલોડ અને પાર્સ થવાની રાહ જોતી વખતે ફોલબેક UI પ્રદર્શિત કરવાની મંજૂરી આપે છે.

ઉદાહરણ: કોમ્પોનન્ટનું લેઝી લોડિંગ

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

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>લોડ થઈ રહ્યું છે...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

આ ઉદાહરણમાં:

• અમે OtherComponent ને ડાયનેમિકલી ઇમ્પોર્ટ કરવા માટે React.lazy() નો ઉપયોગ કરીએ છીએ. આ એક પ્રોમિસ પરત કરે છે જે કોમ્પોનન્ટ લોડ થાય ત્યારે રિઝોલ્વ થાય છે.
• અમે <OtherComponent /> ને <Suspense> સાથે રેપ કરીએ છીએ અને fallback પ્રોપ પ્રદાન કરીએ છીએ.
• જ્યારે OtherComponent લોડ થઈ રહ્યું હોય, ત્યારે ફોલબેક UI (<p>લોડ થઈ રહ્યું છે...</p>) પ્રદર્શિત થશે. એકવાર કોમ્પોનન્ટ લોડ થઈ જાય, તે ફોલબેક UI ને બદલી દેશે.

કોડ સ્પ્લિટિંગના ફાયદા:

• પ્રારંભિક લોડ સમયમાં સુધારો: પ્રારંભિક વ્યુ માટે ફક્ત જરૂરી કોડ લોડ કરીને, તમે તમારી એપ્લિકેશનને ઇન્ટરેક્ટિવ બનવામાં લાગતો સમય ઘટાડી શકો છો.
• ઘટેલું બંડલ સાઇઝ: કોડ સ્પ્લિટિંગ તમારી એપ્લિકેશનના JavaScript બંડલનું એકંદર કદ ઘટાડવામાં મદદ કરી શકે છે, જે ખાસ કરીને ઓછી-બેન્ડવિડ્થ કનેક્શન્સ પર પર્ફોર્મન્સ સુધારી શકે છે.
• વધુ સારો યુઝર એક્સપિરિયન્સ: ઝડપી પ્રારંભિક લોડ પ્રદાન કરીને અને જરૂર પડે ત્યારે જ કોડ લોડ કરીને, તમે એક સરળ અને વધુ રિસ્પોન્સિવ યુઝર એક્સપિરિયન્સ બનાવી શકો છો.

અદ્યતન કોડ સ્પ્લિટિંગ તકનીકો:

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

3. કોન્કરન્ટ મોડ અને Suspense

Suspense એ React ના કોન્કરન્ટ મોડ માટે એક મુખ્ય ઘટક છે, જે નવા ફીચર્સનો સમૂહ છે જે React ને એક સાથે બહુવિધ કાર્યો પર કામ કરવા સક્ષમ બનાવે છે. કોન્કરન્ટ મોડ React ને મહત્વપૂર્ણ અપડેટ્સને પ્રાથમિકતા આપવા, લાંબા સમયથી ચાલતા કાર્યોને રોકવા અને તમારી એપ્લિકેશનની રિસ્પોન્સિવનેસ સુધારવાની મંજૂરી આપે છે.

કોન્કરન્ટ મોડ અને Suspense સાથે, React આ કરી શકે છે:

• બધો ડેટા ઉપલબ્ધ થાય તે પહેલાં કોમ્પોનન્ટ્સ રેન્ડર કરવાનું શરૂ કરો: React કોઈ કોમ્પોનન્ટ રેન્ડર કરવાનું શરૂ કરી શકે છે ભલે તેની કેટલીક ડેટા નિર્ભરતાઓ હજી પણ ફેચ થઈ રહી હોય. આ React ને આંશિક UI વહેલું બતાવવાની મંજૂરી આપે છે, જે તમારી એપ્લિકેશનના માનવામાં આવતા પર્ફોર્મન્સને સુધારે છે.
• રેન્ડરિંગને રોકો અને ફરી શરૂ કરો: જો React કોઈ કોમ્પોનન્ટ રેન્ડર કરી રહ્યું હોય ત્યારે કોઈ ઉચ્ચ-પ્રાથમિકતાવાળું અપડેટ આવે છે, તો તે રેન્ડરિંગ પ્રક્રિયાને રોકી શકે છે, ઉચ્ચ-પ્રાથમિકતાવાળા અપડેટને હેન્ડલ કરી શકે છે, અને પછી પાછળથી કોમ્પોનન્ટનું રેન્ડરિંગ ફરી શરૂ કરી શકે છે.
• મુખ્ય થ્રેડને બ્લોક કરવાનું ટાળો: કોન્કરન્ટ મોડ React ને મુખ્ય થ્રેડને બ્લોક કર્યા વિના લાંબા સમયથી ચાલતા કાર્યો કરવાની મંજૂરી આપે છે, જે UI ને અનરિસ્પોન્સિવ બનવાથી અટકાવી શકે છે.

કોન્કરન્ટ મોડને સક્ષમ કરવા માટે, તમે React 18 માં createRoot API નો ઉપયોગ કરી શકો છો:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // એક રૂટ બનાવો.
root.render(<App />);

Suspense નો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

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

એરર બાઉન્ડ્રીઝ સાથે એરર હેન્ડલિંગ

જ્યારે Suspense *લોડિંગ* સ્ટેટને હેન્ડલ કરે છે, ત્યારે એરર બાઉન્ડ્રીઝ રેન્ડરિંગ દરમિયાન *એરર* સ્ટેટને હેન્ડલ કરે છે. એરર બાઉન્ડ્રીઝ એ React કોમ્પોનન્ટ્સ છે જે તેમના ચાઇલ્ડ કોમ્પોનન્ટ ટ્રીમાં ક્યાંય પણ JavaScript ભૂલોને પકડે છે, તે ભૂલોને લોગ કરે છે, અને આખા કોમ્પોનન્ટ ટ્રીને ક્રેશ કરવાને બદલે ફોલબેક UI પ્રદર્શિત કરે છે.

અહીં એરર બાઉન્ડ્રીનું એક મૂળભૂત ઉદાહરણ છે:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // સ્ટેટ અપડેટ કરો જેથી આગલું રેન્ડર ફોલબેક UI બતાવશે.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // તમે ભૂલને એરર રિપોર્ટિંગ સર્વિસમાં પણ લોગ કરી શકો છો
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // તમે કોઈપણ કસ્ટમ ફોલબેક UI રેન્ડર કરી શકો છો
      return <h1>કંઈક ખોટું થયું.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

એરર બાઉન્ડ્રીનો ઉપયોગ કરવા માટે, તેને એવા કોમ્પોનન્ટની આસપાસ રેપ કરો જે ભૂલ ફેંકી શકે છે:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Suspense અને એરર બાઉન્ડ્રીઝને જોડીને, તમે એક મજબૂત અને સ્થિતિસ્થાપક એપ્લિકેશન બનાવી શકો છો જે લોડિંગ સ્ટેટ્સ અને ભૂલો બંનેને સરળતાથી હેન્ડલ કરે છે.

વાસ્તવિક-વિશ્વના ઉદાહરણો

અહીં કેટલાક વાસ્તવિક-વિશ્વના ઉદાહરણો છે કે કેવી રીતે Suspense નો ઉપયોગ યુઝર એક્સપિરિયન્સ સુધારવા માટે કરી શકાય છે:

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

ઉદાહરણ: આંતરરાષ્ટ્રીય ઈ-કોમર્સ પ્લેટફોર્મ

વૈશ્વિક સ્તરે ઉત્પાદનો વેચતા આંતરરાષ્ટ્રીય ઈ-કોમર્સ પ્લેટફોર્મનો વિચાર કરો. પ્લેટફોર્મ Suspense અને React.lazy() નો ઉપયોગ આ માટે કરી શકે છે:

• પ્રોડક્ટ છબીઓનું લેઝી લોડિંગ: પ્રોડક્ટ છબીઓને ફક્ત ત્યારે જ લોડ કરવા માટે React.lazy() નો ઉપયોગ કરો જ્યારે તે વ્યુપોર્ટમાં દેખાય. આ ઉત્પાદન સૂચિ પેજના પ્રારંભિક લોડ સમયને નોંધપાત્ર રીતે ઘટાડી શકે છે. દરેક લેઝી-લોડેડ છબીને <Suspense fallback={<img src="placeholder.png" alt="લોડ થઈ રહ્યું છે..." />}> સાથે રેપ કરો જેથી વાસ્તવિક છબી લોડ થતી વખતે પ્લેસહોલ્ડર છબી પ્રદર્શિત થાય.
• દેશ-વિશિષ્ટ કોમ્પોનન્ટ્સનું કોડ સ્પ્લિટિંગ: જો પ્લેટફોર્મમાં દેશ-વિશિષ્ટ કોમ્પોનન્ટ્સ હોય (દા.ત., કરન્સી ફોર્મેટિંગ, એડ્રેસ ઇનપુટ ફીલ્ડ્સ), તો આ કોમ્પોનન્ટ્સને ફક્ત ત્યારે જ લોડ કરવા માટે React.lazy() નો ઉપયોગ કરો જ્યારે યુઝર કોઈ ચોક્કસ દેશ પસંદ કરે.
• સ્થાનિકીકૃત ઉત્પાદન વર્ણનો ફેચ કરો: યુઝરની પસંદગીની ભાષામાં ઉત્પાદન વર્ણનો ફેચ કરવા માટે SWR જેવી ડેટા ફેચિંગ લાઇબ્રેરીનો Suspense સાથે ઉપયોગ કરો. સ્થાનિકીકૃત વર્ણનો ફેચ થતી વખતે લોડિંગ ઇન્ડિકેટર પ્રદર્શિત કરો.

નિષ્કર્ષ

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

ડેટા ફેચિંગ લાઇબ્રેરીઓ અને કોડ સ્પ્લિટિંગ તકનીકો સાથે Suspense ને સંકલિત કરીને, તમે React ના કોન્કરન્ટ મોડની સંપૂર્ણ ક્ષમતાને અનલોક કરી શકો છો અને ખરેખર આધુનિક અને આકર્ષક વેબ એપ્લિકેશન્સ બનાવી શકો છો. Suspense ને અપનાવો અને તમારા React ડેવલપમેન્ટને આગલા સ્તર પર લઈ જાઓ.

વધુ શીખવા માટે

• React Suspense દસ્તાવેજીકરણ
• SWR દસ્તાવેજીકરણ
• TanStack Query દસ્તાવેજીકરણ
• React 18 જાહેરાત (કોન્કરન્ટ મોડ)