// Stellen Sie sich eine fetchData-Funktion vor, die ein Promise zurückgibt
function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'Alice' });
    }, 2000);
  });
}

// Ein hypothetischer Suspense-fähiger Hook zum Datenabruf
function useUserData() {
  const data = fetch(url);
  if (data.status === 'pending') {
    throw new Promise(resolve => {
      // Das ist es, was Suspense abfängt
      setTimeout(() => resolve(null), 2000); 
    });
  }
  return data.value;
}

function UserProfile() {
  const userData = useUserData(); // Dieser Aufruf könnte unterbrochen werden
  return 
Welcome, {userData.name}!
;
}

function App() {
  return (
    Loading user...

2. Automatisches Batching

Batching ist der Prozess, bei dem mehrere Zustandsaktualisierungen zu einem einzigen Neu-Rendering zusammengefasst werden. Traditionell hat React nur Updates gebatcht, die innerhalb von Event-Handlern auftraten. Updates, die außerhalb von Event-Handlern initiiert wurden (z. B. innerhalb von Promises oder `setTimeout`), wurden nicht gebatcht, was zu unnötigen Neu-Renderings führte.

Wie es mit Concurrency funktioniert: Mit dem Concurrent Mode batcht React automatisch alle Zustandsaktualisierungen, unabhängig davon, woher sie stammen. Das bedeutet, wenn Sie mehrere Zustandsaktualisierungen haben, die schnell nacheinander stattfinden (z. B. durch den Abschluss mehrerer asynchroner Operationen), wird React sie gruppieren und ein einziges Neu-Rendering durchführen, was die Leistung verbessert und den Overhead mehrerer Rendering-Zyklen reduziert.

Beispiel: Angenommen, Sie rufen Daten von zwei verschiedenen APIs ab. Sobald beide abgeschlossen sind, aktualisieren Sie zwei separate Zustandsteile. In älteren React-Versionen könnte dies zwei Neu-Renderings auslösen. Im Concurrent Mode werden diese Updates gebatcht, was zu einem einzigen, effizienteren Neu-Rendering führt.

3. Transitions

Transitions sind ein neues Konzept, das eingeführt wurde, um zwischen dringenden und nicht dringenden Updates zu unterscheiden. Dies ist ein Kernmechanismus zur Ermöglichung des unterbrechbaren Renderings.

Dringende Updates: Dies sind Updates, die sofortiges Feedback erfordern, wie das Tippen in ein Eingabefeld, das Klicken auf eine Schaltfläche oder das direkte Manipulieren von UI-Elementen. Sie sollten sich sofort anfühlen.

Transition-Updates: Dies sind Updates, die länger dauern können und kein sofortiges Feedback erfordern. Beispiele hierfür sind das Rendern einer neuen Seite nach dem Klicken auf einen Link, das Filtern einer großen Liste oder das Aktualisieren verwandter UI-Elemente, die nicht direkt auf einen Klick reagieren. Diese Updates können unterbrochen werden.

Wie es mit Concurrency funktioniert: Mit der `startTransition`-API können Sie bestimmte Zustandsaktualisierungen als Transitions markieren. Der Scheduler von React behandelt diese Updates dann mit niedrigerer Priorität und kann sie unterbrechen, wenn ein dringenderes Update auftritt. Dies stellt sicher, dass, während ein nicht dringendes Update (wie das Rendern einer großen Liste) läuft, dringende Updates (wie das Tippen in eine Suchleiste) priorisiert werden, wodurch die Benutzeroberfläche reaktionsschnell bleibt.

Globales Beispiel: Betrachten Sie eine Reisebuchungs-Website. Wenn ein Benutzer ein neues Ziel auswählt, kann dies eine Kaskade von Updates auslösen: Abrufen von Flugdaten, Aktualisieren der Hotelverfügbarkeit und Rendern einer Karte. Wenn der Benutzer sich sofort entscheidet, die Reisedaten zu ändern, während die ursprünglichen Updates noch verarbeitet werden, ermöglicht die `startTransition`-API React, die Flug-/Hotel-Updates anzuhalten, die dringende Datumsänderung zu verarbeiten und dann möglicherweise den Flug-/Hotelabruf basierend auf den neuen Daten fortzusetzen oder neu zu initiieren. Dies verhindert, dass die Benutzeroberfläche während der komplexen Update-Sequenz einfriert.

Code-Beispiel (illustrativ):

import { useState, useTransition } from 'react';

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleQueryChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    // Markiere dieses Update als eine Transition
    startTransition(() => {
      // Simuliere das Abrufen von Ergebnissen, dies kann unterbrochen werden
      fetchResults(newQuery).then(res => setResults(res));
    });
  };

  return (
    

      
      {isPending && 
Loading results...
}
      

        {results.map(item => (
          
{item.name}
        ))}
      
    
  );
}

