Entdecken Sie Reacts useOptimistic-Hook, um schnellere, responsive UIs mit optimistischen Updates zu erstellen. Lernen Sie die Anwendung mit praktischen Beispielen.
React useOptimistic: Erstellung responsiver UIs mit optimistischen Updates
In der heutigen Webentwicklungslandschaft ist die Benutzererfahrung von größter Bedeutung. Benutzer erwarten, dass Anwendungen reaktionsschnell sind und sofortiges Feedback geben. Eine Technik zur signifikanten Verbesserung der wahrgenommenen Leistung sind optimistische UI-Updates. React 18 führte den useOptimistic-Hook ein, ein leistungsstarkes Werkzeug zur Implementierung dieser Technik. Dieser Artikel befasst sich mit dem Konzept der optimistischen UI, untersucht den useOptimistic-Hook im Detail und bietet praktische Beispiele, die Ihnen helfen, ihn in Ihren React-Anwendungen zu nutzen.
Was sind optimistische UI-Updates?
Optimistische UI-Updates beinhalten die Aktualisierung der Benutzeroberfläche, bevor eine Bestätigung vom Server eingeht, dass eine Aktion erfolgreich abgeschlossen wurde. Anstatt auf die Serverantwort zu warten, wird die UI sofort aktualisiert, als ob die Aktion erfolgreich gewesen wäre. Dies erzeugt die Illusion einer sofortigen Reaktionsfähigkeit und lässt die Anwendung viel schneller und flüssiger erscheinen.
Stellen Sie sich ein Szenario vor, in dem ein Benutzer auf einen "Gefällt mir"-Button bei einem Social-Media-Beitrag klickt. Bei einer traditionellen Implementierung würde die Anwendung eine Anfrage an den Server senden, um das "Gefällt mir" zu registrieren, und auf die Bestätigung des Servers warten. Während dieser Zeit könnte der Benutzer eine leichte Verzögerung oder eine visuelle Ladeanzeige wahrnehmen. Mit optimistischen Updates wird der "Gefällt mir"-Button sofort aktualisiert, um anzuzeigen, dass der Benutzer den Beitrag geliked hat, ohne auf den Server zu warten. Wenn die Serveranfrage anschließend fehlschlägt (z. B. aufgrund eines Netzwerkfehlers), kann die UI in ihren vorherigen Zustand zurückversetzt werden.
Vorteile von optimistischen UI-Updates
- Verbesserte wahrgenommene Leistung: Durch sofortiges Feedback lassen optimistische Updates die Anwendung schneller und reaktionsfähiger erscheinen. Dies verbessert die allgemeine Benutzererfahrung, unabhängig von der tatsächlichen Netzwerklatenz.
- Gesteigertes Benutzerengagement: Sofortige visuelle Bestätigung ermutigt Benutzer, mehr mit der Anwendung zu interagieren. Die Reduzierung wahrgenommener Verzögerungen führt zu einem ansprechenderen und angenehmeren Erlebnis.
- Reduzierte Benutzerfrustration: Das Warten auf Serverantworten kann für Benutzer frustrierend sein, insbesondere bei langsamen oder unzuverlässigen Netzwerkverbindungen. Optimistische Updates minimieren die wahrgenommenen Wartezeiten und reduzieren die Frustration der Benutzer.
Einführung in den useOptimistic-Hook von React
Der useOptimistic-Hook vereinfacht die Implementierung von optimistischen UI-Updates in React-Anwendungen. Er bietet eine Möglichkeit, einen lokalen Zustand zu verwalten, der optimistisch aktualisiert wird, bevor der Server antwortet, und der zurückgesetzt werden kann, wenn die Serveranfrage fehlschlägt.
Hook-Signatur:
const [optimisticState, addOptimistic] = useOptimistic(initialState, updateFn);
initialState:Der Anfangswert des Zustands. Dies ist der Wert, den der Zustand hat, bevor optimistische Updates angewendet werden.updateFn:(Optional) Eine Funktion, die den aktuellen Zustand und den anaddOptimisticübergebenen Wert entgegennimmt und den neuen optimistischen Zustand zurückgibt. Wenn keine Funktion übergeben wird, überschreibt der an `addOptimistic` übergebene Wert den aktuellen Wert des Zustands.optimisticState:Der aktuelle Wert des optimistischen Zustands. Dies ist der Zustand, der zum Rendern der UI verwendet werden sollte.addOptimistic:Eine Funktion, die einen Wert akzeptiert und ein optimistisches Update auslöst, wobei die `updateFn` verwendet wird, falls sie bereitgestellt wurde.
Praktische Beispiele für useOptimistic
Beispiel 1: Liken eines Beitrags (Social Media)
Kehren wir zum Beispiel des "Gefällt mir"-Buttons in den sozialen Medien zurück. Wir werden useOptimistic verwenden, um die Anzahl der Likes sofort zu aktualisieren, wenn der Benutzer auf den Button klickt.
import React, { useState, useOptimistic } from 'react';
function LikeButton({ postId, initialLikes }) {
const [isLiked, setIsLiked] = useState(false);
const [optimisticLikes, addOptimistic] = useOptimistic(
initialLikes,
(state, newLike) => (newLike ? state + 1 : state - 1) //updateFn inkrementiert oder dekrementiert
);
const handleClick = async () => {
const optimisticValue = !isLiked;
setIsLiked(optimisticValue); // Lokalen 'isLiked'-Zustand aktualisieren
addOptimistic(optimisticValue); // optimisticLikes inkrementieren oder dekrementieren
try {
// Simuliert einen API-Aufruf zum Liken/Entliken des Beitrags
await new Promise((resolve) => setTimeout(resolve, 500)); // Netzwerklatenz simulieren
// Serverzustand hier aktualisieren (z. B. mit fetch oder Axios)
// await api.likePost(postId, isLiked);
} catch (error) {
console.error('Fehler beim Liken des Beitrags:', error);
// Das optimistische Update zurücksetzen, wenn die Anfrage fehlschlägt
setIsLiked(!optimisticValue);
addOptimistic(!optimisticValue);
}
};
return (
);
}
export default LikeButton;
Erklärung:
- Wir initialisieren den
optimisticLikes-Zustand mit der anfänglichen Anzahl von Likes mithilfe vonuseOptimistic(initialLikes). - Wenn auf den Button geklickt wird, rufen wir
addOptimistic()auf, um die Anzahl der Likes sofort zu erhöhen. - Anschließend simulieren wir einen API-Aufruf, um den Server zu aktualisieren.
- Wenn der API-Aufruf fehlschlägt, setzen wir das optimistische Update zurück, indem wir
addOptimistic()erneut mit dem entgegengesetzten Wert aufrufen.
Beispiel 2: Hinzufügen eines Kommentars (Blogbeitrag)
Betrachten wir ein anderes Szenario: das Hinzufügen eines Kommentars zu einem Blogbeitrag. Wir möchten, dass der Kommentar sofort erscheint, ohne auf die Bestätigung seiner Erstellung durch den Server zu warten.
import React, { useState, useOptimistic } from 'react';
function CommentForm({ postId }) {
const [commentText, setCommentText] = useState('');
const [optimisticComments, addOptimistic] = useOptimistic([]);
const handleSubmit = async (e) => {
e.preventDefault();
if (!commentText.trim()) return;
const newComment = {
id: Date.now(), // Eine temporäre ID generieren
text: commentText,
author: 'User',
timestamp: new Date().toISOString(),
};
addOptimistic(prevComments => [...prevComments, newComment]);
setCommentText('');
try {
// Simuliert einen API-Aufruf zur Erstellung des Kommentars
await new Promise((resolve) => setTimeout(resolve, 500)); // Netzwerklatenz simulieren
// Hier würden Sie den API-Aufruf tätigen, z. B. api.addComment(postId, newComment);
// Angenommen, der API-Aufruf gibt den Kommentar mit einer vom Server zugewiesenen ID zurück, würden Sie die Kommentar-ID aktualisieren
} catch (error) {
console.error('Fehler beim Hinzufügen des Kommentars:', error);
// Das optimistische Update zurücksetzen, wenn die Anfrage fehlschlägt
addOptimistic(prevComments => prevComments.filter(c => c.id !== newComment.id));
}
};
return (