Why not make AJAX calls in React ES6 class constructor?

Asked Apr 01 '16 at 23:03

Active Apr 01 '16 at 23:36

Viewed 1,312 times

The React docs say I should make AJAX calls to set the state in componentDidMount(), not the constructor. According to all the examples I have seen, this is how I should load data from the server:

constructor() {
    super();
    this.state = {toDoItems: []};
}

componentDidMount() {
    loadToDoItems()
        .then(items => this.setState({toDoItems: items}));
}

Why not just load the server data in the constructor, like this?:

constructor() {
    super();
    loadToDoItems()
        .then(items => this.state = {toDoItems: items});
}

edited Apr 01 '16 at 23:36

Felix Kling

795,719
175
1,089
1,143

asked Apr 01 '16 at 23:03

1

Why load data for a component that may never mount? – Adam Jenkins Apr 01 '16 at 23:07
1

Why would the constructor be called if the component wouldn't be mounted? – Apr 01 '16 at 23:13
1

It could be passed to another component but that component may only render it if a condition is met. – Felix Kling Apr 01 '16 at 23:37
@JosephKriefall - why would you need a componentDidMount callback if all components always mounted as a result of being created? – Adam Jenkins Apr 01 '16 at 23:48
So you can access the DOM – Apr 02 '16 at 00:48
Another reason not to make AJAX calls in constructor: you don't know if it will succeed or how long it will take http://stackoverflow.com/a/29883895/2994322 – Apr 05 '16 at 15:55

Why not make AJAX calls in React ES6 class constructor?

0 Answers0