ਇਕ optimistic update UI ਨੂੰ ਤੁਰੰਤ ਅਪਡੇਟ ਕਰਦਾ ਹੈ, ਮੰਨ ਕੇ ਕਿ ਸਰਵਰ ਰਿਕਰਾਹਨ ਸਫਲ ਹੋਵੇਗਾ, ਜਵਾਬ ਦਾ ਇੰਤਜ਼ਾਰ ਕਰਨ ਦੀ ਬਜਾਏ। ਇਹ ਐਪ ਨੂੰ ਤਤਕਾਲ ਬਣਾਉਂਦਾ ਹੈ — ਪਰ ਜਦੋਂ ਰਿਕਰਾਹਨ ਸਫਲ ਨਾ ਹੋਵੇ ਤਾਂ ਰੋਲਬੈਕ ਦੇ ਮਾਮਲੇ ਨੂੰ ਸੰਭਾਲਣਾ ਪਈਆ ਹੈ।
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)
ਉੱਚ-ਆਤਮ ਵਿਸ਼ਵਾਸ ਵਾਲੀਆਂ ਕਾਰਵਾਈਆਂ (ਪੋਸਟ ਨੂੰ ਪਸੰਦ ਕਰਨਾ, ਕੋਈ ਕਾਰਜ ਟਾਗਲ ਕਰਨਾ, ਚੈਟ ਸੁਨੇਹਾ ਭੇਜਣਾ) ਲਈ, ਰਿਕਰਾਹਨ ਲਗਭਗ ਹਮੇਸ਼ਾ ਸਫਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਇਸ ਲਈ ਰਾউਂਡ-ਟ੍ਰਿਪ ਦਾ ਇੰਤਜ਼ਾਰ ਕਰਨਾ ਸਿਰਫ਼ ਸਮਝੀ ਹੋਈ ਦੇਰੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। Optimistic updates ਇਹਨਾਂ ਨੂੰ ਤਤਕਾਲ ਅਨੁਭਵ ਕਰਾਉਂਦੇ ਹਨ।
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
}
}
ਸੁਰੱਖਿਆ ਦੀ ਕੁੰਜੀ: optimistic ਤਬਦੀਲੀ ਤੋਂ ਪਹਿਲਾਂ ਪਿਛਲੀ ਸਥਿਤੀ ਦਾ ਸਨੈਪਸ਼ਾਟ ਲਓ, ਅਤੇ ਜੇਕਰ ਰਿਕਰਾਹਨ ਅਸਫਲ ਹੋਵੇ ਤਾਂ ਇਸ ਨੂੰ ਬਹਾਲ ਕਰੋ। Rollback ਨੂੰ ਛੱਡ ਦੇਣਾ UI ਨੂੰ ਸਰਵਰ ਸਥਿਤੀ ਬਾਰੇ ਝੂਠ ਬੁਲਾਉਂਦਾ ਹੈ — ਖਤਰਨਾਕ ਬਾگ ਜੋ optimistic updates ਪੇਸ਼ ਕਰ ਸਕਦੇ ਹਨ।
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 ਨੈ ਪੈਟਰਨ ਨੂੰ ਰਸਮੀ ਬਣਾਇਆ ਹੈ: onMutate (snapshot + optimistic update), onError (rollback), onSettled (ਸੱਚ ਦਾ ਪ੍ਰਮਾਣ ਕਰਨ ਲਈ refetch)।
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
Optimistic updates ਇਕ ਸ਼ਕਤੀਸ਼ਾਲੀ UX ਤਕਨੀਕ ਹਨ ਜੋ ਨੈਟਵਰਕ ਦਾ ਇੰਤਜ਼ਾਰ ਨਾ ਕਰ ਕੇ ਐਪਸ ਨੂੰ ਤਤਕਾਲ ਬਣਾਉਂਦੀਆਂ ਹਨ — ਪਰ ਉਹ ਸਿਰਫ਼ ਸੁਰੱਖਿਅਤ ਹਨ ਜੇ ਤੁਸੀਂ rollback (snapshot-then-restore) ਲਾਗੂ ਕਰਦੇ ਹੋ ਅਤੇ ਗਲਤੀਆਂ ਨੂੰ ਸਤ੍ਹ ਤੇ ਲਿਆਉਂਦੇ ਹੋ।
ਪੈਟਰਨ (snapshot → update → on failure roll back → reconcile) ਮੁਢਲਾ ਗਿਆਨ ਹੈ, ਅਤੇ ਇਹ ਸਮਝਣਾ ਕਿ ਇਹ ਕਦੋਂ ਸਹੀ ਹੈ (likely-to-succeed, low-stakes ਕਾਰਵਾਈਆਂ) ਬਨਾਮ ਖਤਰਨਾਕ (payments) ਉਹ ਸਭ ਕੁਝ ਹੈ ਜੋ ਇਕ ਪਾਲਿਸ਼ਡ, ਭਰੋਸੇ ਦੇ ਯੋਗ UI ਨੂੰ ਉਸ ਤੋਂ ਵੱਖ ਕਰਦਾ ਹੈ ਜੋ ਚੁੱਪ ਚਾਪ ਸਰਵਰ ਸਥਿਤੀ ਨਿੰਦ ਕਰਦਾ ਹੈ।
ਵਿਸਤ੍ਰਿਤ ਜਵਾਬਾਂ ਨਾਲ IT ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