import React, { Suspense } from 'react';

// Simuleer het ophalen van gegevens (bijv. van een API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Maak een resource die Suspense kan gebruiken
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 dat van de resource leest
const UserProfile = () => {
  const data = userData.read();
  return (
    

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

const App = () => {
  return (
    Gebruikersgegevens laden...

In dit voorbeeld:

• `fetchData` simuleert een asynchrone data-ophalingsbewerking.
• `createResource` creëert een resource die Suspense kan gebruiken om de laadtoestand van de gegevens bij te houden.
• `UserProfile` leest gegevens uit de resource met behulp van de `read`-methode. Als de gegevens nog niet beschikbaar zijn, genereert het een promise, waardoor de component wordt opgeschort.
• De `Suspense`-component omhult `UserProfile` en biedt een `fallback`-prop, die de UI specificeert die moet worden weergegeven terwijl de component is opgeschort.

Suspense met Code Splitting

Suspense kan ook worden gebruikt met React.lazy om code splitting te implementeren. Hierdoor kunt u componenten alleen laden wanneer ze nodig zijn, waardoor de initiële paginalaadsnelheid wordt verbeterd.

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

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

const App = () => {
  return (
    Component laden...}>
      
    
  );
};

export default App;

In dit voorbeeld:

• `React.lazy` wordt gebruikt om het `MyComponent`-component lui te laden.
• De `Suspense`-component omhult `MyComponent` en biedt een `fallback`-prop, die de UI specificeert die moet worden weergegeven terwijl de component wordt geladen.

Error Boundaries begrijpen

Error Boundaries zijn React-componenten die JavaScript-fouten opvangen overal in hun onderliggende componentenboom, die fouten loggen en een fallback UI weergeven in plaats van de hele applicatie te laten crashen. Ze bieden een manier om onverwachte fouten op een elegante manier af te handelen, waardoor de gebruikerservaring wordt verbeterd en uw applicatie robuuster wordt.

Belangrijkste concepten van Error Boundaries

• Fouten opvangen: Error Boundaries vangen fouten op tijdens het renderen, in lifecycle-methoden en in constructors van de hele boom eronder.
• Fallback UI: De UI die wordt weergegeven wanneer een fout optreedt. Dit is meestal een foutmelding of een tijdelijke aanduiding.
• Fouten loggen: Met Error Boundaries kunt u fouten loggen naar een service of console voor foutopsporingsdoeleinden.
• Component Tree Isolation: Error Boundaries isoleren fouten tot specifieke delen van de componentenboom, waardoor ze niet de hele applicatie laten crashen.

Basisimplementatie van Error Boundaries

Hier is een eenvoudig voorbeeld van hoe u een Error Boundary kunt maken:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Werk de status bij zodat de volgende render de fallback UI weergeeft.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // U kunt de fout ook loggen naar een service voor foutrapportage
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // U kunt elke aangepaste fallback UI renderen
      return 
Er is iets misgegaan.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

In dit voorbeeld:

• Het `ErrorBoundary`-component definieert de methoden `getDerivedStateFromError` en `componentDidCatch`.
• `getDerivedStateFromError` wordt aangeroepen wanneer er een fout optreedt in een onderliggend component. Het werkt de status bij om aan te geven dat er een fout is opgetreden.
• `componentDidCatch` wordt aangeroepen nadat een fout is opgevangen. Hiermee kunt u de fout loggen naar een service of console.
• De `render`-methode controleert de status `hasError` en geeft een fallback UI weer als er een fout is opgetreden.

Error Boundaries gebruiken

Om het `ErrorBoundary`-component te gebruiken, omwikkelt u eenvoudig de componenten die u wilt beschermen ermee:

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

const MyComponent = () => {
  // Simuleer een fout
  throw new Error('Er is een fout opgetreden!');
};

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

export default App;

In dit voorbeeld, als er een fout optreedt in `MyComponent`, zal het `ErrorBoundary`-component de fout opvangen en de fallback UI weergeven.

Suspense en Error Boundaries combineren

Suspense en Error Boundaries kunnen worden gecombineerd om een robuuste en uitgebreide strategie voor foutafhandeling te bieden voor asynchrone bewerkingen. Door componenten die kunnen opschorten te omwikkelen met zowel Suspense als Error Boundaries, kunt u zowel laadtoestanden als onverwachte fouten op een elegante manier afhandelen.

Voorbeeld van het combineren van Suspense en Error Boundaries

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

// Simuleer het ophalen van gegevens (bijv. van een API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simuleer een succesvolle data-ophaling
      // resolve({ name: 'John Doe', age: 30 });

      // Simuleer een fout tijdens het ophalen van gegevens
      reject(new Error('Kan gebruikersgegevens niet ophalen'));

    }, 2000);
  });
};

// Maak een resource die Suspense kan gebruiken
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 dat van de resource leest
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Naam: {data.name}
      
Leeftijd: {data.age}
    
  );
};

const App = () => {
  return (
    
      Gebruikersgegevens laden...}>
        
      
    
  );
};

export default App;

In dit voorbeeld:

• Het `ErrorBoundary`-component omhult het `Suspense`-component.
• Het `Suspense`-component omhult het `UserProfile`-component.
• Als de `fetchData`-functie wordt afgewezen met een fout, zal het `Suspense`-component de promise-afwijzing opvangen en zal de `ErrorBoundary` de fout opvangen die door Suspense wordt gegenereerd.
• De `ErrorBoundary` geeft dan de fallback UI weer.
• Als de gegevens succesvol worden opgehaald, geeft het `Suspense`-component het `UserProfile`-component weer.

