Wie man mit Reacts Transition Hook die Blockierung der UI vermeidet und die Leistung optimiert

In modernen Webanwendungen sind reaktive Frameworks wie React das Rückgrat für das Handling von Benutzerinteraktionen und der Verwaltung des UI-Zustands. Doch beim Erstellen von interaktiven Komponenten, die große Datenmengen oder komplexe Rendering-Operationen erfordern, kann es zu einer Blockierung der Benutzeroberfläche kommen. Dies führt dazu, dass die gesamte Anwendung während der Berechnung oder der Rendering-Prozesse einfriert und für den Nutzer unbrauchbar wird. React bietet Lösungen wie den Transition Hook, um dieses Problem zu mildern und eine flüssigere Benutzererfahrung zu gewährleisten.

Einführung in die Blockierung der UI

Die Blockierung der UI tritt auf, wenn eine Reaktion auf eine Benutzeraktion, wie z.B. das Laden von Kommentaren, die gesamte Benutzeroberfläche blockiert. Wenn die Rendering-Zeit einer Komponente signifikant wird, wie es oft bei der Anzeige von Tausenden von Kommentaren oder umfangreichen Tabellen der Fall ist, kann der gesamte UI-Thread blockiert werden. Der Benutzer hat dann das Gefühl, dass die Anwendung nicht reagiert, bis der Rendering-Prozess abgeschlossen ist.

Simulierung der Blockierung der UI

Ein praktisches Beispiel zur Veranschaulichung dieser Problematik ist die Implementierung einer Kommentar-Sektion, die absichtlich langsam gemacht wird, um die Auswirkungen der Blockierung der UI zu demonstrieren. Zuerst wird ein Comment Component erstellt, das absichtlich verzögert wird. In diesem Fall wird die Rendering-Zeit auf eine Millisekunde gesetzt, was eine "kostenintensive" Operation darstellt.

jsx
Copy code
let startTime = performance.now();
while (performance.now() - startTime < 1) {
  // Keine Operation für 1 ms
}

Der Übergang zur Lösung: Der Transition Hook

Die Lösung für das Blockierungsproblem, das durch Rendering-intensive Komponenten verursacht wird, ist der Transition Hook. Dieser Hook ermöglicht es, die Darstellung von Komponenten ohne die Blockierung des Haupt-UI-Threads zu steuern. Der useTransition Hook wird wie folgt verwendet:

javascript
Copy code
const [isPending, startTransition] = useTransition();

Mit diesem Hook können Entwickler Operationen als Übergänge markieren, die in den Hintergrund treten, sodass der UI-Thread nicht blockiert wird. Der Übergang läuft asynchron und lässt die UI weiterhin reagieren, auch wenn die Daten im Hintergrund verarbeitet werden. Wenn der Übergang läuft, bleibt der Zustand der UI und deren Interaktivität erhalten, was zu einer besseren Benutzererfahrung führt.

In unserem Kommentar-Beispiel können wir den useTransition Hook nutzen, um die Anzeige von Kommentaren zu optimieren, sodass die Interaktionen mit der Seite flüssiger und ohne Blockierungen erfolgen.

Beispiel: Integration des Transition Hooks

Um die Blockierung zu vermeiden, integrieren wir den Transition Hook in das Kommentar-Rendering. Im Folgenden sehen wir den aktualisierten Code, der es uns ermöglicht, die Anzeige von Kommentaren asynchron zu steuern, ohne den gesamten UI-Thread zu blockieren.

javascript
Copy code
import { useState, useTransition } from 'react';

export function CommentSection() {
  const [showComments, setShowComments] = useState(false);
  const [isPending, startTransition] = useTransition();
  function handleClick() {
    startTransition(() => {
      setShowComments((prev) => !prev);
    });
  }
  return (
    <div>
      <button onClick={handleClick}>
        {showComments ? 'Hide' : 'Show'} comments
      </button>
      {showComments && <CommentList />}
    </div>
  );
}

Zusätzliche Hinweise zur Verwendung von Transitions

