import React, { Suspense } from 'react';

// ડેટા ફેચિંગનું અનુકરણ કરો (દા.ત., API માંથી)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// એક રિસોર્સ બનાવો જેનો સસ્પેન્સ ઉપયોગ કરી શકે
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;
    },
  };
};

const userData = createResource(fetchData);

// કમ્પોનન્ટ જે રિસોર્સમાંથી વાંચે છે
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    Loading user data...

આ ઉદાહરણમાં:

• `fetchData` એક અસિંક્રોનસ ડેટા ફેચિંગ ઓપરેશનનું અનુકરણ કરે છે.
• `createResource` એક રિસોર્સ બનાવે છે જેનો સસ્પેન્સ ડેટાના લોડિંગ સ્ટેટને ટ્રેક કરવા માટે ઉપયોગ કરી શકે છે.
• `UserProfile` `read` પદ્ધતિનો ઉપયોગ કરીને રિસોર્સમાંથી ડેટા વાંચે છે. જો ડેટા હજી ઉપલબ્ધ ન હોય, તો તે એક પ્રોમિસ થ્રો કરે છે, જે કમ્પોનન્ટને સસ્પેન્ડ કરે છે.
• `Suspense` કમ્પોનન્ટ `UserProfile` ને લપેટાવે છે અને `fallback` પ્રોપ પ્રદાન કરે છે, જે કમ્પોનન્ટ સસ્પેન્ડ હોય ત્યારે પ્રદર્શિત કરવા માટે UI સ્પષ્ટ કરે છે.

કોડ સ્પ્લિટિંગ સાથે સસ્પેન્સ

કોડ સ્પ્લિટિંગનો અમલ કરવા માટે સસ્પેન્સનો ઉપયોગ React.lazy સાથે પણ થઈ શકે છે. આ તમને ફક્ત જરૂર પડ્યે ત્યારે જ કમ્પોનન્ટ્સ લોડ કરવાની મંજૂરી આપે છે, જે પ્રારંભિક પૃષ્ઠ લોડ પ્રદર્શનમાં સુધારો કરે છે.

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

// MyComponent કમ્પોનન્ટને લેઝી લોડ કરો
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Loading component...}>
      
    
  );
};

export default App;

આ ઉદાહરણમાં:

• `React.lazy` નો ઉપયોગ `MyComponent` કમ્પોનન્ટને લેઝીલી લોડ કરવા માટે થાય છે.
• `Suspense` કમ્પોનન્ટ `MyComponent` ને લપેટાવે છે અને `fallback` પ્રોપ પ્રદાન કરે છે, જે કમ્પોનન્ટ લોડ થતી વખતે પ્રદર્શિત કરવા માટે UI સ્પષ્ટ કરે છે.

એરર બાઉન્ડ્રીઝને સમજવું

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

એરર બાઉન્ડ્રીઝની મુખ્ય વિભાવનાઓ

• એરર કેચિંગ: એરર બાઉન્ડ્રીઝ રેન્ડરિંગ દરમિયાન, લાઇફસાઇકલ પદ્ધતિઓમાં, અને તેમની નીચેના સમગ્ર ટ્રીના કન્સ્ટ્રક્ટર્સમાં ભૂલોને પકડે છે.
• ફોલબેક UI: જ્યારે ભૂલ થાય ત્યારે પ્રદર્શિત થતું 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 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

આ ઉદાહરણમાં:

• `ErrorBoundary` કમ્પોનન્ટ `getDerivedStateFromError` અને `componentDidCatch` પદ્ધતિઓને વ્યાખ્યાયિત કરે છે.
• `getDerivedStateFromError` ત્યારે કોલ થાય છે જ્યારે ચાઈલ્ડ કમ્પોનન્ટમાં કોઈ ભૂલ થાય છે. તે ભૂલ થઈ છે તે દર્શાવવા માટે સ્ટેટને અપડેટ કરે છે.
• `componentDidCatch` ભૂલ પકડાયા પછી કોલ થાય છે. તે તમને ભૂલને સેવા અથવા કન્સોલમાં લોગ કરવાની મંજૂરી આપે છે.
• `render` પદ્ધતિ `hasError` સ્ટેટને તપાસે છે અને જો ભૂલ થઈ હોય તો ફોલબેક UI પ્રદર્શિત કરે છે.

