રિએક્ટ સસ્પેન્સ લોડિંગ સ્ટેટ કમ્પોઝિશન: નેસ્ટેડ લોડિંગ મેનેજમેન્ટ

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

રિએક્ટ સસ્પેન્સની મૂળભૂત બાબતો સમજવી

મૂળભૂત રીતે, સસ્પેન્સ એ એક રિએક્ટ કમ્પોનન્ટ છે જે fallback પ્રોપ સ્વીકારે છે. આ ફોલબેક ત્યારે રેન્ડર થાય છે જ્યારે સસ્પેન્સ દ્વારા લપેટાયેલા કમ્પોનન્ટ(્સ) કંઈક લોડ થવાની રાહ જોતા હોય છે. સૌથી સામાન્ય ઉપયોગના કેસોમાં સમાવેશ થાય છે:

• React.lazy સાથે કોડ સ્પ્લિટિંગ: પ્રારંભિક બંડલનું કદ ઘટાડવા માટે કમ્પોનન્ટ્સને ડાયનેમિકલી ઇમ્પોર્ટ કરવું.
• ડેટા ફેચિંગ: API માંથી ડેટા આવે તેની રાહ જોવી અને પછી તેના પર નિર્ભર કમ્પોનન્ટને રેન્ડર કરવું.

React.lazy સાથે કોડ સ્પ્લિટિંગ

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

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

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

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, MyComponent ફક્ત ત્યારે જ લોડ થાય છે જ્યારે તેની જરૂર હોય. જ્યારે તે લોડ થઈ રહ્યું હોય, ત્યારે fallback (આ કિસ્સામાં, એક સરળ "Loading..." સંદેશ) પ્રદર્શિત થાય છે.

સસ્પેન્સ સાથે ડેટા ફેચિંગ

જ્યારે React.lazy સસ્પેન્સ સાથે સીધું કામ કરે છે, ડેટા ફેચિંગ માટે થોડો અલગ અભિગમ જરૂરી છે. સસ્પેન્સ fetch અથવા axios જેવી સ્ટાન્ડર્ડ ડેટા ફેચિંગ લાઇબ્રેરીઓ સાથે સીધું એકીકૃત થતું નથી. તેના બદલે, તમારે એવી લાઇબ્રેરી અથવા પેટર્નનો ઉપયોગ કરવાની જરૂર છે જે ડેટાની રાહ જોતી વખતે કમ્પોનન્ટને "સસ્પેન્ડ" કરી શકે. એક લોકપ્રિય ઉકેલમાં swr અથવા react-query જેવી ડેટા ફેચિંગ લાઇબ્રેરીનો ઉપયોગ કરવો, અથવા કસ્ટમ રિસોર્સ મેનેજમેન્ટ સ્ટ્રેટેજી લાગુ કરવી શામેલ છે.

અહીં કસ્ટમ રિસોર્સ મેનેજમેન્ટ અભિગમનો ઉપયોગ કરીને એક વૈચારિક ઉદાહરણ છે:

            // Resource.js
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    },
  };
};

export default createResource;

// MyComponent.js
import React from 'react';
import createResource from './Resource';

const fetchData = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: 'Fetched Data!' }), 2000)
  );

const resource = createResource(fetchData());

function MyComponent() {
  const data = resource.read();
  return <p>{data.data}</p>;
}

export default MyComponent;

// App.js
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <Suspense fallback={<p>Loading data...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

સમજૂતી:

• createResource: આ ફંક્શન એક પ્રોમિસ લે છે અને read મેથડ સાથે એક ઓબ્જેક્ટ પરત કરે છે.
• read: આ મેથડ પ્રોમિસનું સ્ટેટસ તપાસે છે. જો તે પેન્ડિંગ હોય, તો તે પ્રોમિસને થ્રો કરે છે, જે કમ્પોનન્ટને સસ્પેન્ડ કરે છે. જો તે રિઝોલ્વ થઈ જાય, તો તે ડેટા પરત કરે છે. જો તે રિજેક્ટ થઈ જાય, તો તે એરર થ્રો કરે છે.
• MyComponent: આ કમ્પોનન્ટ ડેટા એક્સેસ કરવા માટે resource.read() મેથડનો ઉપયોગ કરે છે. જો ડેટા તૈયાર ન હોય, તો કમ્પોનન્ટ સસ્પેન્ડ થાય છે.
• App: MyComponent ને Suspense માં લપેટવામાં આવે છે, જે ડેટા લોડ થતી વખતે ફોલબેક UI પ્રદાન કરે છે.

લોડિંગ સ્ટેટ્સ કમ્પોઝ કરવું: નેસ્ટેડ સસ્પેન્સની શક્તિ

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

બેઝિક નેસ્ટેડ સસ્પેન્સ

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

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

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      <Suspense fallback={<p>Loading header...</p>}>
        <Header />
      </Suspense>
      <div style={{ display: 'flex' }}>
        <Suspense fallback={<p>Loading main content...</p>}>
          <MainContent />
        </Suspense>
        <Suspense fallback={<p>Loading sidebar...</p>}>
          <Sidebar />
        </Suspense>
      </div>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, દરેક કમ્પોનન્ટ (Header, MainContent, અને Sidebar) તેની પોતાની સસ્પેન્સ બાઉન્ડ્રીમાં લપેટાયેલ છે. આનો અર્થ એ છે કે જો Header હજી લોડ થઈ રહ્યું હોય, તો "Loading header..." સંદેશ પ્રદર્શિત થશે, જ્યારે MainContent અને Sidebar હજી પણ સ્વતંત્ર રીતે લોડ થઈ શકે છે. આ વધુ રિસ્પોન્સિવ અને માહિતીપ્રદ યુઝર અનુભવ માટે પરવાનગી આપે છે.

લોડિંગ સ્ટેટ્સને પ્રાધાન્ય આપવું

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

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

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));

