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;

ఈ ఉదాహరణలో:

• `MyComponent` కాంపోనెంట్‌ను లేజీగా లోడ్ చేయడానికి `React.lazy` ఉపయోగించబడుతుంది.
• `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 డౌన్ అయితే, ఒక ఎర్రర్ బౌండరీ ఆ ఎక్స్‌ఛేంజ్ డేటా కోసం ప్రత్యేకంగా ఒక ఎర్రర్ మెసేజ్‌ను ప్రదర్శించగలదు, మొత్తం డాష్‌బోర్డ్ నిరుపయోగంగా మారకుండా నిరోధిస్తుంది.

ముగింపు

రియాక్ట్ సస్పెన్స్ మరియు ఎర్రర్ బౌండరీస్ దృఢమైన మరియు యూజర్-ఫ్రెండ్లీ రియాక్ట్ అప్లికేషన్‌లను నిర్మించడానికి అవసరమైన సాధనాలు. లోడింగ్ స్థితులను నిర్వహించడానికి సస్పెన్స్ ఉపయోగించడం ద్వారా మరియు ఊహించని ఎర్రర్‌లను నిర్వహించడానికి ఎర్రర్ బౌండరీస్ ఉపయోగించడం ద్వారా, మీరు మొత్తం యూజర్ అనుభవాన్ని మెరుగుపరచవచ్చు మరియు డెవలప్‌మెంట్ ప్రక్రియను సులభతరం చేయవచ్చు. ఈ గైడ్ సస్పెన్స్ మరియు ఎర్రర్ బౌండరీస్ యొక్క సమగ్ర అవలోకనాన్ని అందించింది, ప్రాథమిక భావనల నుండి అధునాతన టెక్నిక్‌ల వరకు అన్నింటినీ కవర్ చేసింది. ఈ ఆర్టికల్‌లో వివరించిన ఉత్తమ పద్ధతులను అనుసరించడం ద్వారా, మీరు అత్యంత సవాలుతో కూడిన దృశ్యాలను కూడా నిర్వహించగల దృఢమైన మరియు నమ్మదగిన రియాక్ట్ అప్లికేషన్‌లను నిర్మించవచ్చు.

రియాక్ట్ అభివృద్ధి చెందుతున్న కొద్దీ, ఆధునిక వెబ్ అప్లికేషన్‌లను నిర్మించడంలో సస్పెన్స్ మరియు ఎర్రర్ బౌండరీస్ మరింత ముఖ్యమైన పాత్ర పోషించే అవకాశం ఉంది. ఈ ఫీచర్లను మాస్టర్ చేయడం ద్వారా, మీరు పోటీలో ముందుండవచ్చు మరియు అసాధారణమైన యూజర్ అనుభవాలను అందించవచ్చు.