Like otimista com React e API REST já
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
Resposta direta: aplique “Like otimista com React e API REST já” com boundaries e métricas de UX — migração big-bang costuma sair cara.
Por que isso é importante
Like otimista com React e API REST já. 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.
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: <code>/issues/[id]/like</code> . No backend, crie um schema separado para o retorno de likes – separe schemas com <em>export</em> 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 <code><LikeButton /></code> , use o <code>useMutation</code> . Passe a função do toggle like importada da camada http, referenciando sempre o issue id . Guarde a função <code>mutate</code> (rename para <code>handleToggleLike</code> ) para ser acionada no clique do usuário.
Detalhe
Use o estado <code>isPending</code> 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 <code>onMutate</code> para atualizar o estado imediatamente. Use <code>onError</code> para restaurar os dados antigos caso o backend falhe.
Como acessar, atualizar e tipar o cache no React Query
Busque <code>previousData</code> do cache com <code>queryClient.getQueryData([queryKey, id])</code> . Tipar corretamente com Zod é obrigatório para não quebrar UI: faça <code>Z.infer<typeof Schema></code> .
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 <code>useQuery</code> 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 <code>onMutate</code> . Não deixe o usuário sem resposta ou com dado falso.
Fundamental
Sempre envie o dado antigo de volta ao cache no <code>onError</code> 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 <code>onMutate/onError</code> . 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 <a href="https://www.youtube.com/@DevDoido">Dev Doido</a> .
Perguntas frequentes
Se você aplicar «A arquitetura do Toggle Like: client, server e cache» hoje, o que muda no render?
Checklist de front: 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. Depois confirme no path crítico com review humano.
Como provar «Como criar o endpoint toggle like na API» com evidência do artigo?
Do texto: 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.
Qual erro de estado «Mutation no React Query: como ativar o botão de Like» ajuda a cortar?
No componente , 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. Em «Mutation no React Query: como ativar o botão de Like», trate isso como decisão de interface mensurável — não como checklist genérico.
Como resumir «Erros comuns: métodos HTTP e rotas quebradas» em critério de aceite?
Comece pelo mecanismo do corpo: 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.