React componentDidMount vs getInitialState
Solution 1
componentDidMount
would be called after component was mounted into browser DOM (it would be called after first render and it would not be called if you are rendering server-side(to string)
getInitialState
would be called when component is created, if you are using es6 class syntax you can place that logic in you component constructor directly assigning to this.state
There is also componentWillMount
it would be called before first render for both server and client - it is more suitable in your case.
Solution 2
Componentndid mount is fired after the render and we load the Ajax inside that.While during the actual render we check if the object has data, else send empty div
componentDidMount: function () {
console.log("========> FIring");
$.get("http://api.", function(response) {
if (this.isMounted()) {
this.setState({
Data: response
});
}
}.bind(this));
},
render: function() {
var data = this.state.Data;
if (this.state.promoData) {
return (<div>{data}</div>
);
} else {
return (<div className="divLoading">Loading...</div>);
}
}
Solution 3
I'm not sure about this Backbone usage but if you load data in componentDidMount
that's fine as essentially that code will start executing after the component is initially rendered -- after the data is fetched and the state is set again, the component will re-render showing that correct data at that point. This kind of like lazy loading to me.
I'm not sure if getInitialState
is blocking, but if it is, then the component will not render until the state is loaded. But I think it isn't, so the data would probably not be fetched by the time the component is rendered.
componentWillMount
may be what you want, but review the React lifecycle for what you think makes the most sense.
Related videos on Youtube
Dan Baker
Tech leader with a track record for success in execution and mentorship.
Updated on September 15, 2022Comments
-
Dan Baker over 1 year
I have some questions about react usage and patterns.
Should I use
componentDidMount
or
getInitialState
in loading data asynchronously? What is the difference between the two?
I am using Backbone for my frontend data structures
this.props.data = new BrandModel({ _id: this.props.params.brandId }); var that = this; this.props.data.fetch({ success: function () { that.setState({ brand: that.props.brand }); } }); return null;
Update: thanks for the responses
This Question is suggesting to not us componentWillMount, but I understand that its more expressive to use componentDidMount in this case as getInitialState seems to be meant to be used synchronously
Update 2:
I've had to revert to using getInitialState as componentDidMount fires after render and I need this.props.data to be pointing to an object
-
KajMagnus over 6 years
getInitialState
is not blocking — no React function is, unless one does something likewhile (true) { console.log('a-long-loop'); }