function App() {
  return (
    <Suspense fallback={<p>Loading header and content...</p>}>
      <Header />
      <Suspense fallback={<p>Loading main content...</p>}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, Header અને MainContent બંને એક જ, બાહ્ય સસ્પેન્સ બાઉન્ડ્રીમાં લપેટાયેલા છે. આનો અર્થ એ છે કે "Loading header and content..." સંદેશ ત્યાં સુધી પ્રદર્શિત થશે જ્યાં સુધી Header અને MainContent બંને લોડ ન થઈ જાય. MainContent માટેનું આંતરિક સસ્પેન્સ ફક્ત ત્યારે જ ટ્રિગર થશે જો Header પહેલેથી જ લોડ થયેલ હોય, જે કન્ટેન્ટ એરિયા માટે વધુ દાણાદાર લોડિંગ અનુભવ પ્રદાન કરે છે.

એડવાન્સ નેસ્ટેડ લોડિંગ મેનેજમેન્ટ

બેઝિક નેસ્ટિંગ ઉપરાંત, તમે જટિલ એપ્લિકેશન્સમાં લોડિંગ સ્ટેટ્સનું સંચાલન કરવા માટે વધુ એડવાન્સ તકનીકોનો ઉપયોગ કરી શકો છો. આમાં શામેલ છે:

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

કસ્ટમ ફોલબેક કમ્પોનન્ટ્સ

ફોલબેક તરીકે સરળ ટેક્સ્ટ સંદેશાઓનો ઉપયોગ કરવાને બદલે, તમે કસ્ટમ ફોલબેક કમ્પોનન્ટ્સ બનાવી શકો છો જે વધુ સારો યુઝર અનુભવ પ્રદાન કરે છે. આ કમ્પોનન્ટ્સમાં શામેલ હોઈ શકે છે:

• સ્પિનર્સ: એનિમેટેડ લોડિંગ ઇન્ડિકેટર્સ.
• સ્કેલેટન્સ: પ્લેસહોલ્ડર UI એલિમેન્ટ્સ જે વાસ્તવિક કન્ટેન્ટની રચનાની નકલ કરે છે.
• પ્રોગ્રેસ બાર્સ: લોડિંગ પ્રગતિના વિઝ્યુઅલ ઇન્ડિકેટર્સ.

અહીં ફોલબેક તરીકે સ્કેલેટન કમ્પોનન્ટનો ઉપયોગ કરવાનું એક ઉદાહરણ છે:

            import React from 'react';
import Skeleton from 'react-loading-skeleton'; // You'll need to install this library

function LoadingSkeleton() {
  return (
    <div>
      <Skeleton count={3} />
    </div>
  );
}

export default LoadingSkeleton;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import LoadingSkeleton from './LoadingSkeleton';

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

function App() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

આ ઉદાહરણ MyComponent લોડ થતી વખતે સ્કેલેટન પ્લેસહોલ્ડર્સની શ્રેણી પ્રદર્શિત કરવા માટે react-loading-skeleton લાઇબ્રેરીનો ઉપયોગ કરે છે.

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

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

            import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

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

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Loading...</p>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, ErrorBoundary કમ્પોનન્ટ Suspense કમ્પોનન્ટને લપેટે છે. જો MyComponent ના લોડિંગ દરમિયાન કોઈ એરર આવે, તો ErrorBoundary એરરને પકડશે અને "Something went wrong." સંદેશ પ્રદર્શિત કરશે.

ડિબાઉન્સિંગ અને થ્રોટલિંગ

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

ડિબાઉન્સિંગ: કોઈ ફંક્શનના એક્ઝેક્યુશનમાં વિલંબ કરે છે જ્યાં સુધી તે છેલ્લી વાર કોલ થયા પછી અમુક સમય પસાર ન થઈ જાય.

થ્રોટલિંગ: કોઈ ફંક્શન કેટલી ઝડપથી એક્ઝેક્યુટ થઈ શકે છે તે દરને મર્યાદિત કરે છે.

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

ટ્રાન્ઝિશન સાથે સસ્પેન્સને જોડવું

રિએક્ટ ટ્રાન્ઝિશન API (રિએક્ટ 18 માં રજૂ થયું) તમને તમારી એપ્લિકેશનમાં વિવિધ સ્ટેટ્સ, જેમાં લોડિંગ અને લોડેડ સ્ટેટ્સ શામેલ છે, વચ્ચે વધુ સરળ ટ્રાન્ઝિશન બનાવવા દે છે. તમે useTransition નો ઉપયોગ રિએક્ટને સંકેત આપવા માટે કરી શકો છો કે સ્ટેટ અપડેટ એક ટ્રાન્ઝિશન છે, જે આંચકાજનક UI અપડેટ્સને રોકવામાં મદદ કરી શકે છે.

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

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

function App() {
  const [isPending, startTransition] = useTransition();
  const [showComponent, setShowComponent] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowComponent(true);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Loading...' : 'Load Component'}
      </button>
      {showComponent && (
        <Suspense fallback={<p>Loading component...</p>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, "Load Component" બટન પર ક્લિક કરવાથી એક ટ્રાન્ઝિશન ટ્રિગર થાય છે. રિએક્ટ UI ને રિસ્પોન્સિવ રાખતી વખતે MyComponent ના લોડિંગને પ્રાધાન્ય આપશે. isPending સ્ટેટ સૂચવે છે કે ટ્રાન્ઝિશન પ્રગતિમાં છે કે નહીં, જે તમને બટનને ડિસેબલ કરવાની અને યુઝરને વિઝ્યુઅલ પ્રતિસાદ આપવાની મંજૂરી આપે છે.

વાસ્તવિક-દુનિયાના ઉદાહરણો અને દૃશ્યો

નેસ્ટેડ સસ્પેન્સના વ્યવહારિક ઉપયોગોને વધુ સ્પષ્ટ કરવા માટે, ચાલો કેટલાક વાસ્તવિક-દુનિયાના દૃશ્યો પર વિચાર કરીએ:

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

ઉદાહરણ: ઈ-કોમર્સ પ્રોડક્ટ પેજ

ચાલો જોઈએ કે તમે ઈ-કોમર્સ પ્રોડક્ટ પેજ પર નેસ્ટેડ સસ્પેન્સ કેવી રીતે લાગુ કરી શકો છો:

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

const ProductDetails = lazy(() => import('./ProductDetails'));
const ProductReviews = lazy(() => import('./ProductReviews'));
const RelatedProducts = lazy(() => import('./RelatedProducts'));

function ProductPage() {
  return (
    <div>
      <Suspense fallback={<p>Loading product details...</p>}>
        <ProductDetails />
      </Suspense>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Loading product reviews...</p>}>
          <ProductReviews />
        </Suspense>
      </div>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Loading related products...</p>}>
          <RelatedProducts />
        </Suspense>
      </div>
    </div>
  );
}

export default ProductPage;

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, પ્રોડક્ટ પેજના દરેક વિભાગ (પ્રોડક્ટ વિગતો, રિવ્યુઝ, અને સંબંધિત પ્રોડક્ટ્સ) તેની પોતાની સસ્પેન્સ બાઉન્ડ્રીમાં લપેટાયેલ છે. આ દરેક વિભાગને સ્વતંત્ર રીતે લોડ કરવાની મંજૂરી આપે છે, જે વધુ રિસ્પોન્સિવ યુઝર અનુભવ પ્રદાન કરે છે. તમે વધુ દૃષ્ટિની આકર્ષક લોડિંગ ઇન્ડિકેટર પ્રદાન કરવા માટે દરેક વિભાગ માટે ફોલબેક તરીકે કસ્ટમ સ્કેલેટન કમ્પોનન્ટનો ઉપયોગ કરવાનું પણ વિચારી શકો છો.

શ્રેષ્ઠ પદ્ધતિઓ અને વિચારણાઓ

જ્યારે રિએક્ટ સસ્પેન્સ અને નેસ્ટેડ લોડિંગ મેનેજમેન્ટ સાથે કામ કરી રહ્યા હોવ, ત્યારે નીચેની શ્રેષ્ઠ પદ્ધતિઓને ધ્યાનમાં રાખવી મહત્વપૂર્ણ છે:

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

નિષ્કર્ષ

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

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

આ તકનીકોને અપનાવીને, તમે ખાતરી કરી શકો છો કે તમારી એપ્લિકેશન્સ વિશ્વભરના યુઝર્સ માટે, તેમના સ્થાન અથવા નેટવર્ક પરિસ્થિતિઓને ધ્યાનમાં લીધા વિના, એક સરળ અને આનંદદાયક અનુભવ પ્રદાન કરે છે.