Obwohl der Transition Hook eine leistungsstarke Möglichkeit bietet, UI-Blockierungen zu vermeiden, gibt es bestimmte Einschränkungen, die beachtet werden sollten. Zum Beispiel sollten Transitions nicht für die Handhabung von kontrollierten Eingaben verwendet werden, da bei Eingabefeldern eine sofortige Reaktion erforderlich ist, die durch Transitions verzögert werden könnte. Ebenso sollten alle Statusänderungen innerhalb eines Transitions-Callbacks sofort durchgeführt werden, ohne dass auf asynchrone Vorgänge gewartet wird.

Wenn die Anwendung eine aufwendige Berechnung durchführen muss, aber die UI dennoch nicht blockiert werden soll, ist der Transition Hook die ideale Wahl. Es ist jedoch wichtig, Transitions in den richtigen Kontexten zu verwenden, da sie nicht für alle Arten von Zustandsaktualisierungen geeignet sind.

Fazit

Die Verwendung des Transition Hooks in React ermöglicht eine bedeutende Verbesserung der Benutzererfahrung, indem sie sicherstellt, dass Rendering-intensive Operationen wie das Anzeigen von Kommentaren nicht mehr die gesamte Anwendung blockieren. Entwickler sollten jedoch auch die spezifischen Anwendungsfälle und Einschränkungen dieses Hooks im Auge behalten, um sicherzustellen, dass er effizient und korrekt eingesetzt wird.

Wie baut man eigene React-Hooks?

React bietet eine große Flexibilität bei der Entwicklung von Anwendungen, und eine der mächtigsten Funktionen sind die sogenannten "Hooks". Diese ermöglichen es Entwicklern, State und andere React-Funktionen in Funktionskomponenten zu verwenden. Während die vorgefertigten Hooks wie useState, useEffect und useContext in den meisten Anwendungen ausreichen, gibt es Szenarien, in denen die Erstellung eigener Hooks erforderlich ist. Die Möglichkeit, benutzerdefinierte Hooks zu erstellen, ist ein wesentliches Werkzeug, um die Wartbarkeit und Wiederverwendbarkeit des Codes in größeren Projekten zu verbessern. In dieser Hinsicht ist es wichtig zu verstehen, wie man eigene Hooks erstellt und wann dies sinnvoll ist.

Ein benutzerdefinierter Hook ist einfach eine Funktion, die ein oder mehrere React-Hooks verwendet und zusätzliche Logik kapselt. Dies kann besonders hilfreich sein, wenn ähnliche Logik in mehreren Komponenten benötigt wird, beispielsweise bei der Verwaltung von API-Anfragen, Zustandsänderungen oder komplexeren Geschäftslogiken. Durch die Kapselung dieser Logik in einem Hook können Entwickler den Code besser organisieren und redundante Logik vermeiden. Diese Technik sorgt nicht nur für eine klarere Struktur, sondern erleichtert auch das Testen und die Fehlerbehebung.

javascript
Copy code
import { useState, useEffect } from 'react';
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {

    const fetchData = async () => {

      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, loading, error };
}

Dieser Hook kapselt die Logik für das Abrufen von Daten und den Zustand des Ladens oder Fehlers, sodass jede Komponente, die ihn verwendet, diese Informationen auf einfache Weise abrufen kann. Die Verwendung dieses Hooks in einer Komponente könnte folgendermaßen aussehen:

javascript
Copy code
const App = () => {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

Neben der Erstellung einfacher benutzerdefinierter Hooks können auch komplexere Hooks entwickelt werden, die mehrere interne Zustände oder Effekte kombinieren. Ein Beispiel hierfür ist ein Debounced History State Hook, der verwendet wird, um eine Zustandsänderung erst nach einer Verzögerung zu speichern. Dies kann nützlich sein, wenn man den Zustand von Benutzereingaben verfolgen möchte, ohne dass bei jeder Eingabe eine sofortige Aktualisierung der Geschichte erfolgt.

Ein solches Hook könnte folgendermaßen aussehen:

javascript
Copy code
import { useState, useEffect } from 'react';
function useDebouncedHistoryState(initialValue, delay) {
  const [state, setState] = useState(initialValue);
  const [debouncedState, setDebouncedState] = useState(initialValue);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedState(state);
    }, delay);
    return () => {
      clearTimeout(handler);
    };
  }, [state, delay]);
  return [debouncedState, setState];
}

