Not Sure Why This Asynchronous Call In React Is Working
Solution 1:
When a class-based component is mounted, it's lifecycle methods are executed in the following order:
constructor()
static getDerivedStateFromProps()
render()
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:
static getDerivedStateFromProps
shouldComponentUpdate()
render()
getSnapShotBeforeUpdate()
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.
Post a Comment for "Not Sure Why This Asynchronous Call In React Is Working"