{"action":"created","comment":{"url":"https://api.github.com/repos/facebook/react/pulls/comments/83973539","pull_request_review_id":4781867,"id":83973539,"diff_hunk":"@@ -0,0 +1,147 @@\n+---\n+id: reconciliation\n+title: Reconciliation\n+permalink: docs/reconciliation.html\n+---\n+\n+React provides a declarative API so that you don't have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented within React. This article explains the choices we made in React's \"diffing\" algorithm so that component updates are predictable while being fast enough for high-performance apps.\n+\n+## Motivation\n+\n+When you use React, at a single point in time you can think of the `render()` function as creating a tree of React elements. On the next state or props update, that `render()` function will return a different tree of React elements. React then needs to figure out a way to efficiently convert the first tree into the second tree.\n+\n+There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n<sup>3</sup>) where n is the number of elements in the tree.\n+\n+If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:\n+\n+1. Two elements of different types can be treated as totally different trees.\n+2. The developer can hint at which child elements may be stable across different renders with a `key` prop.\n+\n+In practice, these assumptions are valid for almost all practical use cases.\n+\n+## The Diffing Algorithm\n+\n+When diffing two trees, React first compares the the two root elements. The behavior is different depending on the types of the root elements.\n+\n+### Elements Of Different Types\n+\n+Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch.\n+\n+When tearing down a tree, old DOM elements are destroyed. Component instances receive `componentWillUnmount()`. When building up a new tree, new DOM elements are inserted into the DOM. Component instances receive `componentWillMount()` and then `componentDidMount()`. Any state associated with the old tree is lost.\n+\n+Any componts below the root will also get unmounted and have their state destroyed. For example, when diffing:\n+\n+```xml\n+<div>\n+  <Counter />\n+</div>\n+\n+<span>\n+  <Counter />\n+</span>\n+```\n+\n+This will destroy the old `Counter` and remount a new one.\n+\n+### DOM Elements Of The Same Type\n+\n+When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM element, and only updates the changed attributes. For example:\n+\n+```xml\n+<div className=\"before\" title=\"stuff\" />\n+\n+<div className=\"after\" title=\"stuff\" />\n+```\n+\n+When converting between these two elements, React knows to only modify the `className`.","path":"docs/docs/reconciliation.md","position":56,"original_position":56,"commit_id":"c73c5bdcf95e8d4770c164b20a3430b16fa5a216","original_commit_id":"e8ef077ea9f8b4eae253c276e89160416522778b","user":{"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},"body":"OK","created_at":"2016-10-18T23:39:34Z","updated_at":"2016-10-18T23:39:34Z","html_url":"https://github.com/facebook/react/pull/7962#discussion_r83973539","pull_request_url":"https://api.github.com/repos/facebook/react/pulls/7962","_links":{"self":{"href":"https://api.github.com/repos/facebook/react/pulls/comments/83973539"},"html":{"href":"https://github.com/facebook/react/pull/7962#discussion_r83973539"},"pull_request":{"href":"https://api.github.com/repos/facebook/react/pulls/7962"}}},"pull_request":{"url":"https://api.github.com/repos/facebook/react/pulls/7962","id":89105099,"html_url":"https://github.com/facebook/react/pull/7962","diff_url":"https://github.com/facebook/react/pull/7962.diff","patch_url":"https://github.com/facebook/react/pull/7962.patch","issue_url":"https://api.github.com/repos/facebook/react/issues/7962","number":7962,"state":"open","locked":false,"title":"[New Docs] Reconciliation and Web Components docs","user":{"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},"body":"These are pretty advanced content. I just had some minor updates. But if folks have deeper feedback on these docs I'm happy to deal with that as well.\r\n\r\n* Put them in \"Guides\" because they are more guide-y than referencey\r\n* Cleaned up the reconciliation tone to be more humble as requested by @spicyj\r\n* Misc english-language cleanup","created_at":"2016-10-12T22:23:06Z","updated_at":"2016-10-18T23:39:34Z","closed_at":null,"merged_at":null,"merge_commit_sha":"67ef175879dbbd7f3ddb89e88f66219ffa4143a8","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/facebook/react/pulls/7962/commits","review_comments_url":"https://api.github.com/repos/facebook/react/pulls/7962/comments","review_comment_url":"https://api.github.com/repos/facebook/react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/facebook/react/issues/7962/comments","statuses_url":"https://api.github.com/repos/facebook/react/statuses/c73c5bdcf95e8d4770c164b20a3430b16fa5a216","head":{"label":"lacker:porting","ref":"porting","sha":"c73c5bdcf95e8d4770c164b20a3430b16fa5a216","user":{"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},"repo":{"id":69898753,"name":"react","full_name":"lacker/react","owner":{"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},"private":false,"html_url":"https://github.com/lacker/react","description":"A declarative, efficient, and flexible JavaScript library for building user interfaces.","fork":true,"url":"https://api.github.com/repos/lacker/react","forks_url":"https://api.github.com/repos/lacker/react/forks","keys_url":"https://api.github.com/repos/lacker/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/lacker/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/lacker/react/teams","hooks_url":"https://api.github.com/repos/lacker/react/hooks","issue_events_url":"https://api.github.com/repos/lacker/react/issues/events{/number}","events_url":"https://api.github.com/repos/lacker/react/events","assignees_url":"https://api.github.com/repos/lacker/react/assignees{/user}","branches_url":"https://api.github.com/repos/lacker/react/branches{/branch}","tags_url":"https://api.github.com/repos/lacker/react/tags","blobs_url":"https://api.github.com/repos/lacker/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/lacker/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/lacker/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/lacker/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/lacker/react/statuses/{sha}","languages_url":"https://api.github.com/repos/lacker/react/languages","stargazers_url":"https://api.github.com/repos/lacker/react/stargazers","contributors_url":"https://api.github.com/repos/lacker/react/contributors","subscribers_url":"https://api.github.com/repos/lacker/react/subscribers","subscription_url":"https://api.github.com/repos/lacker/react/subscription","commits_url":"https://api.github.com/repos/lacker/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/lacker/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/lacker/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/lacker/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/lacker/react/contents/{+path}","compare_url":"https://api.github.com/repos/lacker/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/lacker/react/merges","archive_url":"https://api.github.com/repos/lacker/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/lacker/react/downloads","issues_url":"https://api.github.com/repos/lacker/react/issues{/number}","pulls_url":"https://api.github.com/repos/lacker/react/pulls{/number}","milestones_url":"https://api.github.com/repos/lacker/react/milestones{/number}","notifications_url":"https://api.github.com/repos/lacker/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/lacker/react/labels{/name}","releases_url":"https://api.github.com/repos/lacker/react/releases{/id}","deployments_url":"https://api.github.com/repos/lacker/react/deployments","created_at":"2016-10-03T18:29:56Z","updated_at":"2016-10-03T18:30:02Z","pushed_at":"2016-10-18T23:26:47Z","git_url":"git://github.com/lacker/react.git","ssh_url":"git@github.com:lacker/react.git","clone_url":"https://github.com/lacker/react.git","svn_url":"https://github.com/lacker/react","homepage":"https://facebook.github.io/react/","size":103401,"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:new-docs","ref":"new-docs","sha":"89fbf080ebef74b5ac4fc4236a1c64fc85f4aed4","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-10-18T23:36:28Z","pushed_at":"2016-10-18T23:32:14Z","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":141379,"stargazers_count":51955,"watchers_count":51955,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":9086,"mirror_url":null,"open_issues_count":712,"forks":9086,"open_issues":712,"watchers":51955,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/facebook/react/pulls/7962"},"html":{"href":"https://github.com/facebook/react/pull/7962"},"issue":{"href":"https://api.github.com/repos/facebook/react/issues/7962"},"comments":{"href":"https://api.github.com/repos/facebook/react/issues/7962/comments"},"review_comments":{"href":"https://api.github.com/repos/facebook/react/pulls/7962/comments"},"review_comment":{"href":"https://api.github.com/repos/facebook/react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/facebook/react/pulls/7962/commits"},"statuses":{"href":"https://api.github.com/repos/facebook/react/statuses/c73c5bdcf95e8d4770c164b20a3430b16fa5a216"}}}}
{"actor":{"display_login":"lacker"}}