Not Sure Why This Asynchronous Call In React Is Working

I am playing around with reactjs and here is what I am doing: Am working on retrieving data from an API and displaying the data Using axios to make a call to the API. I know that

Solution 1:

When a class-based component is mounted, it's lifecycle methods are executed in the following order:

1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

In your case, after the StudentPage component is mounted, it immediately attempts to fetch the data which then triggers a component update/re-render.

When the component re-renders, it calls the following lifecycle methods in the following order:

1. static getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapShotBeforeUpdate()
5. componentDidUpdate()

You'll be able to more clearly visualise this if you place a break point or a simple console.log() in render(), componentDidMount() and componentDidUpdate().

This is pure speculation from my side, but it is possible that the (I'm assuming local) server you're calling is responding with the data you're expecting much quicker, so it seems like the data is readily available on first mount.

If you wish to find out more about React's lifecycle methods then don't hesitate to refer to the official React documentation.