import React, { Suspense } from 'react';

// Simulera hämtning av data (t.ex. från ett API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Skapa en resurs som Suspense kan använda
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);

// Komponent som läser från resursen
const UserProfile = () => {
  const data = userData.read();
  return (
    

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

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

I detta exempel:

• `fetchData` simulerar en asynkron datahämtningsoperation.
• `createResource` skapar en resurs som Suspense kan använda för att spåra datans laddningstillstånd.
• `UserProfile` läser data från resursen med hjälp av metoden `read`. Om data inte är tillgänglig ännu, kastas ett promise, vilket suspenderar komponenten.
• Komponenten `Suspense` omsluter `UserProfile` och tillhandahåller en `fallback` prop, som anger det UI som ska visas medan komponenten är suspenderad.

Suspense med koddelning

Suspense kan också användas med React.lazy för att implementera koddelning. Detta gör att du kan läsa in komponenter endast när de behövs, vilket förbättrar den initiala sidladdningsprestandan.

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

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

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

export default App;

I detta exempel:

• `React.lazy` används för att lazy-load komponenten `MyComponent`.
• Komponenten `Suspense` omsluter `MyComponent` och tillhandahåller en `fallback` prop, som anger det UI som ska visas medan komponenten läses in.

Förstå felgränser

Felgränser är React-komponenter som fångar JavaScript-fel var som helst i deras underkomponentträd, loggar dessa fel och visar ett fallback-UI istället för att krascha hela applikationen. De ger ett sätt att hantera oväntade fel på ett elegant sätt, vilket förbättrar användarupplevelsen och gör din applikation mer robust.

Nyckelbegrepp för felgränser

• Felfångst: Felgränser fångar fel under rendering, i livscykelmetoder och i konstruktorer för hela trädet nedanför dem.
• Fallback-UI: Det UI som visas när ett fel uppstår. Detta är vanligtvis ett felmeddelande eller en platshållare.
• Felloggning: Felgränser tillåter dig att logga fel till en tjänst eller konsol för felsökningsändamål.
• Komponentträdisolering: Felgränser isolerar fel till specifika delar av komponentträdet, vilket förhindrar att de kraschar hela applikationen.

Grundläggande implementering av felgränser

Här är ett enkelt exempel på hur du skapar en felgräns:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Uppdatera tillståndet så att nästa rendering visar fallback-UI:t.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Du kan också logga felet till en felrapporteringstjänst
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Du kan rendera valfritt anpassat fallback-UI
      return 
Något gick fel.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

I detta exempel:

• Komponenten `ErrorBoundary` definierar metoderna `getDerivedStateFromError` och `componentDidCatch`.
• `getDerivedStateFromError` anropas när ett fel uppstår i en underkomponent. Det uppdaterar tillståndet för att indikera att ett fel har uppstått.
• `componentDidCatch` anropas efter att ett fel har fångats. Det tillåter dig att logga felet till en tjänst eller konsol.
• Metoden `render` kontrollerar tillståndet `hasError` och visar ett fallback-UI om ett fel har uppstått.

Använda felgränser

För att använda komponenten `ErrorBoundary`, omslut helt enkelt de komponenter som du vill skydda med den:

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

const MyComponent = () => {
  // Simulera ett fel
  throw new Error('Ett fel uppstod!');
};

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

export default App;

I detta exempel, om ett fel uppstår i `MyComponent`, kommer komponenten `ErrorBoundary` att fånga felet och visa fallback-UI:t.

Kombinera Suspense och felgränser

Suspense och felgränser kan kombineras för att tillhandahålla en robust och omfattande felhanteringsstrategi för asynkrona operationer. Genom att omsluta komponenter som kan suspendas med både Suspense och felgränser, kan du hantera både laddningstillstånd och oväntade fel på ett elegant sätt.

Exempel på att kombinera Suspense och felgränser

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

// Simulera hämtning av data (t.ex. från ett API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simulera en lyckad datahämtning
      // resolve({ name: 'John Doe', age: 30 });

      // Simulera ett fel under datahämtning
      reject(new Error('Misslyckades med att hämta användardata'));

    }, 2000);
  });
};

// Skapa en resurs som Suspense kan använda
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);

