Executando verificação de segurança...
5

Oque é a atualização otimista de UI e por que você deveria usar em seu projeto.

Trata-se de uma técnica que permite que os aplicativos atualizem a interface do usuário (UI) imediatamente, sem esperar pelo retorno de uma operação de rede ou outro processamento lento. Isso pode tornar a experiência do usuário mais fluida e responsiva, já que a UI é atualizada de forma imediata em vez de ficar parada enquanto aguarda o retorno de uma operação lenta.

Exemplo de atualização lenta :
Fonte Kikee

Para implementar a atualização otimista de UI, o aplicativo precisa manter um registro das alterações que o usuário faz na UI. Quando o usuário faz uma alteração, o aplicativo atualiza imediatamente a UI com a nova alteração, sem esperar pelo retorno da operação de rede ou outro processamento lento. Se a operação for bem-sucedida, o aplicativo confirma a alteração e a mantém na UI. Caso contrário, o aplicativo desfaz a alteração e reverte a UI para o estado anterior.

Pode ser utilizado como uma maneira de tratar erros ou indisponibilidade de algum serviço de back-end.

Exemplo de atualização visualmente imediata :
Fonte Kikee

Essa técnica é útil em aplicativos que precisam de alta performance e usabilidade, como aplicativos de mensagens ou redes sociais. No entanto, é importante lembrar que a atualização otimista de UI pode ser um desafio de implementação em algumas situações, especialmente quando há várias alterações simultâneas que precisam ser gerenciadas.

Como tudo na vida não existe bala de prata antes de usar essa abordagem, você deve se perguntar qual o impacto de passar um feedback falso para o usuário.

Carregando publicação patrocinada...
2

interessante, porém se clico em "like" e imediatamente vira o dedo com um 1, se der erro na api, volta a mostrar 0;
Isso pode gerar um "rage click", onde eu como usuário (e nao entendendo o que está acontecendo) vou clicar repetidas vezes para tentar "deixar" meu like, que por um momento vejo o like como registrado e depois zerado, levando a uma certa frustração.

1
1

No caso poderia mostrar uma caixa de notificação flutuando perto do botão de like e informando que houve um erro. São bem simples de fazer e bem informativas ao usuario.

2

Interessante essa abordagem mas fico pensando se não poderia causar transtornos.
ex: imagine o caso de algum sistema corporativo ou de vendas. O operador clica em uma função e já recebe o feedback positivo.
Então faz alguma tarefa que depende desse feedback pra logo em seguida a ui atualiza revertendo a atualização.
E se a segunda ação, aquela que dependia da primeira, não puder ser revertida?

1

Como tudo na vida não existe bala de prata antes de usar essa abordagem, você deve se perguntar qual o impacto de passar um feedback falso para o usuário.

Esse "hack" não deve ser usado em meios de pagamentos ou funcionalidades CORE.

1

O que devemos levar em conta que essa "atualização otimista", é uma pequena trapaça, e precisamos analisar quais funções podem receber esse tipo de abordagem.

Como foi usado no exemplo do amigo o botão "curtir", podemos crer que essa atualização se encaixa em funções com esse nível, e evitar usar em funções que fazem parte de uma cadeia.

Essa função precisa ser usada em lugares onde as respostas da API são previsíveis.

O fato é que uma API deve retornar uma resposta bem-sucedida 99% das vezes. No exemplo do botão “Curtir”, a API só deve retornar erro quando houver algum problema na rede ou no servidor.

1

Achei bem interessante, faltou dizer que esta estratégia funciona muito bem com placeholders, onde tudo espera um carregamento para ocorrer

Nem tudo precisa ser previamente carregado, usar placeholder para listas ajuda muito a entender que ali terá diversas informações de uma deteeminada coerência 😌

1

Um outro bom exemplo que é possível fazer é enviar informações entre rotas usando os states/props da própria rota.

Por exemplo, estou na página de listagem de um produto, ali eu eu já carreguei diversas informações de um produto (imagem, título, preço, etc...), ai clicar no link posso passar algumas dessas informações para a página de detalhes, dando uma sensação de que a informação foi carregada de forma mais rápida.

É possível fazer isso com react-router-dom usando o state do Link. (Web).
Também é possível fazer isso usando os params no react-navigation (Mobile).