Dúvida sobre lifecycle

[gabrielferreiraa]

Opa @fdaciuk, beleza?

Algumas perguntas.

Quando vou trabalhar com consumo de API, por exemplo uma tabela (sem nenhuma ação), quando o usuário chama a rota, eu consumo e renderizo a tabela. Posso trabalhar com lifecycle? Fazer o ajax no componentWillMount() e setar o estado por exemplo? Ou tem algum pattern que é bom seguir?

Valeu!

[fdaciuk]

Fala @gabrielferreiraa! Sim, você pode - e deve - trabalhar com os métodos do lifecycle =)

Para fazer requests e executar this.setState, você deve fazer apenas após o componente já estar montado. Então, sempre que precisar fazer requests, faça no componentDidMount, ok? =)

[gabrielferreiraa]

Ok! Mas, por que? Tem alguma diferença? Desculpe a indelicadeza kk

[fdaciuk]

Ok! Mas, por que? Tem alguma diferença? Desculpe a indelicadeza kk

Relaxa =)

Tem diferença sim. O componentWillMount é executado antes do componente montar. Um componente só é montado quando o método render é executado, e o componente é colocado no DOM. A partir daí, você pode fazer manipulações nele.

Se você tentar executar setState no componentWillMount, vai ver que não vai funcionar, pois como você pode setar um estado para um componente que ainda não existe, entende?

Em alguns momentos, pode parecer que isso funciona se você fizer um request no componentWillMount, e, no retorno do request, você usar o setState. O que acontece nesse caso é que, como o request pode demorar um pouco, e ele é feito de forma assíncrona, o componente já montou, e nesse caso o this.setState funciona. Mas você nunca vai conseguir garantir que o componente realmente já está montado após um request no componentWillMount.

O que pode acontecer de problema é que, se você executar um this.setState com o componente ainda não montado, ele não será atualizado. E isso pode acontecer algumas vezes,e outras ele pode executar, pois o componente pode estar montado.

Consegue enxergar o problema aqui? Às vezes o componente atualiza, às vezes não. Pode ser que funcione sempre no teu ambiente de dev, e quando você enviar para produção, pode deixar de funcionar.

Vai ser um bug difícil de encontrar.

Por isso, para ter certeza de que você só vai executar o this.setState após o componente montado, faça-o somente no método componentDidMount, pois ele é executado somente após o render(), garantindo que o seu componente já está no DOM =)

Isso tudo eu mostrei em aula, mas se as coisas não ficarem claras o suficiente, pode perguntar sem crise =)

Um outro ponto também é quando começarmos a trabalhar com renderização do lado do servidor. O componentWillMount é executado no server, já o componentDidMount não. Então você nunca deve colocar código de manipulação de DOM, requests, etc., que deveriam somente funcionar no browser em qualquer lifecycle antes do componentDidMount =)

Ficou claro? Qualquer dúvida, avísa ae!

[gabrielferreiraa]

Claríssimo, obrigado!

[fdaciuk]

Show! Qualquer coisa só avisar :D