{"action":"created","comment":{"url":"https://api.github.com/repos/facebook/react/pulls/comments/88779821","pull_request_review_id":9345801,"id":88779821,"diff_hunk":"@@ -0,0 +1,208 @@\n+---\n+id: loading-data-asynchronously\n+title: Loading Data Asynchronously\n+permalink: docs/loading-data-asynchronously.html\n+---\n+\n+React has no special capabilities for dealing with asynchronous network requests and a third party library or browser API is needed to perform them. If a component needs to have its UI respond to new data arriving, it has to call `setState` to rerender itself.\n+\n+## Initial Render\n+\n+Often, the data that a component needs is not available at initial render. We can load data asynchronously in the [`componentDidMount` lifecycle hook](/react/docs/react-component.html#componentdidmount).\n+\n+In the following example we use the `fetch` [browser API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to retrieve information about Facebook's Gists on GitHub and store them in the state.\n+\n+```javascript{7-11}\n+class Gists extends React.Component {\n+  constructor(props) {\n+    super(props);\n+    this.state = {gists: []};\n+  }\n+\n+  componentDidMount() {\n+    fetch('https://api.github.com/users/facebook/gists')\n+      .then(res => res.json())\n+      .then(gists => this.setState({ gists }));\n+  }\n+\n+  render() {\n+    const { gists } = this.state;\n+    return (\n+      <div>\n+        <h1>Gists by facebook</h1>\n+        {gists.map(gist => <p><a href={gist.html_url}>{gist.id}</a></p>)}\n+      </div>\n+    );\n+  }\n+}\n+```\n+\n+The component will perform an initial render without any of the network data. When the fetch promise resolves, it calls `setState` and the component is rerendered.\n+\n+> **Note:**\n+>\n+> The API specification for `fetch` has not been stabilized and browser support is not quite there yet. To use `fetch` today, a [polyfill](https://github.com/github/fetch) is available for non-supporting browsers. If you're using Create React App, a polyfill is available by default.\n+\n+## Updates\n+\n+If the props change, we might need to fetch new data for the updated props. The [`componentDidUpdate` lifecycle hook](/react/docs/react-component.html#componentdidupdate) is a good place to achieve this, since we may not need to fetch new data if the props that we're interested in have not changed.\n+\n+Building on the previous example, we will pass the username as a prop instead and fetch new gists when it changes:\n+\n+```javascript{7-12,14-23}\n+class Gists extends React.Component {\n+  constructor(props) {\n+    super(props);\n+    this.state = {gists: []};\n+  }\n+\n+  componentDidMount() {\n+    const { username } = this.props;\n+    fetch(`https://api.github.com/users/${username}/gists`)\n+      .then(res => res.json())\n+      .then(gists => this.setState({ gists }));\n+  }\n+\n+  componentDidUpdate(prevProps) {\n+    const { username } = this.props;\n+    // Make sure that the `username` prop did change before\n+    // we initiate a network request.\n+    if (username !== prevProps.username) {\n+      fetch(`https://api.github.com/users/${username}/gists`)\n+        .then(res => res.json())\n+        .then(gists => this.setState({ gists }));\n+    }\n+  }\n+\n+  render() {\n+    const { username } = this.props;\n+    const { gists } = this.state;\n+    return (\n+      <div>\n+        <h1>Gists by {username}.</h1>\n+        {gists.map(gist => \n+          <p><a href={gist.html_url}>{gist.id}</a></p>\n+        )}\n+      </div>\n+    );\n+  }\n+}\n+```\n+\n+We can extract the common code in `componentDidMount` and `componentDidUpdate` into a new method, `fetchGists`, and call that in both lifecycle hooks.\n+\n+```javascript{8,13,17-22}\n+class Gists extends React.Component {\n+  constructor(props) {\n+    super(props);\n+    this.state = {gists: []};\n+  }\n+\n+  componentDidMount() {\n+    this.fetchGists();\n+  }\n+\n+  componentDidUpdate(prevProps) {\n+    if (this.props.username !== prevProps.username) {\n+      this.fetchGists();\n+    }\n+  }\n+\n+  fetchGists() {\n+    const { username } = this.props;\n+    fetch(`https://api.github.com/users/${username}/gists`)\n+      .then(res => res.json())\n+      .then(gists => this.setState({ gists }));\n+  }\n+\n+  render() {\n+    const { username } = this.props;\n+    const { gists } = this.state;\n+    return (\n+      <div>\n+        <h1>Gists by {username}.</h1>\n+        {gists.map(gist => \n+          <p><a href={gist.html_url}>{gist.id}</a></p>\n+        )}\n+      </div>\n+    );\n+  }\n+}\n+```\n+\n+[Try it out on CodePen.](http://codepen.io/rthor/pen/kkqrQx?editors=0010)\n+\n+We can simplify the `fetchGists` method by using the [`async / await`](https://tc39.github.io/ecmascript-asyncawait/) feature:\n+\n+```javascript{1,3-4}\n+async fetchGists() {\n+  const { username } = this.props;\n+  const data = await fetch(`https://api.github.com/users/${username}/gists`);\n+  this.setState({gists: await data.json()});\n+}\n+```\n+\n+[Try it out on CodePen.](https://codepen.io/rthor/pen/xEoWod?editors=0010)\n+\n+> **Note:**\n+> \n+> `async / await` is still a proposal for the ECMAScript spec and therefore hasn't been implemented in most browsers. To use it today, a [Babel](http://babeljs.io/docs/plugins/transform-async-to-generator/) (or similar) transform is needed. If you're using Create React App, it works by default.\n+\n+## Pitfalls","path":"docs/docs/loading-data-asynchronously.md","position":151,"original_position":151,"commit_id":"74cc9784197673ec22496578f46d5bea0a133a4c","original_commit_id":"74cc9784197673ec22496578f46d5bea0a133a4c","user":{"login":"rthor","id":1608329,"avatar_url":"https://avatars.githubusercontent.com/u/1608329?v=3","gravatar_id":"","url":"https://api.github.com/users/rthor","html_url":"https://github.com/rthor","followers_url":"https://api.github.com/users/rthor/followers","following_url":"https://api.github.com/users/rthor/following{/other_user}","gists_url":"https://api.github.com/users/rthor/gists{/gist_id}","starred_url":"https://api.github.com/users/rthor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rthor/subscriptions","organizations_url":"https://api.github.com/users/rthor/orgs","repos_url":"https://api.github.com/users/rthor/repos","events_url":"https://api.github.com/users/rthor/events{/privacy}","received_events_url":"https://api.github.com/users/rthor/received_events","type":"User","site_admin":false},"body":"Just Not that I'm aware of, no. Would you prefer that we bake the pitfalls section into each example? Ie provide \"bug-free\" code from the get-go even if it might be a bit verbose and will probably be explaining to much in one pass for a newcomer.","created_at":"2016-11-19T13:48:03Z","updated_at":"2016-11-19T13:48:03Z","html_url":"https://github.com/facebook/react/pull/8098#discussion_r88779821","pull_request_url":"https://api.github.com/repos/facebook/react/pulls/8098","_links":{"self":{"href":"https://api.github.com/repos/facebook/react/pulls/comments/88779821"},"html":{"href":"https://github.com/facebook/react/pull/8098#discussion_r88779821"},"pull_request":{"href":"https://api.github.com/repos/facebook/react/pulls/8098"}}},"pull_request":{"url":"https://api.github.com/repos/facebook/react/pulls/8098","id":90912650,"html_url":"https://github.com/facebook/react/pull/8098","diff_url":"https://github.com/facebook/react/pull/8098.diff","patch_url":"https://github.com/facebook/react/pull/8098.patch","issue_url":"https://api.github.com/repos/facebook/react/issues/8098","number":8098,"state":"open","locked":false,"title":"Add a guide on loading data asynchronously","user":{"login":"rthor","id":1608329,"avatar_url":"https://avatars.githubusercontent.com/u/1608329?v=3","gravatar_id":"","url":"https://api.github.com/users/rthor","html_url":"https://github.com/rthor","followers_url":"https://api.github.com/users/rthor/followers","following_url":"https://api.github.com/users/rthor/following{/other_user}","gists_url":"https://api.github.com/users/rthor/gists{/gist_id}","starred_url":"https://api.github.com/users/rthor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rthor/subscriptions","organizations_url":"https://api.github.com/users/rthor/orgs","repos_url":"https://api.github.com/users/rthor/repos","events_url":"https://api.github.com/users/rthor/events{/privacy}","received_events_url":"https://api.github.com/users/rthor/received_events","type":"User","site_admin":false},"body":"This guide demonstrates how to load data asynchronously in a React component. I wasn't quite sure where a link to the guide should be placed. Is the Advanced Guides section a good fit?\n\nIt addresses the AJAX part in #8060.\n","created_at":"2016-10-25T23:45:06Z","updated_at":"2016-11-19T13:48:03Z","closed_at":null,"merged_at":null,"merge_commit_sha":"42c0d2802945079abd0e886b3f08dcba0e5f5b24","assignee":{"login":"lacker","id":106475,"avatar_url":"https://avatars.githubusercontent.com/u/106475?v=3","gravatar_id":"","url":"https://api.github.com/users/lacker","html_url":"https://github.com/lacker","followers_url":"https://api.github.com/users/lacker/followers","following_url":"https://api.github.com/users/lacker/following{/other_user}","gists_url":"https://api.github.com/users/lacker/gists{/gist_id}","starred_url":"https://api.github.com/users/lacker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lacker/subscriptions","organizations_url":"https://api.github.com/users/lacker/orgs","repos_url":"https://api.github.com/users/lacker/repos","events_url":"https://api.github.com/users/lacker/events{/privacy}","received_events_url":"https://api.github.com/users/lacker/received_events","type":"User","site_admin":false},"assignees":[{"login":"lacker","id":106475,"avatar_url":"https://avatars.githubusercontent.com/u/106475?v=3","gravatar_id":"","url":"https://api.github.com/users/lacker","html_url":"https://github.com/lacker","followers_url":"https://api.github.com/users/lacker/followers","following_url":"https://api.github.com/users/lacker/following{/other_user}","gists_url":"https://api.github.com/users/lacker/gists{/gist_id}","starred_url":"https://api.github.com/users/lacker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lacker/subscriptions","organizations_url":"https://api.github.com/users/lacker/orgs","repos_url":"https://api.github.com/users/lacker/repos","events_url":"https://api.github.com/users/lacker/events{/privacy}","received_events_url":"https://api.github.com/users/lacker/received_events","type":"User","site_admin":false}],"milestone":null,"commits_url":"https://api.github.com/repos/facebook/react/pulls/8098/commits","review_comments_url":"https://api.github.com/repos/facebook/react/pulls/8098/comments","review_comment_url":"https://api.github.com/repos/facebook/react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/facebook/react/issues/8098/comments","statuses_url":"https://api.github.com/repos/facebook/react/statuses/74cc9784197673ec22496578f46d5bea0a133a4c","head":{"label":"rthor:docs/loading-data-asynchronously","ref":"docs/loading-data-asynchronously","sha":"74cc9784197673ec22496578f46d5bea0a133a4c","user":{"login":"rthor","id":1608329,"avatar_url":"https://avatars.githubusercontent.com/u/1608329?v=3","gravatar_id":"","url":"https://api.github.com/users/rthor","html_url":"https://github.com/rthor","followers_url":"https://api.github.com/users/rthor/followers","following_url":"https://api.github.com/users/rthor/following{/other_user}","gists_url":"https://api.github.com/users/rthor/gists{/gist_id}","starred_url":"https://api.github.com/users/rthor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rthor/subscriptions","organizations_url":"https://api.github.com/users/rthor/orgs","repos_url":"https://api.github.com/users/rthor/repos","events_url":"https://api.github.com/users/rthor/events{/privacy}","received_events_url":"https://api.github.com/users/rthor/received_events","type":"User","site_admin":false},"repo":{"id":71598113,"name":"react","full_name":"rthor/react","owner":{"login":"rthor","id":1608329,"avatar_url":"https://avatars.githubusercontent.com/u/1608329?v=3","gravatar_id":"","url":"https://api.github.com/users/rthor","html_url":"https://github.com/rthor","followers_url":"https://api.github.com/users/rthor/followers","following_url":"https://api.github.com/users/rthor/following{/other_user}","gists_url":"https://api.github.com/users/rthor/gists{/gist_id}","starred_url":"https://api.github.com/users/rthor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rthor/subscriptions","organizations_url":"https://api.github.com/users/rthor/orgs","repos_url":"https://api.github.com/users/rthor/repos","events_url":"https://api.github.com/users/rthor/events{/privacy}","received_events_url":"https://api.github.com/users/rthor/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/rthor/react","description":"A declarative, efficient, and flexible JavaScript library for building user interfaces.","fork":true,"url":"https://api.github.com/repos/rthor/react","forks_url":"https://api.github.com/repos/rthor/react/forks","keys_url":"https://api.github.com/repos/rthor/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/rthor/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/rthor/react/teams","hooks_url":"https://api.github.com/repos/rthor/react/hooks","issue_events_url":"https://api.github.com/repos/rthor/react/issues/events{/number}","events_url":"https://api.github.com/repos/rthor/react/events","assignees_url":"https://api.github.com/repos/rthor/react/assignees{/user}","branches_url":"https://api.github.com/repos/rthor/react/branches{/branch}","tags_url":"https://api.github.com/repos/rthor/react/tags","blobs_url":"https://api.github.com/repos/rthor/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/rthor/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/rthor/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/rthor/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/rthor/react/statuses/{sha}","languages_url":"https://api.github.com/repos/rthor/react/languages","stargazers_url":"https://api.github.com/repos/rthor/react/stargazers","contributors_url":"https://api.github.com/repos/rthor/react/contributors","subscribers_url":"https://api.github.com/repos/rthor/react/subscribers","subscription_url":"https://api.github.com/repos/rthor/react/subscription","commits_url":"https://api.github.com/repos/rthor/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/rthor/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/rthor/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/rthor/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/rthor/react/contents/{+path}","compare_url":"https://api.github.com/repos/rthor/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/rthor/react/merges","archive_url":"https://api.github.com/repos/rthor/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/rthor/react/downloads","issues_url":"https://api.github.com/repos/rthor/react/issues{/number}","pulls_url":"https://api.github.com/repos/rthor/react/pulls{/number}","milestones_url":"https://api.github.com/repos/rthor/react/milestones{/number}","notifications_url":"https://api.github.com/repos/rthor/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/rthor/react/labels{/name}","releases_url":"https://api.github.com/repos/rthor/react/releases{/id}","deployments_url":"https://api.github.com/repos/rthor/react/deployments","created_at":"2016-10-21T21:26:31Z","updated_at":"2016-10-21T21:26:36Z","pushed_at":"2016-11-09T23:26:44Z","git_url":"git://github.com/rthor/react.git","ssh_url":"git@github.com:rthor/react.git","clone_url":"https://github.com/rthor/react.git","svn_url":"https://github.com/rthor/react","homepage":"https://facebook.github.io/react/","size":106868,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"facebook:master","ref":"master","sha":"51e1937dd62aacd4c1130fafc21fe37a266d3e47","user":{"login":"facebook","id":69631,"avatar_url":"https://avatars.githubusercontent.com/u/69631?v=3","gravatar_id":"","url":"https://api.github.com/users/facebook","html_url":"https://github.com/facebook","followers_url":"https://api.github.com/users/facebook/followers","following_url":"https://api.github.com/users/facebook/following{/other_user}","gists_url":"https://api.github.com/users/facebook/gists{/gist_id}","starred_url":"https://api.github.com/users/facebook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/facebook/subscriptions","organizations_url":"https://api.github.com/users/facebook/orgs","repos_url":"https://api.github.com/users/facebook/repos","events_url":"https://api.github.com/users/facebook/events{/privacy}","received_events_url":"https://api.github.com/users/facebook/received_events","type":"Organization","site_admin":false},"repo":{"id":10270250,"name":"react","full_name":"facebook/react","owner":{"login":"facebook","id":69631,"avatar_url":"https://avatars.githubusercontent.com/u/69631?v=3","gravatar_id":"","url":"https://api.github.com/users/facebook","html_url":"https://github.com/facebook","followers_url":"https://api.github.com/users/facebook/followers","following_url":"https://api.github.com/users/facebook/following{/other_user}","gists_url":"https://api.github.com/users/facebook/gists{/gist_id}","starred_url":"https://api.github.com/users/facebook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/facebook/subscriptions","organizations_url":"https://api.github.com/users/facebook/orgs","repos_url":"https://api.github.com/users/facebook/repos","events_url":"https://api.github.com/users/facebook/events{/privacy}","received_events_url":"https://api.github.com/users/facebook/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/facebook/react","description":"A declarative, efficient, and flexible JavaScript library for building user interfaces.","fork":false,"url":"https://api.github.com/repos/facebook/react","forks_url":"https://api.github.com/repos/facebook/react/forks","keys_url":"https://api.github.com/repos/facebook/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/facebook/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/facebook/react/teams","hooks_url":"https://api.github.com/repos/facebook/react/hooks","issue_events_url":"https://api.github.com/repos/facebook/react/issues/events{/number}","events_url":"https://api.github.com/repos/facebook/react/events","assignees_url":"https://api.github.com/repos/facebook/react/assignees{/user}","branches_url":"https://api.github.com/repos/facebook/react/branches{/branch}","tags_url":"https://api.github.com/repos/facebook/react/tags","blobs_url":"https://api.github.com/repos/facebook/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/facebook/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/facebook/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/facebook/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/facebook/react/statuses/{sha}","languages_url":"https://api.github.com/repos/facebook/react/languages","stargazers_url":"https://api.github.com/repos/facebook/react/stargazers","contributors_url":"https://api.github.com/repos/facebook/react/contributors","subscribers_url":"https://api.github.com/repos/facebook/react/subscribers","subscription_url":"https://api.github.com/repos/facebook/react/subscription","commits_url":"https://api.github.com/repos/facebook/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/facebook/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/facebook/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/facebook/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/facebook/react/contents/{+path}","compare_url":"https://api.github.com/repos/facebook/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/facebook/react/merges","archive_url":"https://api.github.com/repos/facebook/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/facebook/react/downloads","issues_url":"https://api.github.com/repos/facebook/react/issues{/number}","pulls_url":"https://api.github.com/repos/facebook/react/pulls{/number}","milestones_url":"https://api.github.com/repos/facebook/react/milestones{/number}","notifications_url":"https://api.github.com/repos/facebook/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/facebook/react/labels{/name}","releases_url":"https://api.github.com/repos/facebook/react/releases{/id}","deployments_url":"https://api.github.com/repos/facebook/react/deployments","created_at":"2013-05-24T16:15:54Z","updated_at":"2016-11-19T13:45:51Z","pushed_at":"2016-11-19T11:25:26Z","git_url":"git://github.com/facebook/react.git","ssh_url":"git@github.com:facebook/react.git","clone_url":"https://github.com/facebook/react.git","svn_url":"https://github.com/facebook/react","homepage":"https://facebook.github.io/react/","size":146489,"stargazers_count":54303,"watchers_count":54303,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":9666,"mirror_url":null,"open_issues_count":609,"forks":9666,"open_issues":609,"watchers":54303,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/facebook/react/pulls/8098"},"html":{"href":"https://github.com/facebook/react/pull/8098"},"issue":{"href":"https://api.github.com/repos/facebook/react/issues/8098"},"comments":{"href":"https://api.github.com/repos/facebook/react/issues/8098/comments"},"review_comments":{"href":"https://api.github.com/repos/facebook/react/pulls/8098/comments"},"review_comment":{"href":"https://api.github.com/repos/facebook/react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/facebook/react/pulls/8098/commits"},"statuses":{"href":"https://api.github.com/repos/facebook/react/statuses/74cc9784197673ec22496578f46d5bea0a133a4c"}}}}
{"actor":{"display_login":"rthor"}}