Optimistic UI
Atualiza UI imediatamente como se a operação tivesse sucesso. Reverte se falhar.
Definição
Optimistic UI assume que operações server-side terão sucesso e atualiza a UI imediatamente. Se a operação falhar, reverte. Resulta em UX instantânea — usuário não espera o servidor para ver feedback.
Problema → Solução
Problema
UX 'lenta' onde toda ação espera o server (ex: dar like → spinner → atualiza). Em redes ruins, isso é catastrófico.Solução
Atualizar state local IMEDIATAMENTE com o resultado esperado. Em paralelo, enviar ao servidor. Se falhar, reverter o state e mostrar erro.Dica de entrevista
Tip
Use useOptimistic (React 19) ou onMutate/onError do TanStack Query. Combine com Server Actions para um fluxo end-to-end limpo.Código
// React 19 com useOptimistic + Server Action
'use client';
import { useOptimistic } from 'react';
function LikeButton({ postId, initialLikes }) {
const [likes, addOptimisticLike] = useOptimistic(
initialLikes,
(state, newLike) => state + 1
);
async function handleLike() {
addOptimisticLike(); // UI atualiza instantâneo
await likePostAction(postId); // server na verdade
}
return <button onClick={handleLike}>❤️ {likes}</button>;
}Perguntas de entrevista
Q.useOptimistic — como funciona?▾
A.Hook do React 19 que cria state otimista temporário. Quando a action 'real' resolve, o state real assume. Se falhar, useOptimistic reseta automaticamente. Combina perfeitamente com Server Actions.
Q.Quando NÃO usar Optimistic UI?▾
A.Operações que podem falhar frequentemente (validação complexa server-side). Operações financeiras críticas (pagamento). Operações cuja resposta o user precisa ver (resultado de cálculo).
Q.Como lidar com falha em Optimistic UI?▾
A.Reverter o state otimista + toast de erro + (opcional) retry automático. UX importante: o user precisa entender que a ação falhou.
Termos relacionados
43/122← →