4. Bibliotheken und Ökosystem-Integration

Die Vorteile des Concurrent Mode sind nicht auf die Kernfunktionen von React beschränkt. Das gesamte Ökosystem passt sich an. Bibliotheken, die mit React interagieren, wie Routing-Lösungen oder State-Management-Tools, können ebenfalls Concurrency nutzen, um ein reibungsloseres Erlebnis zu bieten.

Beispiel: Eine Routing-Bibliothek kann Transitions verwenden, um zwischen Seiten zu navigieren. Wenn ein Benutzer wegnavigiert, bevor die aktuelle Seite vollständig gerendert wurde, kann das Routing-Update nahtlos unterbrochen oder abgebrochen werden, und die neue Navigation kann Vorrang haben. Dies stellt sicher, dass der Benutzer immer die aktuellste Ansicht sieht, die er beabsichtigt hat.

Wie man Concurrent-Funktionen aktiviert und verwendet

Obwohl der Concurrent Mode ein grundlegender Wandel ist, ist die Aktivierung seiner Funktionen im Allgemeinen unkompliziert und erfordert oft nur minimale Code-Änderungen, insbesondere bei neuen Anwendungen oder bei der Einführung von Funktionen wie Suspense und Transitions.

1. React-Version

Concurrent-Funktionen sind in React 18 und höher verfügbar. Stellen Sie sicher, dass Sie eine kompatible Version verwenden:

npm install react@latest react-dom@latest

2. Root-API (`createRoot`)

Der primäre Weg, sich für Concurrent-Funktionen zu entscheiden, ist die Verwendung der neuen `createRoot`-API beim Mounten Ihrer Anwendung:

// index.js oder main.jsx
import ReactDOM from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render();

Die Verwendung von `createRoot` aktiviert automatisch alle Concurrent-Funktionen, einschließlich automatischem Batching, Transitions und Suspense.

Hinweis: Die ältere `ReactDOM.render`-API unterstützt keine Concurrent-Funktionen. Die Migration zu `createRoot` ist ein wichtiger Schritt zur Freischaltung von Concurrency.

3. Implementierung von Suspense

Wie bereits gezeigt, wird Suspense implementiert, indem Komponenten, die asynchrone Operationen durchführen, mit einer <Suspense>-Grenze umschlossen und eine fallback-Prop bereitgestellt werden.

Best Practices:

• Verschachteln Sie <Suspense>-Grenzen, um Ladezustände granular zu verwalten.
• Verwenden Sie benutzerdefinierte Hooks, die sich in Suspense integrieren, für eine sauberere Datenabruflogik.
• Erwägen Sie die Verwendung von Bibliotheken wie Relay oder Apollo Client, die erstklassige Unterstützung für Suspense bieten.

4. Verwendung von Transitions (`startTransition`)

Identifizieren Sie nicht dringende UI-Updates und umschließen Sie sie mit startTransition.

Wann zu verwenden:

