Updated docs for next

releases/next/docs/performance.html

@@ -28,7 +28,14 @@ and so they are not interrupted by frame drops on the JavaScript thread.</p><p>S
 The scroll events are dispatched to the JS thread, but their receipt is not necessary for the scroll to occur.</p><h2><a class="anchor" name="common-sources-of-performance-problems"></a>Common sources of performance problems <a class="hash-link" href="docs/performance.html#common-sources-of-performance-problems">#</a></h2><h3><a class="anchor" name="running-in-development-mode-dev-true"></a>Running in development mode (<code>dev=true</code>) <a class="hash-link" href="docs/performance.html#running-in-development-mode-dev-true">#</a></h3><p>JavaScript thread performance suffers greatly when running in dev mode.
 This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in <a href="docs/running-on-device.html#building-your-app-for-production" target="_blank">release builds</a>.</p><h3><a class="anchor" name="using-console-log-statements"></a>Using <code>console.log</code> statements <a class="hash-link" href="docs/performance.html#using-console-log-statements">#</a></h3><p>When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread.
 This includes calls from debugging libraries such as <a href="https://github.com/evgenyrodionov/redux-logger" target="_blank">redux-logger</a>,
-so make sure to remove them before bundling.</p><h3><a class="anchor" name="listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists"></a><code>ListView</code> initial rendering is too slow or scroll performance is bad for large lists <a class="hash-link" href="docs/performance.html#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists">#</a></h3><p>Use the new <a href="docs/flatlist.html" target="_blank"><code>FlatList</code></a> or <a href="docs/sectionlist.html" target="_blank"><code>SectionList</code></a> component instead.
+so make sure to remove them before bundling.
+You can also use this <a href="https://babeljs.io/docs/plugins/transform-remove-console/" target="_blank">babel plugin</a> that removes all the <code>console.*</code> calls. You need to install it first with <code>npm i babel-plugin-transform-remove-console --save</code>, and then edit the <code>.babelrc</code> file under your project directory like this:</p><div class="prism language-javascript"><span class="token punctuation">{</span>
+  <span class="token string">&quot;env&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
+    <span class="token string">&quot;production&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
+      <span class="token string">&quot;plugins&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&quot;transform-remove-console&quot;</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></div><p>This will automatically remove all <code>console.*</code> calls in the release (production) versions of your project.</p><h3><a class="anchor" name="listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists"></a><code>ListView</code> initial rendering is too slow or scroll performance is bad for large lists <a class="hash-link" href="docs/performance.html#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists">#</a></h3><p>Use the new <a href="docs/flatlist.html" target="_blank"><code>FlatList</code></a> or <a href="docs/sectionlist.html" target="_blank"><code>SectionList</code></a> component instead.
 Besides simplifying the API, the new list components also have significant performance enhancements,
 the main one being nearly constant memory usage for any number of rows.</p><h3><a class="anchor" name="js-fps-plunges-when-re-rendering-a-view-that-hardly-changes"></a>JS FPS plunges when re-rendering a view that hardly changes <a class="hash-link" href="docs/performance.html#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes">#</a></h3><p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.</p><p>Similarly, you can implement <code>shouldComponentUpdate</code> and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureRenderMixin to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.</p><h3><a class="anchor" name="dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time"></a>Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time <a class="hash-link" href="docs/performance.html#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time">#</a></h3><p>&quot;Slow Navigator transitions&quot; is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation.</p><p>The Animated api currently calculates each keyframe on-demand on the JavaScript thread, while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops.</p><p>One case where I have used this is for animating in a modal (sliding down from top and fading in a translucent overlay) while initializing and perhaps receiving responses for several network requests, rendering the contents of the modal, and updating the view where the modal was opened from. See the Animations guide for more information about how to use LayoutAnimation.</p><p>Caveats:</p><ul><li>LayoutAnimation only works for fire-and-forget animations (&quot;static&quot; animations) -- if it must be be interruptible, you will need to use <code>Animated</code>.</li></ul><h3><a class="anchor" name="moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps"></a>Moving a view on the screen (scrolling, translating, rotating) drops UI thread FPS <a class="hash-link" href="docs/performance.html#moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps">#</a></h3><p>This is especially true when you have text with a transparent background positioned on top of an image,
 or any other situation where alpha compositing would be required to re-draw the view on each frame.