Use las funciones del ciclo de vida componentWillMount o componentDidMount para solicitud asíncrona en React

Estoy leyendo sobre el ciclo de vida de las reacciones y estoy un poco confundido. Algunos recomiendan usar componentWillMount para hacer llamadas ajax:

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

Llamar a setState en componentDidMount activará otra invocación de render () y puede llevar a una expansión de diseño.

y en otros lugares dice no poner llamadas ajax en el componenteWillMount:

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

… esta función podría terminar siendo llamada varias veces antes de que se invoque el renderizado inicial, por lo que podría desencadenar múltiples efectos secundarios. Debido a este hecho, no se recomienda utilizar esta función para operaciones que causen efectos secundarios.

¿Cual es correcta?

Los documentos de React recomiendan el uso de componentDidMount para realizar solicitudes de red

componentDidMount() se invoca inmediatamente después de montar un componente. La inicialización que requiere nodos DOM debería ir aquí. Si necesita cargar datos desde un punto final remoto, este es un buen lugar para crear una instancia de la solicitud de red.

Llamar a setState() en este método desencadenará un renderizado adicional, pero se garantiza que se vaciará durante el mismo tick. Esto garantiza que, aunque se render() el render() dos veces en este caso, el usuario no verá el estado intermedio.

Según el caso de componentWillMount :

Una llamada asincrónica para recuperar datos no volverá antes de que ocurra el procesamiento. Esto significa que el componente se procesará con datos vacíos al menos una vez.

No hay forma de “pausar” la representación para esperar a que lleguen los datos. No puede devolver una promesa de componentWillMount o disputar en un setTimeout alguna manera. La forma correcta de manejar esto es configurar el estado inicial del componente para que sea válido para la representación.

En resumen

En la práctica, componentDidMount es el mejor lugar para poner llamadas a buscar datos, por dos razones:

  • El uso de DidMount deja en claro que los datos no se cargarán hasta después de la renderización inicial. Esto le recuerda configurar correctamente el estado inicial, de modo que no termine con undefined estado undefined que cause errores.
  • Si alguna vez necesita renderizar su aplicación en el servidor, se llamará a componentWillMount dos veces, una vez en el servidor y nuevamente en el cliente, que probablemente no sea lo que desea. Poner el código de carga de datos en componentDidMount asegurará que los datos solo se obtengan del cliente.

componentDidMount es el método de ciclo de vida recomendado para realizar llamadas Ajax como se describe en sus documentos

ComponentDidMount es el lugar.

Pero si tiene tiempo, intente ver Redux y realice las solicitudes en acciones, a medida que su aplicación crezca le ayudará mucho a administrar el estado de la aplicación.

😉