import React, { Suspense } from 'react';

// Simulate fetching data (e.g., from an API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Create a resource that Suspense can use
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);

// Component that reads from the resource
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`-ஐச் சுற்றி, கூறு இடைநிறுத்தப்பட்டிருக்கும் போது காட்டப்பட வேண்டிய UI-ஐக் குறிப்பிடும் `fallback` பண்பை வழங்குகிறது.

குறியீடு பிரித்தலுடன் சஸ்பென்ஸ்

குறியீடு பிரித்தலைச் செயல்படுத்த ரியாக்ட்.lazy உடனும் சஸ்பென்ஸ் பயன்படுத்தப்படலாம். இது உங்களுக்குத் தேவைப்படும்போது மட்டும் கூறுகளை ஏற்ற அனுமதிக்கிறது, ஆரம்பப் பக்க ஏற்றுதல் செயல்திறனை மேம்படுத்துகிறது.

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

// Lazy load the MyComponent component
const MyComponent = lazy(() => import('./MyComponent'));

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

export default App;

இந்த எடுத்துக்காட்டில்:

• `React.lazy` ஆனது `MyComponent` கூறுகளை சோம்பேறித்தனமாக ஏற்றுவதற்குப் பயன்படுத்தப்படுகிறது.
• `Suspense` கூறு `MyComponent`-ஐச் சுற்றி, கூறு ஏற்றப்படும்போது காட்டப்பட வேண்டிய UI-ஐக் குறிப்பிடும் `fallback` பண்பை வழங்குகிறது.

பிழை எல்லைகளைப் புரிந்துகொள்வது

பிழை எல்லைகள் என்பவை ரியாக்ட் கூறுகளாகும், அவை அவற்றின் குழந்தை கூறு மரத்தில் எங்கும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடித்து, அந்தப் பிழைகளைப் பதிவுசெய்து, முழுப் பயன்பாட்டையும் செயலிழக்கச் செய்வதற்குப் பதிலாக ஒரு பின்னடைவு UI-ஐக் காட்டுகின்றன. அவை எதிர்பாராத பிழைகளை நேர்த்தியாகக் கையாள ஒரு வழியை வழங்குகின்றன, பயனர் அனுபவத்தை மேம்படுத்துகின்றன மற்றும் உங்கள் பயன்பாட்டை மேலும் வலுவானதாக ஆக்குகின்றன.

பிழை எல்லைகளின் முக்கிய கருத்துக்கள்

• பிழை பிடித்தல்: பிழை எல்லைகள் ரெண்டரிங் போது, வாழ்க்கைச் சுழற்சி முறைகளில், மற்றும் அவற்றின் கீழுள்ள முழு மரத்தின் கன்ஸ்ட்ரக்டர்களிலும் பிழைகளைப் பிடிக்கின்றன.
• பின்னடைவு UI: ஒரு பிழை ஏற்படும்போது காட்டப்படும் 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 
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 = () => {
  // Simulate an error
  throw new Error('An error occurred!');
};

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

export default App;

இந்த எடுத்துக்காட்டில், `MyComponent`-இல் ஒரு பிழை ஏற்பட்டால், `ErrorBoundary` கூறு பிழையைப் பிடித்து பின்னடைவு UI-ஐக் காட்டும்.

சஸ்பென்ஸ் மற்றும் பிழை எல்லைகளை இணைத்தல்

ஒத்திசைவற்ற செயல்பாடுகளுக்கு ஒரு வலுவான மற்றும் விரிவான பிழை கையாளுதல் உத்தியை வழங்க சஸ்பென்ஸ் மற்றும் பிழை எல்லைகளை இணைக்கலாம். சஸ்பென்ஸ் மற்றும் பிழை எல்லைகள் இரண்டையும் கொண்டு இடைநிறுத்தப்படக்கூடிய கூறுகளைச் சுற்றுவதன் மூலம், நீங்கள் ஏற்றுதல் நிலைகள் மற்றும் எதிர்பாராத பிழைகள் இரண்டையும் நேர்த்தியாகக் கையாளலாம்.

சஸ்பென்ஸ் மற்றும் பிழை எல்லைகளை இணைப்பதற்கான எடுத்துக்காட்டு

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

// Simulate fetching data (e.g., from an API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simulate a successful data fetch
      // resolve({ name: 'John Doe', age: 30 });

      // Simulate an error during data fetching
      reject(new Error('Failed to fetch user data'));

    }, 2000);
  });
};

// Create a resource that Suspense can use
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);

// Component that reads from the resource
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 செயலிழந்தால், ஒரு பிழை எல்லை அந்தப் பங்குச் சந்தையின் தரவிற்காக குறிப்பாக ஒரு பிழைச் செய்தியைக் காட்டலாம், முழு டாஷ்போர்டும் பயன்படுத்த முடியாததாக மாறுவதைத் தடுக்கும்.

முடிவுரை

ரியாக்ட் சஸ்பென்ஸ் மற்றும் பிழை எல்லைகள் மீள்திறன் மிக்க மற்றும் பயனர் நட்பு ரியாக்ட் பயன்பாடுகளை உருவாக்குவதற்கான அத்தியாவசிய கருவிகளாகும். ஏற்றுதல் நிலைகளை நிர்வகிக்க சஸ்பென்ஸையும், எதிர்பாராத பிழைகளைக் கையாள பிழை எல்லைகளையும் பயன்படுத்துவதன் மூலம், நீங்கள் ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்தலாம் மற்றும் மேம்பாட்டு செயல்முறையை எளிதாக்கலாம். இந்த வழிகாட்டி சஸ்பென்ஸ் மற்றும் பிழை எல்லைகள் பற்றிய ஒரு விரிவான கண்ணோட்டத்தை வழங்கியுள்ளது, இது அடிப்படைக் கருத்துக்கள் முதல் மேம்பட்ட நுட்பங்கள் வரை அனைத்தையும் உள்ளடக்கியது. இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், நீங்கள் மிகவும் சவாலான சூழ்நிலைகளைக் கூட கையாளக்கூடிய வலுவான மற்றும் நம்பகமான ரியாக்ட் பயன்பாடுகளை உருவாக்க முடியும்.

ரியாக்ட் தொடர்ந்து வளர்ச்சியடைந்து வருவதால், நவீன வலைப் பயன்பாடுகளை உருவாக்குவதில் சஸ்பென்ஸ் மற்றும் பிழை எல்லைகள் பெருகிய முறையில் முக்கிய பங்கு வகிக்க வாய்ப்புள்ளது. இந்த அம்சங்களில் தேர்ச்சி பெறுவதன் மூலம், நீங்கள் வளைவுக்கு முன்னால் இருக்க முடியும் மற்றும் விதிவிலக்கான பயனர் அனுபவங்களை வழங்க முடியும்.