tutorial: Fetch data in componentDidMount instead
In a world where this component was server-rendered, we wouldn't want to call the data-fetching code there so it makes more sense to have it in componentDidMount.
Ben Alpert committed
Jul 9, 2014 at 12:02 UTC
774f5a022eacbb054b09aa5a7d596186874b2600
1 file changed
+6
-6
docs/docs/tutorial.md
+6
-6
@@ -386,7 +386,7 @@ var CommentBox = React.createClass({
386
getInitialState: function() {
387
return {data: []};
388
},
389
- componentWillMount: function() {
389
+ componentDidMount: function() {
390
$.ajax({
391
url: this.props.url,
392
dataType: 'json',
@@ -410,7 +410,7 @@ var CommentBox = React.createClass({
410
});
411
```
412
413
-Here, `componentWillMount` is a method called automatically by React before a component is rendered. The key to dynamic updates is the call to `this.setState()`. We replace the old array of comments with the new one from the server and the UI automatically updates itself. Because of this reactivity, it is only a minor change to add live updates. We will use simple polling here but you could easily use WebSockets or other technologies.
413
+Here, `componentDidMount` is a method called automatically by React when a component is rendered. The key to dynamic updates is the call to `this.setState()`. We replace the old array of comments with the new one from the server and the UI automatically updates itself. Because of this reactivity, it is only a minor change to add live updates. We will use simple polling here but you could easily use WebSockets or other technologies.
414
415
```javascript{3,19-20,34}
416
// tutorial14.js
@@ -430,7 +430,7 @@ var CommentBox = React.createClass({
430
getInitialState: function() {
431
return {data: []};
432
},
433
- componentWillMount: function() {
433
+ componentDidMount: function() {
434
this.loadCommentsFromServer();
435
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
436
},
@@ -538,7 +538,7 @@ var CommentBox = React.createClass({
538
getInitialState: function() {
539
return {data: []};
540
},
541
- componentWillMount: function() {
541
+ componentDidMount: function() {
542
this.loadCommentsFromServer();
543
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
544
},
@@ -613,7 +613,7 @@ var CommentBox = React.createClass({
613
getInitialState: function() {
614
return {data: []};
615
},
616
- componentWillMount: function() {
616
+ componentDidMount: function() {
617
this.loadCommentsFromServer();
618
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
619
},
@@ -668,7 +668,7 @@ var CommentBox = React.createClass({
668
getInitialState: function() {
669
return {data: []};
670
},
671
- componentWillMount: function() {
671
+ componentDidMount: function() {
672
this.loadCommentsFromServer();
673
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
674
},