• Aktualisieren von Suchergebnissen, nachdem ein Benutzer tippt.
• Navigieren zwischen Routen.
• Filtern großer Listen oder Tabellen.
• Laden zusätzlicher Daten, die die Benutzerinteraktion nicht sofort beeinflussen.

Beispiel: Für die komplexe Filterung eines großen Datensatzes, der in einer Tabelle angezeigt wird, würden Sie den Filterabfragezustand festlegen und dann startTransition für das eigentliche Filtern und Neu-Rendern der Tabellenzeilen aufrufen. Dies stellt sicher, dass, wenn der Benutzer die Filterkriterien schnell wieder ändert, der vorherige Filtervorgang sicher unterbrochen werden kann.

Vorteile des unterbrechbaren Renderings für ein globales Publikum

Die Vorteile des unterbrechbaren Renderings und des Concurrent Mode werden verstärkt, wenn man eine globale Benutzerbasis mit unterschiedlichen Netzwerkbedingungen und Gerätefähigkeiten berücksichtigt.

• Verbesserte wahrgenommene Leistung: Selbst bei langsameren Verbindungen oder weniger leistungsstarken Geräten bleibt die Benutzeroberfläche reaktionsschnell. Benutzer erleben eine flottere Anwendung, da kritische Interaktionen nie lange blockiert werden.
• Verbesserte Barrierefreiheit: Durch die Priorisierung von Benutzerinteraktionen werden Anwendungen zugänglicher für Benutzer, die auf unterstützende Technologien angewiesen sind oder kognitive Beeinträchtigungen haben, die von einer konsistent reaktionsschnellen Oberfläche profitieren.
• Reduzierte Frustration: Globale Benutzer, die oft in verschiedenen Zeitzonen und mit unterschiedlichen technischen Setups arbeiten, schätzen Anwendungen, die nicht einfrieren oder verzögern. Eine reibungslose UX führt zu höherem Engagement und Zufriedenheit.
• Besseres Ressourcenmanagement: Auf Mobilgeräten oder älterer Hardware, wo CPU und Speicher oft begrenzt sind, ermöglicht unterbrechbares Rendering React, Ressourcen effizient zu verwalten, indem nicht wesentliche Aufgaben angehalten werden, um Platz für kritische zu schaffen.
• Konsistentes Erlebnis über Geräte hinweg: Ob ein Benutzer einen High-End-Desktop im Silicon Valley oder ein günstiges Smartphone in Südostasien verwendet, die Kernreaktionsfähigkeit der Anwendung kann aufrechterhalten werden, was die Lücke bei Hardware- und Netzwerkfähigkeiten überbrückt.

Betrachten Sie eine Sprachlern-App, die von Studenten weltweit genutzt wird. Wenn ein Student eine neue Lektion herunterlädt (eine potenziell lange Aufgabe), während ein anderer versucht, eine schnelle Vokabelfrage zu beantworten, stellt unterbrechbares Rendering sicher, dass die Vokabelfrage sofort beantwortet wird, auch wenn der Download noch läuft. Dies ist entscheidend für Bildungstools, bei denen sofortiges Feedback für das Lernen unerlässlich ist.

Mögliche Herausforderungen und Überlegungen

Obwohl der Concurrent Mode erhebliche Vorteile bietet, ist seine Einführung auch mit einer Lernkurve und einigen Überlegungen verbunden:

• Debugging: Das Debuggen von asynchronen und unterbrechbaren Operationen kann schwieriger sein als das Debuggen von synchronem Code. Das Verständnis des Ausführungsflusses und wann Aufgaben angehalten oder fortgesetzt werden könnten, erfordert sorgfältige Aufmerksamkeit.
• Mentaler Modellwechsel: Entwickler müssen ihr Denken von einem rein sequenziellen Ausführungsmodell zu einem eher nebenläufigen, ereignisgesteuerten Ansatz anpassen. Das Verständnis der Auswirkungen von startTransition und Suspense ist der Schlüssel.
• Externe Bibliotheken: Nicht alle Bibliotheken von Drittanbietern sind aktualisiert, um Concurrency-fähig zu sein. Die Verwendung älterer Bibliotheken, die blockierende Operationen durchführen, könnte immer noch zu UI-Freezes führen. Es ist wichtig sicherzustellen, dass Ihre Abhängigkeiten kompatibel sind.
• State Management: Obwohl die integrierten Concurrency-Funktionen von React leistungsstark sind, erfordern komplexe State-Management-Szenarien möglicherweise sorgfältige Überlegungen, um sicherzustellen, dass alle Updates innerhalb des Concurrent-Paradigmas korrekt und effizient gehandhabt werden.

Zukunft der React Concurrency

Reacts Reise in die Concurrency ist noch nicht abgeschlossen. Das Team verfeinert weiterhin den Scheduler, führt neue APIs ein und verbessert die Entwicklererfahrung. Funktionen wie die Offscreen-API (die es ermöglicht, Komponenten zu rendern, ohne die vom Benutzer wahrgenommene Benutzeroberfläche zu beeinträchtigen, nützlich für das Vor-Rendern oder Hintergrundaufgaben) erweitern die Möglichkeiten, die mit Concurrent Rendering erreicht werden können, weiter.

Da das Web immer komplexer wird und die Erwartungen der Benutzer an Leistung und Reaktionsfähigkeit weiter steigen, wird Concurrent Rendering nicht nur zu einer Optimierung, sondern zu einer Notwendigkeit für die Erstellung moderner, ansprechender Anwendungen, die sich an ein globales Publikum richten.

Fazit

Der React Concurrent Mode und sein Kernkonzept des unterbrechbaren Renderings stellen eine bedeutende Entwicklung in der Art und Weise dar, wie wir Benutzeroberflächen erstellen. Indem wir React ermöglichen, Rendering-Aufgaben anzuhalten, fortzusetzen und zu priorisieren, können wir Anwendungen erstellen, die nicht nur leistungsstark, sondern auch unglaublich reaktionsschnell und widerstandsfähig sind, selbst unter hoher Last oder in eingeschränkten Umgebungen.

Für ein globales Publikum bedeutet dies eine gerechtere und angenehmere Benutzererfahrung. Ob Ihre Benutzer Ihre Anwendung über eine Hochgeschwindigkeits-Glasfaserverbindung in Europa oder ein Mobilfunknetz in einem Entwicklungsland aufrufen, der Concurrent Mode hilft sicherzustellen, dass sich Ihre Anwendung schnell und flüssig anfühlt.

Die Annahme von Funktionen wie Suspense und Transitions und die Migration zur neuen Root-API sind entscheidende Schritte, um das volle Potenzial von React auszuschöpfen. Indem Sie diese Konzepte verstehen und anwenden, können Sie die nächste Generation von Webanwendungen erstellen, die Benutzer weltweit wirklich begeistern.

Wichtige Erkenntnisse:

• Der Concurrent Mode von React ermöglicht unterbrechbares Rendering und befreit sich vom synchronen Blockieren.
• Funktionen wie Suspense, automatisches Batching und Transitions bauen auf diesem Concurrent-Fundament auf.
• Verwenden Sie createRoot, um Concurrent-Funktionen zu aktivieren.
• Identifizieren und markieren Sie nicht dringende Updates mit startTransition.
• Concurrent Rendering verbessert die UX für globale Benutzer erheblich, insbesondere bei unterschiedlichen Netzwerkbedingungen und Geräten.
• Bleiben Sie auf dem Laufenden über die sich entwickelnden Concurrency-Funktionen von React für eine optimale Leistung.

Beginnen Sie noch heute mit der Erkundung des Concurrent Mode in Ihren Projekten und erstellen Sie schnellere, reaktionsschnellere und ansprechendere Anwendungen für alle.