એરર બાઉન્ડ્રીઝનો ઉપયોગ કરવો

`ErrorBoundary` કમ્પોનન્ટનો ઉપયોગ કરવા માટે, ફક્ત તે કમ્પોનન્ટ્સને લપેટો જેને તમે તેની સાથે સુરક્ષિત કરવા માંગો છો:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // ભૂલનું અનુકરણ કરો
  throw new Error('An error occurred!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

આ ઉદાહરણમાં, જો `MyComponent` માં કોઈ ભૂલ થાય, તો `ErrorBoundary` કમ્પોનન્ટ ભૂલને પકડશે અને ફોલબેક UI પ્રદર્શિત કરશે.

સસ્પેન્સ અને એરર બાઉન્ડ્રીઝનું સંયોજન

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

સસ્પેન્સ અને એરર બાઉન્ડ્રીઝના સંયોજનનું ઉદાહરણ

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

// ડેટા ફેચિંગનું અનુકરણ કરો (દા.ત., API માંથી)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // સફળ ડેટા ફેચનું અનુકરણ કરો
      // resolve({ name: 'John Doe', age: 30 });

      // ડેટા ફેચિંગ દરમિયાન ભૂલનું અનુકરણ કરો
      reject(new Error('Failed to fetch user data'));

    }, 2000);
  });
};

// એક રિસોર્સ બનાવો જેનો સસ્પેન્સ ઉપયોગ કરી શકે
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;
    },
  };
};

const userData = createResource(fetchData);

// કમ્પોનન્ટ જે રિસોર્સમાંથી વાંચે છે
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    
      Loading user data...}>
        
      
    
  );
};

export default App;

આ ઉદાહરણમાં:

• `ErrorBoundary` કમ્પોનન્ટ `Suspense` કમ્પોનન્ટને લપેટાવે છે.
• `Suspense` કમ્પોનન્ટ `UserProfile` કમ્પોનન્ટને લપેટાવે છે.
• જો `fetchData` ફંક્શન ભૂલ સાથે રિજેક્ટ થાય, તો `Suspense` કમ્પોનન્ટ પ્રોમિસ રિજેક્શનને પકડશે, અને `ErrorBoundary` સસ્પેન્સ દ્વારા થ્રો કરાયેલી ભૂલને પકડશે.
• `ErrorBoundary` પછી ફોલબેક UI પ્રદર્શિત કરશે.
• જો ડેટા સફળતાપૂર્વક ફેચ થાય, તો `Suspense` કમ્પોનન્ટ `UserProfile` કમ્પોનન્ટને પ્રદર્શિત કરશે.

એડવાન્સ્ડ તકનીકો અને શ્રેષ્ઠ પ્રથાઓ

સસ્પેન્સ પ્રદર્શનને શ્રેષ્ઠ બનાવવું

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

કસ્ટમ એરર બાઉન્ડ્રીઝ

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

સસ્પેન્સ સાથે સર્વર-સાઇડ રેન્ડરિંગ (SSR)

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

વિવિધ ભૂલ પરિદ્રશ્યોને હેન્ડલ કરવું

આ વિવિધ ભૂલ પરિદ્રશ્યો અને તેમને કેવી રીતે હેન્ડલ કરવા તે ધ્યાનમાં લો:

• નેટવર્ક ભૂલો: વપરાશકર્તાને માહિતીપ્રદ ભૂલ સંદેશ પ્રદર્શિત કરીને નેટવર્ક ભૂલોને સુંદર રીતે હેન્ડલ કરો.
• API ભૂલો: થયેલી ભૂલને લગતો ચોક્કસ ભૂલ સંદેશ પ્રદર્શિત કરીને API ભૂલોને હેન્ડલ કરો.
• અનપેક્ષિત ભૂલો: ભૂલને લોગ કરીને અને વપરાશકર્તાને સામાન્ય ભૂલ સંદેશ પ્રદર્શિત કરીને અનપેક્ષિત ભૂલોને હેન્ડલ કરો.

ગ્લોબલ એરર હેન્ડલિંગ

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

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

ઈ-કોમર્સ એપ્લિકેશન

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

સોશિયલ મીડિયા પ્લેટફોર્મ

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

ડેશબોર્ડ એપ્લિકેશન

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

નિષ્કર્ષ

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

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