Dieser Hook speichert den aktuellen Zustand nach einer festgelegten Verzögerung und kann für verschiedene Zwecke eingesetzt werden, z. B. bei der Implementierung einer Autovervollständigung oder der Verarbeitung von Benutzereingaben in Echtzeit.

Für Entwickler, die neu in der Entwicklung von benutzerdefinierten Hooks sind, kann es zunächst schwierig erscheinen, wann und wie diese eingesetzt werden sollten. Ein häufiges Missverständnis ist, dass man benutzerdefinierte Hooks für jede Kleinigkeit erstellen muss. Oft reicht es, sich auf die wichtigen wiederverwendbaren Logikbereiche zu konzentrieren und diese in Hooks auszulagern, die gut dokumentiert und getestet sind.

Zusätzlich ist es sinnvoll, bei der Erstellung von Hooks auch die Testbarkeit im Auge zu behalten. Insbesondere in größeren Projekten mit vielen benutzerdefinierten Hooks ist es wichtig, sicherzustellen, dass die Logik korrekt funktioniert und keine unerwünschten Nebeneffekte auftreten. React bietet dafür hervorragende Tools, wie die React Testing Library, mit denen Entwickler Hooks testen und sicherstellen können, dass sie die erwartete Funktionalität bieten.

Es sollte auch betont werden, dass benutzerdefinierte Hooks nicht nur für die Zustandsverwaltung nützlich sind. Sie können auch verwendet werden, um die Kommunikation mit externen APIs zu abstrahieren, Anwendungszustände wie das Laden oder Fehler zu verwalten oder wiederverwendbare UI-Komponenten zu erstellen, die immer wieder verwendet werden können.

Wann sollten wir den Memo- und Callback-Hook in React verwenden?

In der Welt von React werden Hooks als Werkzeuge verwendet, um die Funktionsweise von Komponenten zu optimieren und bestimmte Probleme in der Anwendungsentwicklung zu lösen. Zwei solche Hooks, die oft im Zusammenhang mit Leistungsoptimierungen erwähnt werden, sind der useMemo- und der useCallback-Hook. Beide sind mächtige Werkzeuge, die helfen können, die Leistung von React-Anwendungen zu steigern, indem sie unnötige Berechnungen und Renderzyklen vermeiden. Doch wie und wann sollten diese Hooks sinnvoll eingesetzt werden?

Der useMemo-Hook ist dafür zuständig, Werte zu speichern und nur dann neu zu berechnen, wenn sich die Abhängigkeiten des Werts ändern. Dies ist besonders nützlich, wenn teure Berechnungen in einer Komponente stattfinden, deren Ergebnisse nicht jedes Mal neu berechnet werden müssen, wenn die Komponente gerendert wird. Ein Beispiel: Wenn eine Komponente eine Liste von Items filtert, sortiert oder auf eine andere Weise verarbeitet, kann es sinnvoll sein, den gefilterten oder sortierten Wert in einem useMemo-Hook zu speichern. Auf diese Weise wird diese Berechnung nur dann erneut durchgeführt, wenn sich die Eingabewerte ändern, was die Gesamtleistung der Anwendung verbessert. Der Hook wird jedoch nur dann verwendet, wenn ein tatsächliches Leistungsproblem vorliegt – das heißt, wenn die React-Compiler-Optimierungen nicht ausreichen, um die gewünschte Leistung zu erzielen. Ohne ein solches Problem kann der Einsatz von useMemo unnötig und sogar kontraproduktiv sein, da React intern bereits eine effiziente Verwaltung der Renderzyklen bietet.

Es gibt jedoch einen wichtigen Punkt zu beachten: Diese Hooks sollten nicht in jedem Fall verwendet werden. Sie sind nur dann sinnvoll, wenn es ein erkennbares Leistungsproblem gibt. Das bedeutet, dass sie in der Regel nur dann verwendet werden sollten, wenn man auf wiederholte und teure Berechnungen oder Renderzyklen stößt, die die Benutzererfahrung beeinträchtigen. In den meisten Fällen wird der React-Compiler eine sehr gute Leistung bieten, ohne dass diese speziellen Optimierungen notwendig sind.

