Mönster för React Suspense: Datahämtning och felgränser

React Suspense är en kraftfull funktion som låter dig "pausa" (suspend) renderingen av en komponent medan du väntar på att asynkrona operationer, såsom datahämtning, ska slutföras. Tillsammans med felgränser (Error Boundaries) erbjuder det en robust mekanism för att hantera laddningslägen och fel, vilket resulterar i en smidigare och mer motståndskraftig användarupplevelse. Denna artikel utforskar olika mönster för att effektivt utnyttja Suspense och felgränser i dina React-applikationer.

Förstå React Suspense

I grund och botten är Suspense en mekanism som låter React vänta på något innan en komponent renderas. Detta "något" är vanligtvis en asynkron operation, som att hämta data från ett API. Istället för att visa en tom skärm eller ett potentiellt vilseledande mellantillstånd kan du visa ett fallback-gränssnitt (t.ex. en laddningsspinner) medan datan laddas.

Den största fördelen är förbättrad upplevd prestanda och en trevligare användarupplevelse. Användare får omedelbart visuell feedback som indikerar att något händer, istället för att undra om applikationen har fryst.

Nyckelkoncept

• Suspense-komponent: Komponenten <Suspense> omsluter komponenter som kan pausas. Den accepterar en fallback-prop, som specificerar det gränssnitt som ska renderas medan de omslutna komponenterna är pausade.
• Fallback-gränssnitt: Detta är det gränssnitt som visas medan den asynkrona operationen pågår. Det kan vara allt från en enkel laddningsspinner till en mer avancerad animation.
• Promise-integration: Suspense fungerar med Promises. När en komponent försöker läsa ett värde från ett Promise som ännu inte har lösts, pausar React komponenten och visar fallback-gränssnittet.
• Datakällor: Suspense förlitar sig på datakällor som är medvetna om Suspense. Dessa källor exponerar ett API som låter React upptäcka när data hämtas.

Hämta data med Suspense

För att använda Suspense för datahämtning behöver du ett datahämtningsbibliotek som är medvetet om Suspense. Här är ett vanligt tillvägagångssätt med en anpassad `fetchData`-funktion:

Exempel: Enkel datahämtning

Skapa först en hjälpfunktion för att hämta data. Denna funktion måste hantera "pausnings"-aspekten. Vi kommer att omsluta våra fetch-anrop i en anpassad resurs för att korrekt hantera promisetillståndet.

            // utils/api.js
const wrapPromise = (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 fetchData = (url) => {
  const promise = fetch(url)
    .then((res) => res.json())
    .then((data) => data);
  return wrapPromise(promise);
};

export default fetchData;
            

              
                Copy
              
            
          

Låt oss nu skapa en komponent som använder Suspense för att visa användardata:

            // components/UserProfile.js
import React from 'react';
import fetchData from '../utils/api';

const resource = fetchData('https://jsonplaceholder.typicode.com/users/1');

function UserProfile() {
  const user = resource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  );
}

export default UserProfile;
            

              
                Copy
              
            
          

Slutligen, omslut komponenten UserProfile med <Suspense>:

            // App.js
