{"action":"created","comment":{"url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments/170020459","pull_request_review_id":98640373,"id":170020459,"diff_hunk":"@@ -66,24 +73,25 @@ class CustomTextInput extends React.Component {\n }\n ```\n \n-React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts. `ref` callbacks are invoked before `componentDidMount` or `componentDidUpdate` lifecycle hooks.\n-\n-Using the `ref` callback just to set a property on the class is a common pattern for accessing DOM elements. The preferred way is to set the property in the `ref` callback like in the above example. There is even a shorter way to write it: `ref={input => this.textInput = input}`. \n+React will assign the `value` property with the DOM element when the component mounts, and assign it back to `null` when it unmounts. `ref` updates happen before `componentDidMount` or `componentDidUpdate` lifecycle hooks.\n \n ### Adding a Ref to a Class Component\n \n-When the `ref` attribute is used on a custom component declared as a class, the `ref` callback receives the mounted instance of the component as its argument. For example, if we wanted to wrap the `CustomTextInput` above to simulate it being clicked immediately after mounting:\n+When the `ref` attribute is used on a custom component declared as a class, the `ref` object receives the mounted instance of the component as its `value`. For example, if we wanted to wrap the `CustomTextInput` above to simulate it being clicked immediately after mounting:\n \n ```javascript{3,9}\n class AutoFocusTextInput extends React.Component {\n+  constructor(props) {","path":"content/docs/refs-and-the-dom.md","position":59,"original_position":59,"commit_id":"c09a2849977ae341c830843ffbc2b5d7bcfeaa98","original_commit_id":"c09a2849977ae341c830843ffbc2b5d7bcfeaa98","user":{"login":"bvaughn","id":29597,"avatar_url":"https://avatars0.githubusercontent.com/u/29597?v=4","gravatar_id":"","url":"https://api.github.com/users/bvaughn","html_url":"https://github.com/bvaughn","followers_url":"https://api.github.com/users/bvaughn/followers","following_url":"https://api.github.com/users/bvaughn/following{/other_user}","gists_url":"https://api.github.com/users/bvaughn/gists{/gist_id}","starred_url":"https://api.github.com/users/bvaughn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bvaughn/subscriptions","organizations_url":"https://api.github.com/users/bvaughn/orgs","repos_url":"https://api.github.com/users/bvaughn/repos","events_url":"https://api.github.com/users/bvaughn/events{/privacy}","received_events_url":"https://api.github.com/users/bvaughn/received_events","type":"User","site_admin":false},"body":"Same comment about the line highlights being off here.","created_at":"2018-02-22T16:44:02Z","updated_at":"2018-02-22T16:51:27Z","html_url":"https://github.com/reactjs/reactjs.org/pull/637#discussion_r170020459","pull_request_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/637","author_association":"CONTRIBUTOR","_links":{"self":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments/170020459"},"html":{"href":"https://github.com/reactjs/reactjs.org/pull/637#discussion_r170020459"},"pull_request":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/637"}}},"pull_request":{"url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/637","id":170794995,"html_url":"https://github.com/reactjs/reactjs.org/pull/637","diff_url":"https://github.com/reactjs/reactjs.org/pull/637.diff","patch_url":"https://github.com/reactjs/reactjs.org/pull/637.patch","issue_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/637","number":637,"state":"open","locked":false,"title":"Add React.createRef doc","user":{"login":"trueadm","id":1519870,"avatar_url":"https://avatars0.githubusercontent.com/u/1519870?v=4","gravatar_id":"","url":"https://api.github.com/users/trueadm","html_url":"https://github.com/trueadm","followers_url":"https://api.github.com/users/trueadm/followers","following_url":"https://api.github.com/users/trueadm/following{/other_user}","gists_url":"https://api.github.com/users/trueadm/gists{/gist_id}","starred_url":"https://api.github.com/users/trueadm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/trueadm/subscriptions","organizations_url":"https://api.github.com/users/trueadm/orgs","repos_url":"https://api.github.com/users/trueadm/repos","events_url":"https://api.github.com/users/trueadm/events{/privacy}","received_events_url":"https://api.github.com/users/trueadm/received_events","type":"User","site_admin":false},"body":"This PR adds the new `React.createRef()` documentation to the refs page in the documentation.","created_at":"2018-02-22T16:12:44Z","updated_at":"2018-02-22T16:51:27Z","closed_at":null,"merged_at":null,"merge_commit_sha":"04bf301492dfa90471357ef967404d03810cdbc1","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[{"id":845180488,"url":"https://api.github.com/repos/reactjs/reactjs.org/labels/16.3","name":"16.3","color":"6441e2","default":false},{"id":712729626,"url":"https://api.github.com/repos/reactjs/reactjs.org/labels/CLA%20Signed","name":"CLA Signed","color":"e7e7e7","default":false}],"milestone":null,"commits_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/637/commits","review_comments_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/637/comments","review_comment_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments{/number}","comments_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/637/comments","statuses_url":"https://api.github.com/repos/reactjs/reactjs.org/statuses/c09a2849977ae341c830843ffbc2b5d7bcfeaa98","head":{"label":"trueadm:create-ref","ref":"create-ref","sha":"c09a2849977ae341c830843ffbc2b5d7bcfeaa98","user":{"login":"trueadm","id":1519870,"avatar_url":"https://avatars0.githubusercontent.com/u/1519870?v=4","gravatar_id":"","url":"https://api.github.com/users/trueadm","html_url":"https://github.com/trueadm","followers_url":"https://api.github.com/users/trueadm/followers","following_url":"https://api.github.com/users/trueadm/following{/other_user}","gists_url":"https://api.github.com/users/trueadm/gists{/gist_id}","starred_url":"https://api.github.com/users/trueadm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/trueadm/subscriptions","organizations_url":"https://api.github.com/users/trueadm/orgs","repos_url":"https://api.github.com/users/trueadm/repos","events_url":"https://api.github.com/users/trueadm/events{/privacy}","received_events_url":"https://api.github.com/users/trueadm/received_events","type":"User","site_admin":false},"repo":{"id":107546019,"name":"reactjs.org","full_name":"trueadm/reactjs.org","owner":{"login":"trueadm","id":1519870,"avatar_url":"https://avatars0.githubusercontent.com/u/1519870?v=4","gravatar_id":"","url":"https://api.github.com/users/trueadm","html_url":"https://github.com/trueadm","followers_url":"https://api.github.com/users/trueadm/followers","following_url":"https://api.github.com/users/trueadm/following{/other_user}","gists_url":"https://api.github.com/users/trueadm/gists{/gist_id}","starred_url":"https://api.github.com/users/trueadm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/trueadm/subscriptions","organizations_url":"https://api.github.com/users/trueadm/orgs","repos_url":"https://api.github.com/users/trueadm/repos","events_url":"https://api.github.com/users/trueadm/events{/privacy}","received_events_url":"https://api.github.com/users/trueadm/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/trueadm/reactjs.org","description":"The React documentation website","fork":true,"url":"https://api.github.com/repos/trueadm/reactjs.org","forks_url":"https://api.github.com/repos/trueadm/reactjs.org/forks","keys_url":"https://api.github.com/repos/trueadm/reactjs.org/keys{/key_id}","collaborators_url":"https://api.github.com/repos/trueadm/reactjs.org/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/trueadm/reactjs.org/teams","hooks_url":"https://api.github.com/repos/trueadm/reactjs.org/hooks","issue_events_url":"https://api.github.com/repos/trueadm/reactjs.org/issues/events{/number}","events_url":"https://api.github.com/repos/trueadm/reactjs.org/events","assignees_url":"https://api.github.com/repos/trueadm/reactjs.org/assignees{/user}","branches_url":"https://api.github.com/repos/trueadm/reactjs.org/branches{/branch}","tags_url":"https://api.github.com/repos/trueadm/reactjs.org/tags","blobs_url":"https://api.github.com/repos/trueadm/reactjs.org/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/trueadm/reactjs.org/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/trueadm/reactjs.org/git/refs{/sha}","trees_url":"https://api.github.com/repos/trueadm/reactjs.org/git/trees{/sha}","statuses_url":"https://api.github.com/repos/trueadm/reactjs.org/statuses/{sha}","languages_url":"https://api.github.com/repos/trueadm/reactjs.org/languages","stargazers_url":"https://api.github.com/repos/trueadm/reactjs.org/stargazers","contributors_url":"https://api.github.com/repos/trueadm/reactjs.org/contributors","subscribers_url":"https://api.github.com/repos/trueadm/reactjs.org/subscribers","subscription_url":"https://api.github.com/repos/trueadm/reactjs.org/subscription","commits_url":"https://api.github.com/repos/trueadm/reactjs.org/commits{/sha}","git_commits_url":"https://api.github.com/repos/trueadm/reactjs.org/git/commits{/sha}","comments_url":"https://api.github.com/repos/trueadm/reactjs.org/comments{/number}","issue_comment_url":"https://api.github.com/repos/trueadm/reactjs.org/issues/comments{/number}","contents_url":"https://api.github.com/repos/trueadm/reactjs.org/contents/{+path}","compare_url":"https://api.github.com/repos/trueadm/reactjs.org/compare/{base}...{head}","merges_url":"https://api.github.com/repos/trueadm/reactjs.org/merges","archive_url":"https://api.github.com/repos/trueadm/reactjs.org/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/trueadm/reactjs.org/downloads","issues_url":"https://api.github.com/repos/trueadm/reactjs.org/issues{/number}","pulls_url":"https://api.github.com/repos/trueadm/reactjs.org/pulls{/number}","milestones_url":"https://api.github.com/repos/trueadm/reactjs.org/milestones{/number}","notifications_url":"https://api.github.com/repos/trueadm/reactjs.org/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/trueadm/reactjs.org/labels{/name}","releases_url":"https://api.github.com/repos/trueadm/reactjs.org/releases{/id}","deployments_url":"https://api.github.com/repos/trueadm/reactjs.org/deployments","created_at":"2017-10-19T12:54:13Z","updated_at":"2017-10-19T12:54:16Z","pushed_at":"2018-02-22T16:12:01Z","git_url":"git://github.com/trueadm/reactjs.org.git","ssh_url":"git@github.com:trueadm/reactjs.org.git","clone_url":"https://github.com/trueadm/reactjs.org.git","svn_url":"https://github.com/trueadm/reactjs.org","homepage":"https://reactjs.org/","size":65808,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":0,"license":null,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"reactjs:master","ref":"master","sha":"67402932f6552b42900e03a46c354f551608f7a6","user":{"login":"reactjs","id":6412038,"avatar_url":"https://avatars3.githubusercontent.com/u/6412038?v=4","gravatar_id":"","url":"https://api.github.com/users/reactjs","html_url":"https://github.com/reactjs","followers_url":"https://api.github.com/users/reactjs/followers","following_url":"https://api.github.com/users/reactjs/following{/other_user}","gists_url":"https://api.github.com/users/reactjs/gists{/gist_id}","starred_url":"https://api.github.com/users/reactjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/reactjs/subscriptions","organizations_url":"https://api.github.com/users/reactjs/orgs","repos_url":"https://api.github.com/users/reactjs/repos","events_url":"https://api.github.com/users/reactjs/events{/privacy}","received_events_url":"https://api.github.com/users/reactjs/received_events","type":"Organization","site_admin":false},"repo":{"id":105963253,"name":"reactjs.org","full_name":"reactjs/reactjs.org","owner":{"login":"reactjs","id":6412038,"avatar_url":"https://avatars3.githubusercontent.com/u/6412038?v=4","gravatar_id":"","url":"https://api.github.com/users/reactjs","html_url":"https://github.com/reactjs","followers_url":"https://api.github.com/users/reactjs/followers","following_url":"https://api.github.com/users/reactjs/following{/other_user}","gists_url":"https://api.github.com/users/reactjs/gists{/gist_id}","starred_url":"https://api.github.com/users/reactjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/reactjs/subscriptions","organizations_url":"https://api.github.com/users/reactjs/orgs","repos_url":"https://api.github.com/users/reactjs/repos","events_url":"https://api.github.com/users/reactjs/events{/privacy}","received_events_url":"https://api.github.com/users/reactjs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/reactjs/reactjs.org","description":"The React documentation website","fork":false,"url":"https://api.github.com/repos/reactjs/reactjs.org","forks_url":"https://api.github.com/repos/reactjs/reactjs.org/forks","keys_url":"https://api.github.com/repos/reactjs/reactjs.org/keys{/key_id}","collaborators_url":"https://api.github.com/repos/reactjs/reactjs.org/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/reactjs/reactjs.org/teams","hooks_url":"https://api.github.com/repos/reactjs/reactjs.org/hooks","issue_events_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/events{/number}","events_url":"https://api.github.com/repos/reactjs/reactjs.org/events","assignees_url":"https://api.github.com/repos/reactjs/reactjs.org/assignees{/user}","branches_url":"https://api.github.com/repos/reactjs/reactjs.org/branches{/branch}","tags_url":"https://api.github.com/repos/reactjs/reactjs.org/tags","blobs_url":"https://api.github.com/repos/reactjs/reactjs.org/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/reactjs/reactjs.org/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/reactjs/reactjs.org/git/refs{/sha}","trees_url":"https://api.github.com/repos/reactjs/reactjs.org/git/trees{/sha}","statuses_url":"https://api.github.com/repos/reactjs/reactjs.org/statuses/{sha}","languages_url":"https://api.github.com/repos/reactjs/reactjs.org/languages","stargazers_url":"https://api.github.com/repos/reactjs/reactjs.org/stargazers","contributors_url":"https://api.github.com/repos/reactjs/reactjs.org/contributors","subscribers_url":"https://api.github.com/repos/reactjs/reactjs.org/subscribers","subscription_url":"https://api.github.com/repos/reactjs/reactjs.org/subscription","commits_url":"https://api.github.com/repos/reactjs/reactjs.org/commits{/sha}","git_commits_url":"https://api.github.com/repos/reactjs/reactjs.org/git/commits{/sha}","comments_url":"https://api.github.com/repos/reactjs/reactjs.org/comments{/number}","issue_comment_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/comments{/number}","contents_url":"https://api.github.com/repos/reactjs/reactjs.org/contents/{+path}","compare_url":"https://api.github.com/repos/reactjs/reactjs.org/compare/{base}...{head}","merges_url":"https://api.github.com/repos/reactjs/reactjs.org/merges","archive_url":"https://api.github.com/repos/reactjs/reactjs.org/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/reactjs/reactjs.org/downloads","issues_url":"https://api.github.com/repos/reactjs/reactjs.org/issues{/number}","pulls_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls{/number}","milestones_url":"https://api.github.com/repos/reactjs/reactjs.org/milestones{/number}","notifications_url":"https://api.github.com/repos/reactjs/reactjs.org/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/reactjs/reactjs.org/labels{/name}","releases_url":"https://api.github.com/repos/reactjs/reactjs.org/releases{/id}","deployments_url":"https://api.github.com/repos/reactjs/reactjs.org/deployments","created_at":"2017-10-06T03:16:04Z","updated_at":"2018-02-22T14:21:23Z","pushed_at":"2018-02-22T16:13:08Z","git_url":"git://github.com/reactjs/reactjs.org.git","ssh_url":"git@github.com:reactjs/reactjs.org.git","clone_url":"https://github.com/reactjs/reactjs.org.git","svn_url":"https://github.com/reactjs/reactjs.org","homepage":"https://reactjs.org/","size":65905,"stargazers_count":1188,"watchers_count":1188,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":757,"mirror_url":null,"archived":false,"open_issues_count":133,"license":{"key":"cc-by-4.0","name":"Creative Commons Attribution 4.0","spdx_id":"CC-BY-4.0","url":"https://api.github.com/licenses/cc-by-4.0"},"forks":757,"open_issues":133,"watchers":1188,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/637"},"html":{"href":"https://github.com/reactjs/reactjs.org/pull/637"},"issue":{"href":"https://api.github.com/repos/reactjs/reactjs.org/issues/637"},"comments":{"href":"https://api.github.com/repos/reactjs/reactjs.org/issues/637/comments"},"review_comments":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/637/comments"},"review_comment":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/637/commits"},"statuses":{"href":"https://api.github.com/repos/reactjs/reactjs.org/statuses/c09a2849977ae341c830843ffbc2b5d7bcfeaa98"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"bvaughn"}}