An aġġornament ottimistiku aġġorna l-UI immedjatament, biex tassumi li talba tal-server se tissuccedi, minflok ma tistennew ir-rispons. Dan jagħmilha l-app ħaffif — iżda għandek imexxi l-każ fejn it-talba attwalment tfalli billi tirritorna lura.
Pessimistic (normal): click → show spinner → wait for server → THEN update UI (feels slow)
Optimistic: click → update UI INSTANTLY → send request →
if it fails, ROLL BACK the change (feels instant)
Għal azzjonijiet ta' fiduċja għolja (like post, toggle todo, ibgħat messaġġ chat), it-talba kważi dejjem tissuccedi, allokka stennija għar-round-trip tieħu lag perċett. L-aġġornamenti ottimistiċi jagħmluhom ħaffif.
async function toggleLike(post) {
const previous = post.liked; // 1. SNAPSHOT the old state for rollback
setPost({ ...post, liked: !post.liked }); // 2. update UI optimistically
try {
await api.toggleLike(post.id); // 3. fire the request
} catch (err) {
setPost({ ...post, liked: previous }); // 4. ROLL BACK on failure
showError("Couldn't update — please retry"); // 5. tell the user
}
}
Il-ċavetta għas-sigurezza: snapshot l-istat preċedenti qabel il-bidla ottimistika, u irrestawra jekk it-talba tfalli. Għal nozzjoni rollback tħalli l-UI bilkoll misreprezentata dwar l-istat tal-server — il-bug perikolużu li aġġornamenti ottimistiċi jistgħu jintroduċu.
useMutation({
mutationFn: toggleLike,
onMutate: async (newData) => {
await queryClient.cancelQueries({ queryKey: ["post"] });
const previous = queryClient.getQueryData(["post"]); // snapshot
queryClient.setQueryData(["post"], newData); // optimistic update
return { previous }; // pass snapshot to onError
},
onError: (err, vars, context) => {
queryClient.setQueryData(["post"], context.previous); // rollback
},
onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // reconcile with server
});
React Query iformalizza l-patrun: onMutate (snapshot + aġġornament ottimistiku), onError (rollback), onSettled (refetch biex tikkonferma l-verità).
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
L-aġġornamenti ottimistiċi huma teknika UX qawwija li tagħmel apps ħaffif billi ma tstennewx l-network — iżda huma siguri biss jekk timplimenta rollback (snapshot-then-restore) u tipprezenta errors.
Il-patrun (snapshot → update → fuq falliment roll back → rikonċilija) huwa għarfien essenzjali, u l-fahim meta huwa xieraq (azzjonijiet probabbli li jissuċċedu, low-stakes) versus perikolużu (pagamenti) huwa dak li jiddistingwi UI polixxat, affidabbli minn wieħed li silenzjosament imisreprezenta l-istat tal-server.