// Komponent som läser från resursen
const UserProfile = () => {
  const data = userData.read();
  return (
    

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

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

export default App;

I detta exempel:

• Komponenten `ErrorBoundary` omsluter komponenten `Suspense`.
• Komponenten `Suspense` omsluter komponenten `UserProfile`.
• Om funktionen `fetchData` avvisas med ett fel, kommer komponenten `Suspense` att fånga promise-avvisningen, och `ErrorBoundary` kommer att fånga felet som kastas av Suspense.
• `ErrorBoundary` kommer sedan att visa fallback-UI:t.
• Om data hämtas framgångsrikt, kommer komponenten `Suspense` att visa komponenten `UserProfile`.

Avancerade tekniker och bästa praxis

Optimera Suspense-prestanda

• Använd Memoization: Memoize-komponenter som renderas inom Suspense-gränser för att förhindra onödiga omrenderingar.
• Undvik djupa Suspense-träd: Håll Suspense-trädet grunt för att minimera påverkan på renderingsprestandan.
• Förhämt data: Förhämt data innan den behövs för att minska sannolikheten för suspension.

Anpassade felgränser

Du kan skapa anpassade felgränser för att hantera specifika typer av fel eller för att tillhandahålla mer informativ felmeddelanden. Du kan till exempel skapa en felgräns som visar ett annat fallback-UI baserat på vilken typ av fel som inträffade.

Server-Side Rendering (SSR) med Suspense

Suspense kan användas med Server-Side Rendering (SSR) för att förbättra den initiala sidladdningsprestandan. När du använder SSR kan du förrendera det initiala tillståndet för din applikation på servern och sedan strömma det återstående innehållet till klienten. Suspense tillåter dig att hantera asynkron datahämtning under SSR och att visa laddningsindikatorer medan data strömmas.

Hantera olika felscenarier

Överväg dessa olika felscenarier och hur du hanterar dem:

• Nätverksfel: Hantera nätverksfel på ett elegant sätt genom att visa ett informativt felmeddelande för användaren.
• API-fel: Hantera API-fel genom att visa ett felmeddelande som är specifikt för felet som inträffade.
• Oväntade fel: Hantera oväntade fel genom att logga felet och visa ett generiskt felmeddelande för användaren.

Global felhantering

Implementera en global felhanteringsmekanism för att fånga fel som inte fångas av felgränser. Detta kan göras genom att använda en global felhanterare eller genom att omsluta hela applikationen i en felgräns.

Verkliga exempel och användningsfall

E-handelsapplikation

I en e-handelsapplikation kan Suspense användas för att visa laddningsindikatorer medan produktdata hämtas, och felgränser kan användas för att hantera fel som uppstår under utcheckningsprocessen. Föreställ dig till exempel en användare från Japan som bläddrar i en onlinebutik som ligger i USA. Produktbilder och beskrivningar kan ta lite tid att ladda. Suspense kan visa en enkel laddningsanimation medan dessa data hämtas från en server som eventuellt ligger halvvägs runt jorden. Om betalningsgatewayn misslyckas på grund av ett tillfälligt nätverksproblem (vanligt i olika internetinfrastrukturer globalt), kan en felgräns visa ett användarvänligt meddelande som uppmanar dem att försöka igen senare.

Social medieplattform

I en social medieplattform kan Suspense användas för att visa laddningsindikatorer medan användarprofiler och inlägg hämtas, och felgränser kan användas för att hantera fel som uppstår när bilder eller videor läses in. En användare som surfar från Indien kan uppleva långsammare laddningstider för media som hostas på servrar i Europa. Suspense kan visa en platshållare tills innehållet är fullständigt laddat. Om en viss användares profildata är korrupt (sällsynt men möjligt), kan en felgräns förhindra att hela det sociala medieflödet kraschar och visa ett enkelt felmeddelande som "Det gick inte att läsa in användarprofilen" istället.

Dashboard-applikation

I en dashboard-applikation kan Suspense användas för att visa laddningsindikatorer medan data hämtas från flera källor, och felgränser kan användas för att hantera fel som uppstår när diagram eller grafer läses in. En finansanalytiker i London som har tillgång till en global investeringsdashboard kan ladda data från flera börser runt om i världen. Suspense kan tillhandahålla laddningsindikatorer för varje datakälla. Om ett börs-API är nere, kan en felgräns visa ett felmeddelande specifikt för den börsens data, vilket förhindrar att hela dashboarden blir oanvändbar.

Slutsats

React Suspense och felgränser är viktiga verktyg för att bygga motståndskraftiga och användarvänliga React-applikationer. Genom att använda Suspense för att hantera laddningstillstånd och felgränser för att hantera oväntade fel, kan du förbättra den övergripande användarupplevelsen och förenkla utvecklingsprocessen. Den här guiden har gett en omfattande översikt över Suspense och felgränser, och täcker allt från grundläggande koncept till avancerade tekniker. Genom att följa de bästa metoderna som beskrivs i den här artikeln, kan du bygga robusta och pålitliga React-applikationer som kan hantera även de mest utmanande scenarierna.

När React fortsätter att utvecklas kommer Suspense och felgränser sannolikt att spela en allt viktigare roll i att bygga moderna webbapplikationer. Genom att bemästra dessa funktioner kan du ligga steget före och leverera exceptionella användarupplevelser.