Am I doing it right to place ajax in componentWillMount?
The recommend approach is to place your initial network requests that modify state inside of componentDidMount, because in theory your ajax request could come back prior to React completing the mounting process which might lead to your state getting overwritten.
However, in practise people use both as the above scenario should never happen.
My componentDidMount doesn't get the value of state which get's set in componentWillMount. This means the async is not complete while componentDidMount is trying to access it.
That is the correct behaviour.
How to solve this? setting async:false is really a bad option.
If you stop it then it's no longer async.
The best practise here would be to show a loading indicator:
- add a
loading property to state - set it to
true just above your fetch request - inside
.then and .catch set loading to false - inside
render check if your data has arrived - if not display the loading indicator
If you don't want to show anything until your request comes back
You can return null inside of render which will prevent your component from being added to the DOM. You can then combine this with a flag state property to make sure the component gets mounted once your request comes back, i.e. something like this:
render() { if (!this.state.initialRequestHasCompleted) return (null); return ( <div> ... </div> ); }
What all thing can be used in componentWillMount?
What is the purpose of having functions like componentWillMount in React.js?
