Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Performace ao atualizar a página de restaurantes

durante a aula, usamos o seguinte método para exlcuir um restaurante e atualizar a lista de restaurantes

const URL = 'http://localhost:8000/api/v2/restaurantes/'
const [restaurantes, setRestaurantes] = useState<IRestaurante[]>([])

  useEffect(() => {
    axios.get(URL)
      .then((resposta) => {
        setRestaurantes(resposta.data)
      }).catch((erro) => {
        console.log(erro)
      });
  }, [])

  const excluirRestaurante = (restauranteParaExcluir: IRestaurante) => {
      axios.delete(`${URL}${restauranteParaExcluir.id}/`)
            .then(() => {
              const listaRestaurantes = restaurantes.filter(restaurante => restaurante.id !== restauranteParaExcluir.id)
              setRestaurantes([...listaRestaurantes])
        })
      });
  }

fiquei com uma dúvida sobre como o useEffect pode ser usado aqui.

sempre vamos precisar atualizar a lista de restaurantes com:

const listaRestaurantes = restaurantes.filter(restaurante => restaurante.id !== restauranteParaExcluir.id)
setRestaurantes([...listaRestaurantes])

ou existe outra forma de atualizarmos essa lista? passando a lista de restaurantes para dentro do useEffect, algo como (não sei se essa seria a melhor maneira):

  useEffect(() => {
    axios.get(URL)
      .then((resposta) => {
        setRestaurantes(resposta.data)
      }).catch((erro) => {
        console.log(erro)
      });
  }, [restaurantes])

  const excluirRestaurante = (restauranteParaExcluir: IRestaurante) => {
    axios.delete(`${URL}${restauranteParaExcluir.id}/`)
      .then((resposta) => {
        alert(`Restaurante ${restauranteParaExcluir.nome} excluído com sucesso!`)
      }).catch((erro) => {
        console.log(erro)
      });
  }

pergunto isso porque estou pensando em um ambiente onde tenha milhares de restaurantes cadastrados (algo como o iFood). Ficar passando um .filter() e depois passar toda essa lista para dentro de uma nova variável teria algum impacto negativo de performace no frontend?

sempre fico me perguntando quando vou escrever algum código, se essa base tivesse um milhão de registros essa solução funcionaria?

Sei que essa pergunta foge um pouco do cardápio principal da aula (hahaha), mas agradeço por sempre oferecerem suporte, até quando saímos do script! Obrigado e espero não ter dado muita indigestão com essa dúvida diferente.

1 resposta
solução!

Oi Vitor,

Entendo sua preocupação com a performance ao lidar com grandes volumes de dados. Sua dúvida é pertinente e comum.

O useEffect com a dependência [restaurantes] não é a abordagem ideal nesse caso. Isso porque ele causaria um loop infinito de requisições.

Cada alteração em restaurantes dispararia um novo get na API.

A forma como você está atualizando a lista após a exclusão com o filter é a mais comum e adequada para a maioria dos casos.

O método filter cria uma nova lista, o que é bom para a imutabilidade no React.

A performance, em geral, não será um problema para listas de até alguns milhares de elementos.

O gargalo de performance, quando houver, geralmente está no backend (banco de dados, consultas, etc).

Em resumo, a abordagem inicial com filter funciona bem para a maioria dos casos, mas em cenários de alta escala, é preciso avaliar outras otimizações.

tux matrix    Caso este post o tenha ajudado, por favor, marcar como solucionado ☑️. Bons Estudos! 🤓