renderItem, Header, Footer, etc. functions depend on an
you know the height of items a priori. getItemLayout is the most efficient, and is easy to
use if you have fixed height items, for example:Remember to include separator length (height or width) in your offset calculation if you +)}
Adding getItemLayout can be a great performance boost for lists of several hundred items.
+Remember to include separator length (height or width) in your offset calculation if you
specify ItemSeparatorComponent.
If true, renders items next to each other horizontally instead of stacked vertically.
How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
Instead of starting at the top with the first item, start at initialScrollIndex. This
diff --git a/releases/next/docs/performance.html b/releases/next/docs/performance.html
index 2a00ffbce14..909935b3af4 100644
--- a/releases/next/docs/performance.html
+++ b/releases/next/docs/performance.html
@@ -37,7 +37,9 @@ You can also use this }
}
This will automatically remove all console.* calls in the release (production) versions of your project.
ListView initial rendering is too slow or scroll performance is bad for large lists #Use the new FlatList or SectionList 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.
If you are using a ListView, you must provide a rowHasChanged 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.
Similarly, you can implement shouldComponentUpdate 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.
"Slow Navigator transitions" 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.
The Animated API currently calculates each keyframe on-demand on the JavaScript thread unless you set useNativeDriver: true, while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops.
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.
Caveats:
Animated.This is especially true when you have text with a transparent background positioned on top of an image, +the main one being nearly constant memory usage for any number of rows.
If your FlatList is rendering slow, be sure that you've implemented
+getItemLayout to
+optimize rendering speed by skipping measurement of the rendered items.
If you are using a ListView, you must provide a rowHasChanged 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.
Similarly, you can implement shouldComponentUpdate 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.
"Slow Navigator transitions" 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.
The Animated API currently calculates each keyframe on-demand on the JavaScript thread unless you set useNativeDriver: true, while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops.
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.
Caveats:
Animated.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.
You will find that enabling shouldRasterizeIOS or renderToHardwareTextureAndroid can help with this significantly.
Be careful not to overuse this or your memory usage could go through the roof. Profile your performance and memory usage when using these props.