Utforska Reacts useOptimistic-hook för att skapa snabbare, mer responsiva anvÀndargrÀnssnitt genom att implementera optimistiska UI-uppdateringar. LÀr dig hur du anvÀnder den med praktiska exempel.
React useOptimistic: Skapa Responsiva AnvÀndargrÀnssnitt med Optimistiska Uppdateringar
I dagens landskap för webbutveckling Àr anvÀndarupplevelsen av största vikt. AnvÀndare förvÀntar sig att applikationer ska vara responsiva och ge omedelbar feedback. En teknik för att avsevÀrt förbÀttra den upplevda prestandan Àr genom optimistiska UI-uppdateringar. React 18 introducerade useOptimistic-hooken, ett kraftfullt verktyg för att implementera denna teknik. Den hÀr artikeln fördjupar sig i konceptet med optimistiskt UI, utforskar useOptimistic-hooken i detalj och ger praktiska exempel som hjÀlper dig att utnyttja den i dina React-applikationer.
Vad Àr Optimistiska UI-uppdateringar?
Optimistiska UI-uppdateringar innebÀr att man uppdaterar anvÀndargrÀnssnittet innan man fÄr en bekrÀftelse frÄn servern att en ÄtgÀrd har slutförts. IstÀllet för att vÀnta pÄ serversvaret uppdateras grÀnssnittet omedelbart som om ÄtgÀrden lyckades. Detta skapar illusionen av omedelbar respons, vilket gör att applikationen kÀnns mycket snabbare och smidigare.
TÀnk dig ett scenario dÀr en anvÀndare klickar pÄ en "Gilla"-knapp pÄ ett inlÀgg i sociala medier. I en traditionell implementering skulle applikationen skicka en förfrÄgan till servern för att registrera gillningen och vÀnta pÄ att servern svarar med en bekrÀftelse. Under denna tid kan anvÀndaren uppleva en liten fördröjning eller en visuell indikation pÄ laddning. Med optimistiska uppdateringar uppdateras "Gilla"-knappen omedelbart för att visa att anvÀndaren har gillat inlÀgget, utan att vÀnta pÄ servern. Om serverförfrÄgan senare misslyckas (t.ex. pÄ grund av ett nÀtverksfel), kan grÀnssnittet ÄterstÀllas till sitt tidigare tillstÄnd.
Fördelar med Optimistiska UI-uppdateringar
- FörbÀttrad upplevd prestanda: Genom att ge omedelbar feedback fÄr optimistiska uppdateringar applikationen att kÀnnas snabbare och mer responsiv. Detta förbÀttrar den övergripande anvÀndarupplevelsen, oavsett faktisk nÀtverkslatens.
- Ăkat anvĂ€ndarengagemang: Omedelbar visuell bekrĂ€ftelse uppmuntrar anvĂ€ndare att interagera mer med applikationen. Att minska upplevda fördröjningar leder till en mer engagerande och trevlig upplevelse.
- Minskad anvÀndarfrustration: Att vÀnta pÄ serversvar kan vara frustrerande för anvÀndare, sÀrskilt i situationer med lÄngsamma eller opÄlitliga nÀtverksanslutningar. Optimistiska uppdateringar minimerar upplevda vÀntetider och minskar anvÀndarfrustrationen.
Introduktion till Reacts useOptimistic-hook
useOptimistic-hooken förenklar implementeringen av optimistiska UI-uppdateringar i React-applikationer. Den erbjuder ett sÀtt att hantera ett lokalt tillstÄnd som uppdateras optimistiskt innan servern svarar och kan ÄterstÀllas om serverförfrÄgan misslyckas.
Hook-signatur:
const [optimisticState, addOptimistic] = useOptimistic(initialState, updateFn);
initialState:Det initiala vÀrdet för tillstÄndet. Detta Àr vÀrdet som tillstÄndet har innan nÄgra optimistiska uppdateringar tillÀmpas.updateFn:(Valfri) En funktion som tar det nuvarande tillstÄndet och vÀrdet som skickas tilladdOptimistic, och returnerar det nya optimistiska tillstÄndet. Om ingen funktion skickas med kommer vÀrdet som skickas till `addOptimistic` att skriva över det nuvarande vÀrdet pÄ tillstÄndet.optimisticState:Det nuvarande vÀrdet för det optimistiska tillstÄndet. Detta Àr det tillstÄnd som ska anvÀndas för att rendera grÀnssnittet.addOptimistic:En funktion som accepterar ett vÀrde och utlöser en optimistisk uppdatering, med hjÀlp av `updateFn` om den tillhandahÄlls.
Praktiska exempel pÄ useOptimistic
Exempel 1: Gilla ett inlÀgg (Sociala medier)
LÄt oss ÄtergÄ till exemplet med "Gilla"-knappen pÄ sociala medier. Vi kommer att anvÀnda useOptimistic för att uppdatera antalet gillningar omedelbart nÀr anvÀndaren klickar pÄ knappen.
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 ökar eller minskar
);
const handleClick = async () => {
const optimisticValue = !isLiked;
setIsLiked(optimisticValue); // Uppdatera lokalt 'isLiked'-tillstÄnd
addOptimistic(optimisticValue); // Ăka eller minska optimisticLikes
try {
// Simulera ett API-anrop för att gilla/ogilla inlÀgget
await new Promise((resolve) => setTimeout(resolve, 500)); // Simulera nÀtverkslatens
// Uppdatera servertillstÄndet hÀr (t.ex. med fetch eller Axios)
// await api.likePost(postId, isLiked);
} catch (error) {
console.error('Error liking post:', error);
// Ă
terstÀll den optimistiska uppdateringen om förfrÄgan misslyckas
setIsLiked(!optimisticValue);
addOptimistic(!optimisticValue);
}
};
return (
);
}
export default LikeButton;
Förklaring:
- Vi initierar
optimisticLikes-tillstÄndet med det initiala antalet gillningar med hjÀlp avuseOptimistic(initialLikes). - NÀr knappen klickas anropar vi
addOptimistic()för att omedelbart öka antalet gillningar. - Vi simulerar sedan ett API-anrop för att uppdatera servern.
- Om API-anropet misslyckas ÄterstÀller vi den optimistiska uppdateringen genom att anropa
addOptimistic()igen med det motsatta vÀrdet.
Exempel 2: LÀgga till en kommentar (BlogginlÀgg)
LÄt oss övervÀga ett annat scenario: att lÀgga till en kommentar till ett blogginlÀgg. Vi vill att kommentaren ska visas omedelbart utan att vÀnta pÄ att servern bekrÀftar att den har skapats.
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(), // Generera ett temporÀrt ID
text: commentText,
author: 'User',
timestamp: new Date().toISOString(),
};
addOptimistic(prevComments => [...prevComments, newComment]);
setCommentText('');
try {
// Simulera ett API-anrop för att skapa kommentaren
await new Promise((resolve) => setTimeout(resolve, 500)); // Simulera nÀtverkslatens
// HÀr skulle du göra API-anropet, t.ex. api.addComment(postId, newComment);
// Förutsatt att API-anropet returnerar kommentaren med ett server-tilldelat ID, skulle du uppdatera kommentarens ID
} catch (error) {
console.error('Error adding comment:', error);
// Ă
terstÀll den optimistiska uppdateringen om förfrÄgan misslyckas
addOptimistic(prevComments => prevComments.filter(c => c.id !== newComment.id));
}
};
return (