Hook-ul useOptimistic() îmbunătățește masiv experiența utilizatorului prin reflectarea imediată a modificărilor în interfață (de exemplu adăugarea unui comentariu sau a unui Like) înainte ca acțiunea de server (Server Action) să fi confirmat salvarea în baza de date.
'use client';
import { useOptimistic } from 'react';
import { adaugaComentariuAction } from '@/actions/comentarii';
export function ListaComentarii({ comentariiInitiale }: { comentariiInitiale: string[] }) {
const [comentarii, setOptimisticComentariu] = useOptimistic(
comentariiInitiale,
(state, nouComentariu: string) => [...state, nouComentariu]
);
return (
<div>
<form action={async (formData) => {
const text = formData.get('text') as string;
setOptimisticComentariu(text); // Actualizează ecranul instantaneu!
await adaugaComentariuAction(text); // Salvează în baza de date
}}>
<input name="text" required />
<button type="submit">Trimite</button>
</form>
<ul>{comentarii.map((c, i) => <li key={i}>{c}</li>)}</ul>
</div>
);
}Auto-Revenire (Rollback): Dacă acțiunea de server eșuează cu eroare pe rețea, starea optimistă este anulată automat, revenind la datele reale de pe server.
Beneficii UX
- Zero latență percepută de utilizator la interacțiuni uzuale.
- Elimină necesitatea spinnerelor de încărcare pentru operațiuni simple.
Întrebări & Exemple de Cod:
useOptimistic() – Actualizări Optimiste Instantanee ale InterfețeiAi o nelămurire despre utilizarea comenzii
useOptimistic() – Actualizări Optimiste Instantanee ale Interfețeisau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.