Zusätzlich zu den Grundlagen des useMemo- und useCallback-Hooks gibt es auch fortgeschrittene Hook-Varianten, die in speziellen Fällen hilfreich sein können. Beispielsweise gibt es den useLayoutEffect-Hook, der ähnlich wie useEffect ist, aber synchron ausgeführt wird, nachdem alle DOM-Manipulationen abgeschlossen sind. Dies ist besonders nützlich, wenn Sie den DOM direkt manipulieren oder das Layout der Seite vor dem Rendering anpassen müssen. Der useInsertionEffect-Hook ist eine noch speziellere Variante, die vor den Layout-Effekten ausgeführt wird und hauptsächlich für die Verwendung in CSS-in-JS-Bibliotheken gedacht ist. Diese fortgeschrittenen Hooks bieten noch mehr Kontrolle über den Rendering-Prozess, sollten aber nur in wirklich speziellen Anwendungsfällen eingesetzt werden, da sie zu einer Verlangsamung der Anwendung führen können, wenn sie unnötig verwendet werden.

Es ist auch wichtig zu wissen, dass es im React-Ökosystem eine Vielzahl weiterer Hooks gibt, die von der Community entwickelt wurden. Diese können für spezifische Anwendungsfälle, wie z.B. das Verwalten von Zustand in der Anwendung oder die Implementierung von Debouncing, sehr nützlich sein. Einige dieser Hooks, wie der useLocalStorage-Hook, erlauben es, Daten im lokalen Speicher des Browsers zu speichern, was für persistenten Zustand oder Authentifizierungs-Token nützlich sein kann.

Die wichtigsten Erkenntnisse über die Verwendung von Memo- und Callback-Hooks sind:

• Diese Hooks sind leistungsoptimierende Werkzeuge, die dann zum Einsatz kommen sollten, wenn es ein echtes Leistungsproblem gibt, das durch Reacts eingebaute Mechanismen nicht zufriedenstellend gelöst wird.

• Der useMemo-Hook hilft, teure Berechnungen zu optimieren, indem er deren Wiederholung vermeidet.

• Der useCallback-Hook verhindert unnötige Neudefinitionen von Funktionen, die als Props weitergegeben werden, und optimiert damit das Renderverhalten von Komponenten.

• Beide Hooks sollten nicht in jedem Fall verwendet werden, sondern nur, wenn sie nachweislich die Performance verbessern.

Wie man ein Projekt mit Vite und React einrichtet und Best Practices umsetzt

Nachdem Sie den Ordner aus den bereitgestellten GitHub-Codebeispielen geklont haben, wird eine Benachrichtigung angezeigt, die darauf hinweist, dass ein Git-Repository gefunden wurde. Diese können Sie einfach schließen, da wir nur den Ordner „Chapter01_1“ öffnen möchten. Sobald Visual Studio Code (VS Code) bereit ist, können wir fortfahren und ein neues Projekt mit Vite einrichten.

Vite ist eine der beliebtesten Optionen für die lokale Entwicklung und ermöglicht die schnelle Einrichtung eines modernen Frontend-Projekts. Laut der Umfrage „The State of JS 2024“ ist Vite besonders bei Entwicklern geschätzt, da es eine herausragende Leistung bietet und eine unkomplizierte Konfiguration ermöglicht. In diesem Kapitel richten wir unser Projekt mit Vite ein, da es eine schnelle und einfache Möglichkeit bietet, eine moderne Entwicklungsumgebung aufzubauen.

Um Ihr Projekt mit Vite einzurichten, gehen Sie folgendermaßen vor:

1. Öffnen Sie das Terminal in VS Code über die Menüleiste „Terminal | Neues Terminal“.

2. Geben Sie im Terminal den folgenden Befehl ein: $ npm create [email protected] . (das . am Ende sorgt dafür, dass das Projekt im aktuellen Ordner erstellt wird). Bestätigen Sie mit Enter.

3. Wenn Sie gefragt werden, ob „create-vite“ installiert werden soll, tippen Sie „y“ und drücken Sie erneut Enter.

4. Sollten Sie gefragt werden, ob der aktuelle Ordner leer ist, wählen Sie die Option „Remove existing files and continue“, um bestehende Dateien zu entfernen und fortzufahren.

