1
resposta

[Sugestão][Recoil] Cadastrando / Editando informações

Após analisar o código das aulas 3 e 4, referente a cadastro e edição, queria deixar a contribução de que provavelmente não precise fazer o seguinte:

const atualizarContato = async (id, contato) => {
        return apiContatos.atualizar(id, contato).then((contatoAtualizado) => {
        // Não há necessidade de atualizar a variável de estado
            setContatos((listaAntiga) => 
                listaAntiga.map((contato) => contato._id === id ? contatoAtualizado : contato))
            return contatoAtualizado;
        })
    }

e aqui:

const addContatos = async (contato) => {
  return apiContatos.criar(contato).then((novoContato) => {
  // Não há necessidade de atualizar a variável de estado
    setContatos((prev) => [...prev, novoContato]);
    return novoContato;
  });
};

Em ambos os casos há uma navegação para a rota principal "/" apos o cadastro e edição com sucesso, na qual existe o fetchContacts() que irá sempre buscar os novos dados. Desta forma, ficaria mais limpo o código e fácil de entender assim:

const atualizarContato = async (id, contato) => {
        return apiContatos.atualizar(id, contato).then((contatoAtualizado) => {
        // colocar algum log
        })
    }

e aqui:

const addContatos = async (contato) => {
  return apiContatos.criar(contato)
  .then((novoContato) => {
  // colocar algum log
  });
};

Espero ter ajudado. Caso, tenha viajado, comente aqui o que você faria, por favor.

1 resposta

Olá, Werliton!

Obrigado por sua observação e por compartilhar a sua análise. Sua linha de raciocínio é muito boa e demonstra um olhar crítico sobre a implementação.

Você está absolutamente certo. Como o aplicativo faz uma navegação para a rota principal (/) e um fetch completo dos dados (fetchContacts()), as chamadas para setContatos que você mencionou não são estritamente necessárias para que a aplicação funcione corretamente. Se o único objetivo é ter a lista atualizada após a navegação, a sua versão mais enxuta do código seria suficiente.

No entanto, a abordagem adotada na aula tem um propósito de otimização de performance e experiência do usuário, conhecida como atualização otimista.

O que é a atualização otimista?
É uma técnica onde o estado da interface (UI) é atualizado imediatamente, sem esperar a resposta da API. Em vez de aguardar a resposta da API para só então atualizar o estado com o novoContato ou contatoAtualizado, o código já o faz de forma "otimista".

Por que a abordagem otimista é usada?

  • Experiência do usuário: A UI responde instantaneamente à ação do usuário, dando uma sensação de rapidez e fluidez, já que não há a espera pela latência da rede.

  • Tolerância a falhas: Se a chamada à API falhar, você pode "reverter" a atualização otimista, mostrando uma mensagem de erro ao usuário. No caso da aula, como a navegação ocorre imediatamente, isso não seria um problema, mas em aplicações mais complexas onde a navegação não ocorre, essa técnica é fundamental.

Em resumo, a sua observação está perfeita para o contexto do curso, já que o fetch completo resolve a atualização. No entanto, a implementação da aula é uma excelente oportunidade para aprender sobre a atualização otimista, que é uma técnica comum em aplicações web profissionais para melhorar a experiência do usuário.

Continue com essa proatividade, ela é fundamental para o seu desenvolvimento como programador!