Geavanceerde technieken en best practices

Suspense-prestaties optimaliseren

• Gebruik memoïsering: Memoïseer componenten die binnen Suspense-grenzen worden weergegeven om onnodige herrenders te voorkomen.
• Vermijd diepe Suspense-bomen: Houd de Suspense-boom ondiep om de impact op de renderingprestaties te minimaliseren.
• Gegevens vooraf ophalen: Haal gegevens vooraf op voordat ze nodig zijn om de kans op opschorting te verkleinen.

Aangepaste Error Boundaries

U kunt aangepaste Error Boundaries maken om specifieke soorten fouten af te handelen of om meer informatieve foutmeldingen te geven. U kunt bijvoorbeeld een Error Boundary maken die een andere fallback UI weergeeft op basis van het type fout dat is opgetreden.

Server-Side Rendering (SSR) met Suspense

Suspense kan worden gebruikt met Server-Side Rendering (SSR) om de initiële paginalaadsnelheid te verbeteren. Bij gebruik van SSR kunt u de initiële status van uw applicatie vooraf renderen op de server en vervolgens de resterende inhoud naar de client streamen. Met Suspense kunt u asynchrone data-ophaling afhandelen tijdens SSR en laadindicatoren weergeven terwijl de gegevens worden gestreamd.

Verschillende foutscenario's afhandelen

Overweeg deze verschillende foutscenario's en hoe u ze kunt afhandelen:

• Netwerkfouten: Handel netwerkfouten elegant af door een informatieve foutmelding aan de gebruiker weer te geven.
• API-fouten: Handel API-fouten af door een foutmelding weer te geven die specifiek is voor de opgetreden fout.
• Onverwachte fouten: Handel onverwachte fouten af door de fout te loggen en een algemene foutmelding aan de gebruiker weer te geven.

Globale foutafhandeling

Implementeer een globaal mechanisme voor foutafhandeling om fouten op te vangen die niet worden opgevangen door Error Boundaries. Dit kan worden gedaan door een globale error handler te gebruiken of door de hele applicatie in een Error Boundary te wikkelen.

Voorbeelden en gebruikssituaties in de praktijk

E-commerce applicatie

In een e-commerce applicatie kan Suspense worden gebruikt om laadindicatoren weer te geven tijdens het ophalen van productgegevens en kunnen Error Boundaries worden gebruikt om fouten af te handelen die optreden tijdens het afrekenproces. Stel u bijvoorbeeld een gebruiker uit Japan voor die een online winkel in de Verenigde Staten bezoekt. Het kan enige tijd duren voordat de productafbeeldingen en beschrijvingen zijn geladen. Suspense kan een eenvoudige laadanimatie weergeven terwijl deze gegevens worden opgehaald van een server die zich mogelijk halverwege de wereld bevindt. Als de betalingsgateway faalt vanwege een tijdelijk netwerkprobleem (veel voorkomend in verschillende internetinfrastructuren wereldwijd), kan een Error Boundary een gebruiksvriendelijk bericht weergeven waarin de gebruiker wordt gevraagd het later opnieuw te proberen.

Social media platform

In een social media platform kan Suspense worden gebruikt om laadindicatoren weer te geven tijdens het ophalen van gebruikersprofielen en berichten, en kunnen Error Boundaries worden gebruikt om fouten af te handelen die optreden bij het laden van afbeeldingen of video's. Een gebruiker die vanuit India surft, kan langere laadtijden ervaren voor media die worden gehost op servers in Europa. Suspense kan een tijdelijke aanduiding tonen totdat de inhoud volledig is geladen. Als de profielgegevens van een bepaalde gebruiker beschadigd zijn (zeldzaam maar mogelijk), kan een Error Boundary voorkomen dat de hele social media feed crasht en in plaats daarvan een eenvoudige foutmelding weergeven, zoals "Kan gebruikersprofiel niet laden".

Dashboard applicatie

In een dashboard applicatie kan Suspense worden gebruikt om laadindicatoren weer te geven tijdens het ophalen van gegevens uit meerdere bronnen en kunnen Error Boundaries worden gebruikt om fouten af te handelen die optreden bij het laden van grafieken of grafieken. Een financieel analist in Londen die toegang heeft tot een wereldwijd investeringsdashboard, kan gegevens laden van meerdere beurzen over de hele wereld. Suspense kan laadindicatoren leveren voor elke gegevensbron. Als de API van één beurs uitvalt, kan een Error Boundary een foutmelding weergeven specifiek voor de gegevens van die beurs, waardoor het hele dashboard niet bruikbaar wordt.

Conclusie

React Suspense en Error Boundaries zijn essentiële hulpmiddelen voor het bouwen van veerkrachtige en gebruiksvriendelijke React-applicaties. Door Suspense te gebruiken om laadtoestanden te beheren en Error Boundaries om onverwachte fouten af te handelen, kunt u de algehele gebruikerservaring verbeteren en het ontwikkelingsproces vereenvoudigen. Deze gids heeft een uitgebreid overzicht gegeven van Suspense en Error Boundaries, waarbij alles is behandeld, van basisconcepten tot geavanceerde technieken. Door de best practices in dit artikel te volgen, kunt u robuuste en betrouwbare React-applicaties bouwen die zelfs de meest uitdagende scenario's aankunnen.

Naarmate React zich blijft ontwikkelen, zullen Suspense en Error Boundaries waarschijnlijk een steeds belangrijkere rol spelen bij het bouwen van moderne webapplicaties. Door deze functies onder de knie te krijgen, kunt u de concurrentie voor blijven en uitzonderlijke gebruikerservaringen leveren.