Suspense

Vad är Suspense?

• Suspense är en ny React-komponent som introducerades i React 16.6
• Används för att hantera asynkrona operationer i React
• Kan användas för att vänta på att data ska laddas innan komponenter renderas
• Kan användas för att visa en fallback-komponent medan data laddas

Exempel

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

React.lazy

• React.lazy är en funktion som kan användas för att ladda in React-komponenter asynkront
• React.lazy tar emot en funktion som returnerar ett Promise
• Promise:et ska innehålla en modul som innehåller en React-komponent

Demo - Suspense med React.lazy

Demo - Suspense i NextJS