import React, { Suspense } from 'react';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Suspense fallback={<p>Laddar användardata...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

I det här exemplet försöker komponenten UserProfile läsa user-datan från resource. Om datan ännu inte är tillgänglig (Promiset är fortfarande väntande), pausas komponenten och fallback-gränssnittet ("Laddar användardata...") visas. När datan har hämtats renderas komponenten om med den faktiska användarinformationen.

Fördelar med detta tillvägagångssätt

• Deklarativ datahämtning: Komponenten uttrycker *vilken* data den behöver, inte *hur* den ska hämtas.
• Centraliserad hantering av laddningsläge: Suspense-komponenten hanterar laddningsläget, vilket förenklar komponentlogiken.

Felgränser för motståndskraft

Medan Suspense hanterar laddningslägen på ett smidigt sätt, hanterar det inte i sig fel som kan uppstå under datahämtning eller komponentrendering. Det är här felgränser (Error Boundaries) kommer in.

Felgränser är React-komponenter som fångar JavaScript-fel var som helst i sitt underordnade komponentträd, loggar dessa fel och visar ett fallback-gränssnitt istället för att hela applikationen kraschar. De är avgörande för att bygga motståndskraftiga gränssnitt som kan hantera oväntade fel på ett elegant sätt.

Skapa en felgräns

För att skapa en felgräns måste du definiera en klasskomponent som implementerar livscykelmetoderna static getDerivedStateFromError() och componentDidCatch().

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

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null
    };
  }

  static getDerivedStateFromError(error) {
    // Uppdatera state så att nästa rendering visar fallback-gränssnittet.
    return {
       hasError: true,
       error: error
     };
  }

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

  render() {
    if (this.state.hasError) {
      // Du kan rendera vilket anpassat fallback-gränssnitt som helst
      return (
        <div>
          <h2>Något gick fel.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

Metoden getDerivedStateFromError anropas när ett fel kastas i en underordnad komponent. Den uppdaterar state för att indikera att ett fel har inträffat.

Metoden componentDidCatch anropas efter att ett fel har kastats. Den tar emot felet och felinformationen, som du kan använda för att logga felet till en felrapporteringstjänst eller visa ett mer informativt felmeddelande.

Använda felgränser med Suspense

För att kombinera felgränser med Suspense, omslut helt enkelt komponenten <Suspense> med en <ErrorBoundary>-komponent:

            // App.js
import React, { Suspense } from 'react';
import UserProfile from './components/UserProfile';
import ErrorBoundary from './components/ErrorBoundary';

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Laddar användardata...</p>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Om ett fel nu uppstår under datahämtning eller rendering av komponenten UserProfile kommer felgränsen att fånga felet och visa fallback-gränssnittet, vilket förhindrar att hela applikationen kraschar.

Avancerade Suspense-mönster

Utöver grundläggande datahämtning och felhantering erbjuder Suspense flera avancerade mönster för att bygga mer sofistikerade gränssnitt.

Koddelning med Suspense

Koddelning (code splitting) är processen att dela upp din applikation i mindre delar (chunks) som kan laddas vid behov. Detta kan avsevärt förbättra den initiala laddningstiden för din applikation.

React.lazy och Suspense gör koddelning otroligt enkelt. Du kan använda React.lazy för att dynamiskt importera komponenter och sedan omsluta dem med <Suspense> för att visa ett fallback-gränssnitt medan komponenterna laddas.

            // components/MyComponent.js
import React from 'react';

const MyComponent = React.lazy(() => import('./AnotherComponent'));

function App() {
  return (
    <Suspense fallback={<p>Laddar komponent...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

I det här exemplet laddas MyComponent vid behov. Medan den laddas visas fallback-gränssnittet ("Laddar komponent..."). När komponenten är laddad renderas den som vanligt.

Parallell datahämtning

Suspense låter dig hämta data från flera källor parallellt och visa ett enda fallback-gränssnitt medan all data laddas. Detta kan vara användbart när du behöver hämta data från flera API:er för att rendera en enda komponent.

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

const userResource = fetchData('https://jsonplaceholder.typicode.com/users/1');
const postsResource = fetchData('https://jsonplaceholder.typicode.com/posts?userId=1');

function UserProfile() {
  const user = userResource.read();
  const posts = postsResource.read();

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <h3>Inlägg:</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Laddar användardata och inlägg...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

I det här exemplet hämtar komponenten UserProfile både användardata och inläggsdata parallellt. Komponenten <Suspense> visar ett enda fallback-gränssnitt medan båda datakällorna laddas.

Transition API med useTransition

React 18 introducerade hooken useTransition, som förbättrar Suspense genom att erbjuda ett sätt att hantera UI-uppdateringar som övergångar (transitions). Detta innebär att du kan markera vissa state-uppdateringar som mindre brådskande och förhindra att de blockerar gränssnittet. Detta är särskilt användbart när man hanterar långsammare datahämtning eller komplexa renderingsoperationer, vilket förbättrar den upplevda prestandan.

Så här kan du använda useTransition:

            import React, { useState, Suspense, useTransition } from 'react';
import fetchData from './api';

const resource = fetchData('https://jsonplaceholder.typicode.com/users/1');

function UserProfile() {
  const user = resource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  );
}

function App() {
  const [isPending, startTransition] = useTransition();
  const [showProfile, setShowProfile] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowProfile(true);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        Visa användarprofil
      </button>
      {isPending && <p>Laddar...</p>}
      <Suspense fallback={<p>Laddar användardata...</p>}>
        {showProfile && <UserProfile />}
      </Suspense>
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

I det här exemplet initierar ett klick på knappen "Visa användarprofil" en övergång. startTransition markerar setShowProfile-uppdateringen som en övergång, vilket låter React prioritera andra UI-uppdateringar. Värdet isPending från useTransition indikerar om en övergång pågår, vilket gör att du kan ge visuell feedback (t.ex. inaktivera knappen och visa ett laddningsmeddelande).

Bästa praxis för att använda Suspense och felgränser

• Omslut minsta möjliga område med Suspense: Undvik att omsluta stora delar av din applikation med <Suspense>. Omslut istället bara de komponenter som faktiskt behöver pausas. Detta minimerar påverkan på resten av gränssnittet.
• Använd meningsfulla fallback-gränssnitt: Fallback-gränssnittet bör ge användarna tydlig och informativ feedback om vad som händer. Undvik generiska laddningsspinners; försök istället att ge mer sammanhang (t.ex. "Laddar användardata...").
• Placera felgränser strategiskt: Tänk noga igenom var du ska placera felgränser. Placera dem tillräckligt högt upp i komponentträdet för att fånga fel som kan påverka flera komponenter, men tillräckligt lågt för att undvika att fånga fel som är specifika för en enskild komponent.
• Logga fel: Använd componentDidCatch-metoden för att logga fel till en felrapporteringstjänst. Detta hjälper dig att identifiera och åtgärda fel i din applikation.
• Ge användarvänliga felmeddelanden: Fallback-gränssnittet som visas av felgränser bör ge användarna användbar information om felet och vad de kan göra åt det. Undvik teknisk jargong; använd istället ett tydligt och koncist språk.
• Testa dina felgränser: Se till att dina felgränser fungerar korrekt genom att medvetet kasta fel i din applikation.

Internationella överväganden

När du använder Suspense och felgränser i internationella applikationer, tänk på följande:

• Lokalisering: Se till att fallback-gränssnitten och felmeddelandena är korrekt lokaliserade för varje språk som din applikation stöder. Använd internationaliseringsbibliotek (i18n) som react-intl eller i18next för att hantera översättningar.
• Höger-till-vänster (RTL) layouter: Om din applikation stöder RTL-språk (t.ex. arabiska, hebreiska), se till att fallback-gränssnitten och felmeddelandena visas korrekt i RTL-layouter. Använd logiska CSS-egenskaper (t.ex. margin-inline-start istället för margin-left) för att stödja både LTR- och RTL-layouter.
• Tillgänglighet: Se till att fallback-gränssnitten och felmeddelandena är tillgängliga för användare med funktionsnedsättningar. Använd ARIA-attribut för att ge semantisk information om laddningsläget och felmeddelanden.
• Kulturell hänsyn: Var medveten om kulturella skillnader när du utformar fallback-gränssnitt och felmeddelanden. Undvik att använda bilder eller språk som kan vara stötande eller olämpliga i vissa kulturer. Till exempel kan en vanlig laddningsspinner uppfattas negativt i vissa kulturer.

Exempel: Lokaliserat felmeddelande

Med react-intl kan du skapa lokaliserade felmeddelanden:

            // components/ErrorBoundary.js
import React from 'react';
import { FormattedMessage } from 'react-intl';

class ErrorBoundary extends React.Component {
  // ... (samma som tidigare)

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2><FormattedMessage id="error.title" defaultMessage="Något gick fel." /></h2>
          <p><FormattedMessage id="error.message" defaultMessage="Vänligen försök igen senare." /></p>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

Definiera sedan översättningarna i dina lokaliseringsfiler:

            // locales/en.json
{
  "error.title": "Something went wrong.",
  "error.message": "Please try again later."
}

// locales/sv.json
{
  "error.title": "Något gick fel.",
  "error.message": "Vänligen försök igen senare."
}

            

              
                Copy
              
            
          

Sammanfattning

React Suspense och felgränser är väsentliga verktyg för att bygga moderna, motståndskraftiga och användarvänliga gränssnitt. Genom att förstå och tillämpa de mönster som beskrivs i den här artikeln kan du avsevärt förbättra den upplevda prestandan och den övergripande kvaliteten på dina React-applikationer. Kom ihåg att ta hänsyn till internationalisering och tillgänglighet för att säkerställa att dina applikationer är användbara för en global publik.

Asynkron datahämtning och korrekt felhantering är kritiska aspekter av alla webbapplikationer. Suspense, i kombination med felgränser, erbjuder ett deklarativt och effektivt sätt att hantera dessa komplexiteter i React, vilket resulterar i en smidigare och mer pålitlig användarupplevelse för användare över hela världen.