Skip to main content

useOptimistic

O useOptimistic é um hook do React que permite atualizar a interface do usuário de forma otimista, ou seja, antes que uma operação assíncrona, como uma requisição a um servidor, seja concluída. Isso torna as aplicações mais responsivas e melhora a experiência do usuário, proporcionando feedback imediato às suas ações.

Tem que ser otimista pras coisas funcionarem hahaha 🥁

Aplicação Prática — Atualização de Placar em Tempo Real​

Imagine que você está desenvolvendo um aplicativo de futebol onde os usuários podem atualizar o placar de uma partida em tempo real. Ao invés de esperar a confirmação do servidor para refletir a mudança no placar, podemos utilizar o useOptimistic para atualizar imediatamente a interface, assumindo que a operação será bem-sucedida. E rezando é claro pras apis de fato atualizarem tudo no banco de dados hehehe. Mas vai dar certo, confia...

Isso evita muito o controle com useState, sabe aquele isPending ou algo assim!? Podemos simplesmente controlar pelo useOptimistic, tendo um controle maior da aplicação e dando um retorno para o usuário de forma mais clara e objetiva.

Nada pior que forçcar um F5 pra saber se as coisas deram certo ou não.

useOptimistic
import React, { useOptimistic } from 'react';

function ScoreUpdater({ initialHomeScore, initialAwayScore }) {
  const [optimisticScore, updateScore] = useOptimistic(
    { home: initialHomeScore, away: initialAwayScore },
    (currentScore, newScore) => ({
      ...currentScore,
      ...newScore,
    })
  );

  const handleGoal = (team) => {
    const newScore = { [team]: optimisticScore[team] + 1 };
    updateScore(newScore);

    // Simulação de uma requisição ao servidor
    fetch('/api/update-score', {
      method: 'POST',
      body: JSON.stringify(newScore),
    }).catch((error) => {
      console.error('Erro ao atualizar o placar:', error);
      // Reverter o placar em caso de erro
      updateScore({ [team]: optimisticScore[team] - 1 });
    });
  };

  return (
    <div>
      <h2>Placar</h2>
      <p>Time da Casa: {optimisticScore.home}</p>
      <p>Time Visitante: {optimisticScore.away}</p>
      <button onClick={() => handleGoal('home')}>Gol do Time da Casa</button>
      <button onClick={() => handleGoal('away')}>Gol do Time Visitante</button>
    </div>
  );
}

Como Funciona?​

No exemplo acima, utilizamos o useOptimistic para gerenciar o estado do placar de forma otimista. O hook recebe dois parâmetros:

  1. O estado inicial ({ home: initialHomeScore, away: initialAwayScore })
  2. Uma função de atualização que combina o estado atual com as novas alterações

Quando o usuário clica em um dos botões para registrar um gol, a interface é imediatamente atualizada para refletir o novo placar, sem aguardar a resposta do servidor. Se a requisição falhar, o placar é revertido ao estado anterior, garantindo a consistência dos dados.

Benefícios do useOptimistic​

Experiência do Usuário Melhorada​

Atualizações imediatas proporcionam uma sensação de rapidez e responsividade, eliminando a percepção de lentidão. Simplicidade na Implementação O hook simplifica o gerenciamento de estados otimistas, reduzindo a complexidade do código comparado a implementações manuais.

Manutenção da Consistência​

Em caso de falha na operação assíncrona, é fácil reverter para o estado anterior, mantendo a integridade dos dados. Considerações Importantes Embora o useOptimistic melhore a experiência do usuário, é crucial implementar tratamentos de erro adequados. Caso uma operação falhe, o sistema deve:

Informar o usuário sobre o erro​

Reverter as mudanças para evitar inconsistências Possivelmente oferecer a opção de tentar novamente

Além disso, é importante considerar cenários onde múltiplas atualizações otimistas podem ocorrer em sequência rápida.

Conclusão​

O useOptimistic é uma ferramenta poderosa para criar interfaces mais dinâmicas e responsivas em aplicações React. No contexto de um aplicativo de futebol, ele permite que atualizações de placar sejam refletidas imediatamente, mantendo os usuários engajados e satisfeitos. Ao lidar corretamente com possíveis erros, garantimos uma experiência fluida e confiável.

É importante saber quando usar, alguns serviços podem funcionar bem, outros não. Saiba como aplicar este recursor e forneça sempre uma mensagem clara para os usuários. Este novo hook pode ser um grande aliado para o controle de interfaces com chamadas de api com alguma atualização/deleção/inserção.

Já perdi as vezes que tive que fazer controle na interface com useState, simulando este hook aí. Acredito que o uso dele de forma clara e objetiva vai trazer grandes benefícios.

tip

Conheça mais sobre os hooks em:

Referências:​