{"parents":["130a164c8d4e601c4dde84f43b23385c1a285da2"],"files":[{"path":"docs\/_data\/nav_docs.yml","status":"M"},{"path":"docs\/docs\/10.8-perf.md","status":"M"},{"path":"docs\/docs\/11-advanced-performance.md","status":"A"},{"path":"docs\/img\/docs\/should-component-update.png","status":"A"}],"body":"","commit":{"revision":"ab512af57f69fbefddec5e3cc2adfa2f41563bb4","subject":"Advanced Performance Doc","authorName":"Christopher Chedeau","authoredAt":"2015-02-11T10:53:57-08:00","shortRevision":"ab512af57f","authorEmail":"vjeux@fb.com"},"patch":"diff --git a\/docs\/_data\/nav_docs.yml b\/docs\/_data\/nav_docs.yml\nindex fcde3e374f..beebf2d958 100644\n--- a\/docs\/_data\/nav_docs.yml\n+++ b\/docs\/_data\/nav_docs.yml\n@@ -65,6 +65,8 @@\n title: PureRenderMixin\n - id: perf\n title: Performance Tools\n+ - id: advanced-performance\n+ title: Advanced Performance\n - title: Reference\n items:\n - id: top-level-api\ndiff --git a\/docs\/docs\/10.8-perf.md b\/docs\/docs\/10.8-perf.md\nindex 0a460b2d93..33f257c2f6 100644\n--- a\/docs\/docs\/10.8-perf.md\n+++ b\/docs\/docs\/10.8-perf.md\n@@ -3,6 +3,7 @@ id: perf\n title: Performance Tools\n permalink: perf.html\n prev: pure-render-mixin.html\n+next: advanced-performance.html\n ---\n \n React is usually quite fast out of the box. However, in situations where you need to squeeze every ounce of performance out of your app, it provides a [shouldComponentUpdate](\/react\/docs\/component-specs.html#updating-shouldcomponentupdate) hook where you can add optimization hints to React's diff algorithm.\ndiff --git a\/docs\/docs\/11-advanced-performance.md b\/docs\/docs\/11-advanced-performance.md\nnew file mode 100644\nindex 0000000000..2d7751906f\n--- \/dev\/null\n+++ b\/docs\/docs\/11-advanced-performance.md\n@@ -0,0 +1,207 @@\n+---\n+id: advanced-performance\n+title: Advanced Performance\n+permalink: advanced-performance.html\n+prev: perf.html\n+---\n+\n+One of the first questions people ask when considering React for a project is whether their application will be as fast and responsive as an equivalent non-React version. The idea of re-rendering an entire subtree of components in response to every state change makes people wonder whether this process negatively impacts performance. React uses several clever techniques to minimize the number of costly DOM operations required to update the UI.\n+\n+## Avoiding reconciling the DOM\n+\n+React makes use of a *virtual DOM*, which is a descriptor of a DOM subtree rendered in the browser. This parallel representation allows React to avoid creating DOM nodes and accessing existing ones, which is slower than operations on JavaScript objects. When a component's props or state change, React decides whether an actual DOM update is necessary by constructing a new virtual DOM and comparing it to the old one. Only in the case they are not equal, will [React reconcile](http:\/\/facebook.github.io\/react\/docs\/reconciliation.html) the DOM, applying as few mutations as possible.\n+\n+On top of this, React provides a component lifecycle function, shouldComponentUpdate, which is triggered before the re-rendering process starts, giving the developer the ability to short circuit this process. The default implementation of this function returns true, leaving React to perform the update:\n+\n+```javascript\n+shouldComponentUpdate: function(nextProps, nextState) {\n+ return true;\n+}\n+```\n+\n+Keep in mind that React will invoke this function pretty often, so the implementation has to be fast.\n+\n+Say you have a messaging application with several chat threads. Suppose only one of the threads has changed. If we implement shouldComponentUpdate on the ChatThread component, React can skip the rendering step for the other threads:\n+\n+```javascript\n+shouldComponentUpdate: function(nextProps, nextState) {\n+ \/\/ TODO: return whether or not current chat thread is\n+ \/\/ different to former one.\n+}\n+```\n+\n+So, in summary, React avoids carrying out expensive DOM operations required to reconcile subtrees of the DOM by allowing the user to short circuit the process using shouldComponentUpdate, and, for those which should update, by comparing virtual DOMs.\n+\n+## shouldComponentUpdate in action\n+\n+Here's a subtree of components. For each one is indicated what shouldComponentUpdate returned and whether or not the virtual DOMs were equivalent. Finally, the circle's color indicates whether the component had to be reconciled or not.\n+\n+

dillon1000/react

Files changed