Tal como la documentación de react dice:
componentDidMount()
is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
Traducción
componentDidMount()
is invocado inmediatamente después que un componente es montado (insertado en el árbol). La inicialización que requiere nodos del DOM debería ir aquí. Si necesitas cargar datos desde un punto remoto, este es un buen lugar para instanciar la petición.
Como ya te está en la documentación, la misma gente de Facebook te recomienda hacerlo desde este punto, por algo muy importante, en este punto del ciclo de vida del componente ya tienes disponible el método setState
por lo que podrás hacer uso del estado del componente como tal, mientras que en el constructor
solo puedes definir un estado inicial.
¿Qué quiere decir esto?
Pues piensa en lo siguiente, el método constructor
corre de manera sincrónica, es decir, lo ideal es que cualquier código que corras dentro sea sincrónico y no asíncrono (cualidad de las peticiones a servidores, son promesas, código que se ejecuta de manera asíncrona), de tal modo que una vez tu promesa sea resuelta, no tendrías qué hacer ni donde asignar los datos, te pondré un ejemplo:
class extends React.Component {
constructor(props) {
super(props);
fetch('some-url', {}).then(r => r.json())
.then(data => {
// en este punto, no puedes asignar directamente a `setState`
// porque no sabes si el componente ya tiene acceso a ese método
// tampoco puedes asignarlo a `this.state` directamente como `initialState`
// porque como corre de forma sincrónica estarías dañando el curso normal del componente
});
}
render() { return null; }
}
Entonces la pregunta es ¿Qué hago con mis datos del servidor? La respuesta es: A menos que los guardes en un estado global (redux o algún parecido, incluso context) no creo que tengan mucho uso, o dependiendo del tipo de tarea que quieras ejecutar.
Como en el componentDidMount
ya tienes acceso al método setState
entonces puedes asignar los datos en tu state sin muchas complicaciones ni verificaciones de si el componente ya está montado o no.
ACTUALIZACIÓN
Te explico (en base al comentario), cuando React ejecuta el método componentDidMount
ya tiene un estado definido a partir del initialState
(en el ejemplo equivale a cuando defino el state
como propiedad de la clase) e hizo su primer render, por lo que si tienes contenido en tu método render
lo más probable es que haga el render antes de llamar el componentDidMount
. Entonces lo que normalmente se hace es poner un loader o un estado de carga hasta que tu respuesta llegue (esto es algo que harías con cualquier tecnología no solo React)
class extends React.Component {
state = { data: {}, loading: true }
async componentDidMount() {
// cuando entre aquí ya hizo el primer render, este estará con el
// estado `loading` con valor en true
const response = await fetch('algun-lugar', {});
// cuando se ejecute la promesa, hará el cambio de estado y mostrará tu
// contenido de parte del servidor de acuerdo a lo qué hayas definido
this.setState({ data: await response.json(), loading: false});
}
render() {
return this.state.loading ? <div>Cargando...</div> : this.unMetodoQueTrateDataParaRender()
}
}
Cualquier duda que tengas, no dudes en preguntarme y comentar.