Explore o hook useOptimistic do React para criar interfaces de usuário mais rápidas e responsivas, implementando atualizações otimistas. Aprenda a usá-lo com exemplos práticos.
React useOptimistic: Construindo UIs Responsivas com Atualizações Otimistas
No cenário atual de desenvolvimento web, a experiência do usuário é primordial. Os usuários esperam que as aplicações sejam responsivas e forneçam feedback imediato. Uma técnica para melhorar significativamente o desempenho percebido é através de atualizações de UI otimistas. O React 18 introduziu o hook useOptimistic, uma ferramenta poderosa para implementar essa técnica. Este artigo aprofunda o conceito de UI otimista, explora o hook useOptimistic em detalhes e fornece exemplos práticos para ajudá-lo a aproveitá-lo em suas aplicações React.
O que são Atualizações de UI Otimistas?
Atualizações de UI otimistas envolvem atualizar a interface do usuário antes de receber a confirmação do servidor de que uma ação foi concluída com sucesso. Em vez de esperar pela resposta do servidor, a UI é atualizada imediatamente como se a ação tivesse sido bem-sucedida. Isso cria a ilusão de responsividade instantânea, fazendo com que a aplicação pareça muito mais rápida e fluida.
Considere um cenário onde um usuário clica em um botão "Curtir" em uma postagem de mídia social. Em uma implementação tradicional, a aplicação enviaria uma solicitação ao servidor para registrar a curtida e esperaria que o servidor respondesse com a confirmação. Durante esse tempo, o usuário poderia experimentar um pequeno atraso ou uma indicação visual de carregamento. Com atualizações otimistas, o botão "Curtir" é imediatamente atualizado para refletir que o usuário curtiu a postagem, sem esperar pelo servidor. Se a solicitação ao servidor falhar subsequentemente (por exemplo, devido a um erro de rede), a UI pode ser revertida para seu estado anterior.
Benefícios das Atualizações de UI Otimistas
- Desempenho Percebido Aprimorado: Ao fornecer feedback imediato, as atualizações otimistas fazem com que a aplicação pareça mais rápida e responsiva. Isso melhora a experiência geral do usuário, independentemente da latência real da rede.
- Engajamento do Usuário Aprimorado: A confirmação visual instantânea incentiva os usuários a interagir mais com a aplicação. Reduzir atrasos percebidos leva a uma experiência mais envolvente e agradável.
- Frustração do Usuário Reduzida: Esperar por respostas do servidor pode ser frustrante para os usuários, especialmente em situações com conexões de rede lentas ou não confiáveis. As atualizações otimistas minimizam os tempos de espera percebidos e reduzem a frustração do usuário.
Apresentando o Hook useOptimistic do React
O hook useOptimistic simplifica a implementação de atualizações de UI otimistas em aplicações React. Ele fornece uma maneira de gerenciar um estado local que é atualizado otimisticamente antes que o servidor responda e pode ser revertido se a solicitação ao servidor falhar.
Assinatura do Hook:
const [optimisticState, addOptimistic] = useOptimistic(initialState, updateFn);
initialState:O valor inicial do estado. Este é o valor que o estado mantém antes que qualquer atualização otimista seja aplicada.updateFn:(Opcional) Uma função que recebe o estado atual e o valor passado paraaddOptimistic, e retorna o novo estado otimista. Se nenhuma função for passada, o valor passado para `addOptimistic` substituirá o valor atual do estado.optimisticState:O valor atual do estado otimista. Este é o estado que deve ser usado para renderizar a UI.addOptimistic:Uma função que aceita um valor e dispara uma atualização otimista, usando a `updateFn` se ela for fornecida.
Exemplos Práticos de useOptimistic
Exemplo 1: Curtindo uma Postagem (Mídia Social)
Vamos revisitar o exemplo do botão "Curtir" de mídia social. Usaremos useOptimistic para atualizar a contagem de curtidas imediatamente quando o usuário clicar no botão.
import React, { useState, useOptimistic } from 'react';
function LikeButton({ postId, initialLikes }) {
const [isLiked, setIsLiked] = useState(false);
const [optimisticLikes, addOptimistic] = useOptimistic(
initialLikes,
(state, newLike) => (newLike ? state + 1 : state - 1) //updateFn incrementa ou decrementa
);
const handleClick = async () => {
const optimisticValue = !isLiked;
setIsLiked(optimisticValue); // Atualiza o estado local 'isLiked'
addOptimistic(optimisticValue); // Incrementa ou decrementa optimisticLikes
try {
// Simula uma chamada de API para curtir/descurtir a postagem
await new Promise((resolve) => setTimeout(resolve, 500)); // Simula a latência da rede
// Atualize o estado do servidor aqui (ex: usando fetch ou Axios)
// await api.likePost(postId, isLiked);
} catch (error) {
console.error('Error liking post:', error);
// Reverte a atualização otimista se a solicitação falhar
setIsLiked(!optimisticValue);
addOptimistic(!optimisticValue);
}
};
return (
);
}
export default LikeButton;
Explicação:
- Inicializamos o estado
optimisticLikescom o número inicial de curtidas usandouseOptimistic(initialLikes). - Quando o botão é clicado, chamamos
addOptimistic()para incrementar a contagem de curtidas imediatamente. - Em seguida, simulamos uma chamada de API para atualizar o servidor.
- Se a chamada de API falhar, revertemos a atualização otimista chamando
addOptimistic()novamente com o valor oposto.
Exemplo 2: Adicionando um Comentário (Post de Blog)
Vamos considerar outro cenário: adicionar um comentário a uma postagem de blog. Queremos que o comentário apareça imediatamente, sem esperar que o servidor confirme sua criação.
import React, { useState, useOptimistic } from 'react';
function CommentForm({ postId }) {
const [commentText, setCommentText] = useState('');
const [optimisticComments, addOptimistic] = useOptimistic([]);
const handleSubmit = async (e) => {
e.preventDefault();
if (!commentText.trim()) return;
const newComment = {
id: Date.now(), // Gera um ID temporário
text: commentText,
author: 'User',
timestamp: new Date().toISOString(),
};
addOptimistic(prevComments => [...prevComments, newComment]);
setCommentText('');
try {
// Simula uma chamada de API para criar o comentário
await new Promise((resolve) => setTimeout(resolve, 500)); // Simula a latência da rede
// Aqui você faria a chamada de API, ex: api.addComment(postId, newComment);
// Supondo que a chamada de API retorne o comentário com um ID atribuído pelo servidor, você atualizaria o ID do comentário
} catch (error) {
console.error('Error adding comment:', error);
// Reverte a atualização otimista se a solicitação falhar
addOptimistic(prevComments => prevComments.filter(c => c.id !== newComment.id));
}
};
return (