Dúvida sobre Estado da Aplicação

[gabrielferreiraa]

Boa noite @fdaciuk, tudo certo ? Vou tentar te expor um código que fiz e pedir umas dicas pra você. Pode ser?

O que eu quis tentar fazer é aquele esquema de Input Search Real Time em Tabela, sabe ? E CONSEGUI !

Primeiramente coloquei tudo em uma só classe, a tabela, o input search, tudo misturado.. depois pensei, porque não crio um componente desse input search, passo umas propse posso utilizar ele em outros lugares. Resumindo, criei um component com esse input search, esse aqui. (algumas funções nesse arquivo como getInitialStatee searchUpdated estão na documentação desse pacote)

Ele recebe umas props, como: data (array de objetos com as informações da tabela), função de callback, e umas outras não muito importantes. p/ a ocasião.

Criei funções getters e setters. Quando dou change no input, a lib importada faz seu trabalho e me retorna o array de objetos filtrado, e jogo isso no setEntityResult para ele guardar em uma variavel. Dentro da função searchUpdated (que está no onChange), eu chamo a função de callback passando como parametro o a função getEntityResult.

Na função de callback que está no componente da tabela, eu dou um setState com o resultado que recebi, e como o map da minha tabela está ouvindo de this.state ele atualiza a tabela.

Fiquei bem feliz de conseguir fazer isso funcionar 🥇 Porém como sou bem encucado, fico pensando, isso foi coisa mirabolante da minha cabeça? Esse "fluxo" que fiz... Fiz da melhor forma? Fiz da forma mais performática? Posso replicar esse fluxo de mudança de estado para o resto da minha aplicação ? Tenho medo disso virar uma salada de callbacks e props quando a aplicação crescer, não tenho ideia ainda hahah.

Gostaria de umas dicas em relação a esse esquema que fiz, caso você não tenha entendido da forma que expliquei me da um toque.

Valeu por toda ajuda!

[fdaciuk]

Fala @gabrielferreiraa! Primeiramente, parabéns! O caminho para aprender é esse mesmo! Faça funcionar primeiro, depois melhore o seu código =)

Algumas dicas para melhorar:

sobre o getInitialState:

Esse método faz parte da api do createClass do React. Não recomendo usar, pois tem uma grande probabilidade do createClass se tornar deprecated em breve. O ideal é criar o estado inicial no construtor da class:

class SearchInputComponent extends Component {
  constructor () {
    super()
    this.state = {
      searchTerm: ''
    }
  }
}

Pelo que eu vi, você tentou manter a mesma interface do react-search-input, e conseguiu fazer muito bem! Uma coisa que eu mudaria seria, ao invés de usar uma variável this.result, coloque esse resultado no state do componente.

Por qual motivo?

Por um único motivo: imutabilidade. Um dos maiores problemas de qualquer código é a mutação de valores em uma variável.

Mutações causam bugs difíceis de encontrar, é mais difícil escrever testes, o que leva a ser mais difícil de garantir que o valor esperado é realmente o valor correto.

Mutações também causam problemas quando você tem race conditions, ou seja, dois códigos que são executados em momentos muito próximos, mas sem uma ordem definida (normalmente scripts assíncronos), e os dois fazem a mutação da mesma variável. Fica praticamente impossível saber de fato qual será o valor final da sua variável nesse caso.

Usando a variávell no state, você terá controle de quando esse valor estará sendo alterado, pois você tem os métodos do lifecycle do React para saber quando um valor no estado mudou, e consegue pegar o seu valor anterior, se precisar.

Se só usar uma variável na class, você não terá esse controle =)

No mais eu acho que ficou legal! Com o passar das aulas, nós vamos ver algumas estruturas de organização para aplicações maiores, então vai ficar mais claro como organizar o código quando a aplicação começar a crescer.

Não se preocupe que não vai ficar uma salada de props, state e callbacks, desde que você consiga isolar as responsabilidades de cada componente.

Mas o caminho é esse cara! Continue fazendo outros componentes, tentando replicar componentes existentes, que é fazendo que se aprende! Logo você vai começar a passar por problemas, e a prática vai ajudar a resolver esses problemas de forma natural =)

Parabéns, e continue! Qualquer dúvida, só avisar =)

[gabrielferreiraa]

@fdaciuk, seguindo seus conselhos, fui mudar o componente para classe do ES6 e usar o construtor, porém agora ele fica em loop infinito quando dou setState no render. Será que é porque quando eu dou um setState, ele re-renderiza a página, fica dentro desse loop ? Qual seria uma saida pra isso ? Tentei usar alguma das funções do LifeCycle mas não estou muito familiarizado ainda hahah Valeu

[fdaciuk]

O render precisa ser uma função pura, não pode dar setState nele ;)

[fdaciuk]

Ainda no primeiro módulo tem as aulas falando sobre o lifecycle. Dá uma olhada nelas, que lá eu explico certinho cada uma =)