Utforsk Reacts useOptimistic-hook for å skape raskere og mer responsive brukergrensesnitt ved å implementere optimistiske UI-oppdateringer. Lær bruken med praktiske eksempler.
React useOptimistic: Bygg responsive brukergrensesnitt med optimistiske oppdateringer
I dagens landskap for webutvikling er brukeropplevelsen avgjørende. Brukere forventer at applikasjoner er responsive og gir umiddelbar tilbakemelding. En teknikk for å betydelig forbedre opplevd ytelse er gjennom optimistiske UI-oppdateringer. React 18 introduserte useOptimistic-hooken, et kraftig verktøy for å implementere denne teknikken. Denne artikkelen dykker ned i konseptet optimistisk UI, utforsker useOptimistic-hooken i detalj, og gir praktiske eksempler for å hjelpe deg med å utnytte den i dine React-applikasjoner.
Hva er optimistiske UI-oppdateringer?
Optimistiske UI-oppdateringer innebærer å oppdatere brukergrensesnittet før man mottar bekreftelse fra serveren om at en handling er fullført. I stedet for å vente på serverresponsen, oppdateres grensesnittet umiddelbart som om handlingen var vellykket. Dette skaper en illusjon av øyeblikkelig respons, noe som får applikasjonen til å føles mye raskere og mer flytende.
Tenk deg et scenario der en bruker klikker på en "Liker"-knapp på et innlegg i sosiale medier. I en tradisjonell implementering ville applikasjonen sendt en forespørsel til serveren for å registrere liker-klikket og ventet på at serveren skulle svare med en bekreftelse. I løpet av denne tiden kan brukeren oppleve en liten forsinkelse eller en visuell indikasjon på lasting. Med optimistiske oppdateringer blir "Liker"-knappen umiddelbart oppdatert for å reflektere at brukeren har likt innlegget, uten å vente på serveren. Hvis serverforespørselen senere mislykkes (f.eks. på grunn av en nettverksfeil), kan grensesnittet tilbakestilles til sin forrige tilstand.
Fordeler med optimistiske UI-oppdateringer
- Forbedret opplevd ytelse: Ved å gi umiddelbar tilbakemelding får optimistiske oppdateringer applikasjonen til å føles raskere og mer responsiv. Dette forbedrer den generelle brukeropplevelsen, uavhengig av faktisk nettverkslatens.
- Økt brukerengasjement: Øyeblikkelig visuell bekreftelse oppmuntrer brukere til å interagere mer med applikasjonen. Reduserte opplevde forsinkelser fører til en mer engasjerende og behagelig opplevelse.
- Redusert brukerfrustrasjon: Å vente på serverresponser kan være frustrerende for brukere, spesielt i situasjoner med trege eller upålitelige nettverksforbindelser. Optimistiske oppdateringer minimerer opplevde ventetider og reduserer brukerfrustrasjon.
Vi introduserer Reacts useOptimistic-hook
useOptimistic-hooken forenkler implementeringen av optimistiske UI-oppdateringer i React-applikasjoner. Den gir en måte å håndtere en lokal tilstand som blir optimistisk oppdatert før serveren svarer, og som kan tilbakestilles hvis serverforespørselen mislykkes.
Hook-signatur:
const [optimisticState, addOptimistic] = useOptimistic(initialState, updateFn);
initialState:Den opprinnelige verdien til tilstanden. Dette er verdien tilstanden har før noen optimistiske oppdateringer blir brukt.updateFn:(Valgfri) En funksjon som tar den nåværende tilstanden og verdien som sendes tiladdOptimistic, og returnerer den nye optimistiske tilstanden. Hvis ingen funksjon sendes med, vil verdien som sendes til `addOptimistic` overskrive den nåværende verdien til tilstanden.optimisticState:Den nåværende verdien til den optimistiske tilstanden. Dette er tilstanden som bør brukes til å rendre grensesnittet.addOptimistic:En funksjon som aksepterer en verdi og utløser en optimistisk oppdatering, ved å bruke `updateFn` hvis den er gitt.
Praktiske eksempler på useOptimistic
Eksempel 1: Å like et innlegg (sosiale medier)
La oss gå tilbake til eksempelet med "Liker"-knappen i sosiale medier. Vi vil bruke useOptimistic for å oppdatere antall likes umiddelbart når brukeren klikker 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 øker eller reduserer
);
const handleClick = async () => {
const optimisticValue = !isLiked;
setIsLiked(optimisticValue); // Oppdater lokal 'isLiked'-tilstand
addOptimistic(optimisticValue); // Øk eller reduser optimisticLikes
try {
// Simuler et API-kall for å like/avlike innlegget
await new Promise((resolve) => setTimeout(resolve, 500)); // Simuler nettverkslatens
// Oppdater servertilstanden her (f.eks. med fetch eller Axios)
// await api.likePost(postId, isLiked);
} catch (error) {
console.error('Feil ved liking av innlegg:', error);
// Tilbakestill den optimistiske oppdateringen hvis forespørselen mislykkes
setIsLiked(!optimisticValue);
addOptimistic(!optimisticValue);
}
};
return (
);
}
export default LikeButton;
Forklaring:
- Vi initialiserer
optimisticLikes-tilstanden med det opprinnelige antallet likes ved hjelp avuseOptimistic(initialLikes). - Når knappen klikkes, kaller vi
addOptimistic()for å øke antall likes umiddelbart. - Deretter simulerer vi et API-kall for å oppdatere serveren.
- Hvis API-kallet mislykkes, tilbakestiller vi den optimistiske oppdateringen ved å kalle
addOptimistic()igjen med den motsatte verdien.
Eksempel 2: Å legge til en kommentar (blogginnlegg)
La oss se på et annet scenario: å legge til en kommentar på et blogginnlegg. Vi ønsker at kommentaren skal vises umiddelbart uten å vente på at serveren bekrefter at den er opprettet.
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(), // Generer en midlertidig ID
text: commentText,
author: 'Bruker',
timestamp: new Date().toISOString(),
};
addOptimistic(prevComments => [...prevComments, newComment]);
setCommentText('');
try {
// Simuler et API-kall for å opprette kommentaren
await new Promise((resolve) => setTimeout(resolve, 500)); // Simuler nettverkslatens
// Her ville du gjort API-kallet, f.eks. api.addComment(postId, newComment);
// Antatt at API-kallet returnerer kommentaren med en servertildelt ID, ville du oppdatert kommentar-ID-en
} catch (error) {
console.error('Feil ved legging til av kommentar:', error);
// Tilbakestill den optimistiske oppdateringen hvis forespørselen mislykkes
addOptimistic(prevComments => prevComments.filter(c => c.id !== newComment.id));
}
};
return (