5. Wenn Sie nach dem Paketnamen gefragt werden, bestätigen Sie einfach den Standardnamen, indem Sie Enter drücken.

6. Wählen Sie „React“ als Framework aus, wenn Sie dazu aufgefordert werden, und drücken Sie Enter.

7. Wählen Sie JavaScript als Variante, da in diesem Buch nur plain JavaScript verwendet wird.

8. Überprüfen Sie die Datei package.json, um sicherzustellen, dass die Versionen der Abhängigkeiten mit den folgenden übereinstimmen:

   json
   Copy code
   "dependencies": {
   
     "react": "19.0.0",
     "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@eslint/js": "9.19.0",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
     "@vitejs/plugin-react": "4.3.4",
     "eslint": "9.19.0",
     "eslint-plugin-react": "7.37.4",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-react-refresh": "0.4.18",
     "globals": "15.14.0",
     "vite": "6.1.0"
   }
   

9. Führen Sie im Terminal den Befehl npm install aus, um alle Abhängigkeiten zu installieren.

10. Starten Sie den Entwicklungsserver mit npm run dev und bestätigen Sie, dass alles funktioniert, indem Sie die Anwendung im Browser aufrufen. Der Server sollte Ihnen eine URL anzeigen, unter der die App läuft. Öffnen Sie diese URL in Ihrem Browser.

Nun haben wir ein einfaches Projekt mit Vite und React eingerichtet, das auf lokale Entwicklungsänderungen reagiert. Um das Projekt weiter zu testen, klicken Sie auf die Schaltfläche „count is 0“, und der Wert sollte bei jedem Klick erhöht werden.

Alternativen zu Vite

Es gibt mehrere Alternativen zu Vite, wie z. B. Webpack, Rollup und Parcel. Diese Tools bieten umfangreiche Konfigurationsmöglichkeiten, jedoch erfordert ihre Nutzung häufig einen komplexeren Setup-Prozess und ist weniger optimiert für die Entwicklungsumgebung, da sie zuerst den gesamten Code bündeln müssen, bevor er im Browser ausgeführt wird. Vite hingegen unterstützt das ECMAScript-Modul-Format (ESM) nativ und benötigt nur wenig Konfiguration, um loszulegen.

Ein neuerer Bundler, der vielversprechend ist, ist Rolldown, aber zu diesem Zeitpunkt noch in einer frühen Entwicklungsphase.

Bestehende Best Practices durch ESLint und Prettier umsetzen

Nun, da das Projekt eingerichtet ist, ist es wichtig, Tools wie ESLint und Prettier zu integrieren, die für eine konsistente Codequalität sorgen und Best Practices durchsetzen. ESLint hilft dabei, gängige Fehler und unsaubere Codierungspraktiken zu vermeiden, während Prettier dafür sorgt, dass der Code immer im gleichen Stil formatiert wird, was gerade in Teams von großer Bedeutung ist.

Installation der erforderlichen Abhängigkeiten

Um Prettier und ESLint zu installieren, öffnen Sie ein weiteres Terminalfenster in VS Code und geben Sie folgenden Befehl ein:

bash
Copy code
$ npm install --save-dev --save-exact [email protected] [email protected]

Dadurch wird Prettier und die ESLint-Konfiguration für Prettier als Entwicklungsabhängigkeiten hinzugefügt.

Konfiguration von Prettier

Erstellen Sie eine neue Datei namens .prettierrc.json im Projektordner, um Prettier zu konfigurieren. Hier ein Beispiel für eine Konfigurationsdatei:

json
Copy code
{
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 80,

  "semi": false,

  "jsxSingleQuote": true,
  "singleQuote": true
}

Fazit

Die Einrichtung eines Projekts mit Vite und die Integration von ESLint sowie Prettier sind wichtige Schritte, um sicherzustellen, dass Ihr Code sowohl schnell als auch sauber bleibt. Durch Vite erhalten Sie ein modernes, leistungsfähiges Setup mit wenig Overhead, während ESLint und Prettier dazu beitragen, dass Ihr Code klar und konsistent bleibt. Es lohnt sich, diese Tools von Anfang an in Ihr Projekt zu integrieren, um eine solide Basis für die weitere Entwicklung zu schaffen.