Como implementar o botão de Like otimista com React e API REST
Botões de like que reagem sem esperar o backend: entenda a solução moderna com mutations, cache, API e melhores práticas sem travar a experiência do usuário.
Por que isso é importante
Interfaces lentas matam sua retenção e afetam como o usuário percebe seu produto. Implementações tradicionais de like demoram: o clique só traz resposta após o backend. Nesta aula, você vai aprender a modelar uma experiência onde o feedback ocorre na hora – e como preparar sua aplicação para voltar ao estado anterior caso haja erro.
Velocidade importa mais que código bonito
O tempo entre o clique e a resposta visual no botão de like é o que faz as pessoas amarem (ou odiarem) sua plataforma. A sensação de instantaneidade é construída por código otimista: o app finge que tudo deu certo – só avisa o usuário se realmente algo falhou lá no backend.
⚠️Atenção
Se sua solução esperar o backend antes de marcar um like, seus usuários vão sentir lag – e muitos nunca mais voltam.
A arquitetura do Toggle Like: client, server e cache
A implementação do botão de like envolve três pilares: uma função HTTP que dispara a ação na API, um componente de interface que executa a mutation e uso correto do cache (React Query) para garantir instâncias sincronizadas.
ℹ️Detalhe técnico
O endpoint deve receber um issue id. A mutation precisa ser POST (ou PATCH), nunca GET, pois altera dados na API.
Como criar o endpoint toggle like na API
Adapte o endpoint para aceitar toggle (alternar) o like usando a rota correta: /issues/[id]/like. No backend, crie um schema separado para o retorno de likes – separe schemas com export explícito para reuso no front e rotas.
⚠️Atenção ao schema
Não esqueça de exportar o schema de resposta do toggle like da API e importar corretamente usando Zod, para garantir tipagem precisa em todo o fluxo.
Mutation no React Query: como ativar o botão de Like
No componente <LikeButton />, use o useMutation. Passe a função do toggle like importada da camada http, referenciando sempre o issue id. Guarde a função mutate (rename para handleToggleLike) para ser acionada no clique do usuário.
ℹ️Detalhe
Use o estado isPending para desativar o botão enquanto a mutation está em andamento. Evita cliques duplos e bugs de concorrência.
Erros comuns: métodos HTTP e rotas quebradas
Se a requisição retorna 404 ou não funciona, revise o método HTTP: usar GET em vez de POST/PATCH é erro clássico. Sempre valide a rota e o endpoint antes de culpar o React.
❌Erro frequente
Se a API espera POST e você dispara GET, o backend pode ignorar ou acusar 404 sem explicar nada.
Preview instantâneo: interface otimista na prática
A interface otimista faz o botão de like responder ANTES da confirmação do servidor. Ao disparar o like, incremente o contador e mude o 'liked' para true localmente no cache. Se der erro, reverta: simples, direto e responsivo.
✅Fundamento
Use onMutate para atualizar o estado imediatamente. Use onError para restaurar os dados antigos caso o backend falhe.
Como acessar, atualizar e tipar o cache no React Query
Busque previousData do cache com queryClient.getQueryData([queryKey, id]). Tipar corretamente com Zod é obrigatório para não quebrar UI: faça Z.infer<typeof Schema>.
⚠️Atenção
Não esqueça: o updater do cache precisa lidar com likes, deslikes e contagem corretamente ou o app exibirá números errados.
Corrigindo o bug de hidratação: server x client
Quando o dado do like depende do usuário logado, as respostas do SSR (server side rendering) e do client divergem. O componente deve buscar estado do like apenas no client para evitar “diferenças de hidratação” e warnings do React.
ℹ️Dica avançada
Remova o suspense ao redor do LikeButton e use useQuery sem suspense – exiba skeleton enquanto carrega no client.
Atualizando likes após toggle: cache real time
Após o toggle, a contagem de likes deve ser atualizada com os dados mais recentes vindos do backend. Implemente atualização do cache lembrando que o fetch pode trazer um número diferente do que o usuário viu no instantâneo otimista.
⚠️Cuidado
Não garantir atualização pós-mutation faz os contadores de like ficarem defasados, quebrando a confiança no app.
Revertendo o estado: tratamento de erros silenciosos
Em um erro real de backend (API fora, timeouts, permissão negada), retorne ao estado anterior capturando o contexto armazenado em onMutate. Não deixe o usuário sem resposta ou com dado falso.
❌Fundamental
Sempre envie o dado antigo de volta ao cache no onError para evitar inconsistências visuais e desconfiança no sistema.
Padrão universal: interface otimista para curtir, seguir e votar
O mesmo padrão de toggle like serve para votação, seguir/desseguir e curtidas em produtos. Sempre use mutations com preview otimista e fallback de erro – não invente variações.
✅Sucesso replicável
Implemente esta técnica em qualquer feature onde a resposta rápida aumenta engajamento. Otimize, monitore e encante seus usuários.
Checklist essencial para um LikeButton matador
1. Endpoint separado para toggle like. 2. Mutation em vez de fetch puro. 3. Estado otimista via onMutate/onError. 4. Botão desabilitado durante loading. 5. Atualização garantida do cache pós-toggle. 6. Tratamento para SSR/client divergente. 7. Tipagem unificada entre backend/front com Zod. 8. Skeleton para UX suave.
ℹ️Verificação rápida
Erros são inevitáveis – o que diferencia seu código é como você lida com eles de forma elegante e invisível.
Perguntas rápidas para revisar seu código
- Você testou o endpoint com métodos diferentes? - O botão exibe loading? - O like atualiza localmente sem backend? - O número bate com o backend após update? - O estado volta se houver erro? - SSR e client mostram o mesmo? Se disse não para alguma, reveja o código.
Fique atento: debugging do Like em produção
Tenha o console de rede sempre aberto e filtre por requests do tipo write (POST/PATCH). Crie logs para mutation e erro: só assim você identifica inconsistências ou endpoints falhando.
⚠️Experiência real
Bugs de atualização de like não aparecem só em DEV. Use Sentry, LogRocket ou console sempre ativo para flagrar problemas ocultos no fluxo real do usuário.
Conclusão prática: confie no fluxo, monitore sempre
O segredo do app rápido não está só na infra – está em código que antecipa respostas e lida com falhas sem drama. O toggle like otimista é padrão ouro do frontend moderno.
Vá além: veja no Dev Doido como fica este processo em vídeo
Transforme sua interface: confira na prática a diferença entre uma UX travada e uma animada. Veja o passo-a-passo deste artigo e outros hacks avançados de React e Node no canal Dev Doido.