Use as funções de ciclo de vida componentWillMount ou componentDidMount para solicitação assíncrona em React

Estou lendo sobre o ciclo de vida e estou ficando um pouco confuso. Alguns recomendam usar componentWillMount para fazer chamadas ajax:

https://hashnode.com/post/why-is-it-a-bad-idea-to-call-setstate-immediately-after-componentdidmount-in-react-cim5vz8kn01flek53aqa22mby

Chamar setState em componentDidMount acionará outra chamada render () e isso pode levar à remoção de layout.

e em outros lugares diz para não colocar chamadas ajax no componenteWillMount:

https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d

… essa function pode acabar sendo chamada várias vezes antes de a renderização inicial ser chamada, o que pode resultar no acionamento de vários efeitos colaterais. Devido a este fato, não é recomendado usar esta function para qualquer operação que cause efeitos colaterais.

Qual é correto?

Os documentos do React recomendam o uso de componentDidMount para fazer solicitações de rede

componentDidMount() é chamado imediatamente após um componente ser montado. Inicialização que requer nós DOM deve ir aqui. Se você precisar carregar dados de um endpoint remoto, este é um bom local para instanciar a solicitação de rede.

Chamar setState() nesse método acionará uma renderização extra, mas é garantido que ela será liberada durante o mesmo tick. Isso garante que, mesmo que o render() seja chamado duas vezes nesse caso, o usuário não verá o estado intermediário.

Conforme o caso do componentWillMount :

Uma chamada assíncrona para buscar dados não retornará antes que a renderização aconteça. Isso significa que o componente será renderizado com dados vazios pelo menos uma vez.

Não há como pausar a renderização para aguardar a chegada dos dados. Você não pode retornar uma promise de componentWillMount ou disputar um setTimeout alguma forma. A maneira correta de lidar com isso é configurar o estado inicial do componente para que seja válido para renderização.

Resumindo

Na prática, componentDidMount é o melhor local para colocar chamadas para buscar dados, por dois motivos:

  • O uso do DidMount deixa claro que os dados não serão carregados até depois da renderização inicial. Isso lembra você de configurar o estado inicial corretamente, para que você não acabe com o estado undefined que causa erros.
  • Se você precisar renderizar seu aplicativo no servidor, o componentWillMount será chamado duas vezes – uma vez no servidor e novamente no cliente – o que provavelmente não é o que você deseja. Colocar o código de carregamento de dados em componentDidMount garantirá que os dados sejam buscados somente no cliente.

componentDidMount é o método de ciclo de vida recomendado para fazer chamadas Ajax conforme descrito em seus documentos

ComponentDidMount é o local.

Mas se você tiver tempo, tente olhar para o Redux e fazer as requisições em ações, à medida que seu aplicativo cresce, ajudará muito a gerenciar o estado do aplicativo.

😉