A compelling reason for using React Native instead of WebView-based tools is to achieve 60 FPS and a native look & feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary.
This guide is intended to teach you some basics to help you to troubleshoot performance issues, as well as discuss common sources of problems and their suggested solutions.
Your grandparents' generation called movies "moving pictures" for a reason: realistic motion in video is an illusion created by quickly changing static images at a consistent speed. We refer to each of these images as frames. The number of frames that is displayed each second has a direct impact on how smooth and ultimately life-like a video (or user interface) seems to be. iOS devices display 60 frames per second, which gives you and the UI system about 16.67ms to do all of the work needed to generate the static image (frame) that the user will see on the screen for that interval. If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.
Now to confuse the matter a little bit, open up the developer menu in
your app and toggle
Show Perf Monitor. You will notice that there are
two different frame rates.
For most React Native applications, your business logic will run on the
are made, touch events are processed, etc... Updates to native-backed
views are batched and sent over to the native side at the end of each iteration of the event loop, before the frame deadline (if
will be considered a dropped frame. For example, if you were to call
this.setState on the root component of a complex application and it
resulted in re-rendering computationally expensive component subtrees,
it's conceivable that this might take 200ms and result in 12 frames
This often happens during Navigator transitions: when you push a new
necessary for the scene in order to send over the proper commands to the
native side to create the backing views. It's common for the work being
done here to take a few frames and cause jank because the transition is
additional work on
componentDidMount, which might result in a second
stutter in the transition.
Many people have noticed that performance of
NavigatorIOS is better
out of the box than
Navigator. The reason for this is that the
animations for the transitions are done entirely on the main thread, and
(Read about why you should probably use Navigator
As mentioned above,
Navigator animations are controlled by the
frame, the new scene is moved from the right to left, starting offscreen
(let's say at an x-offset of 320) and ultimately settling when the scene sits
at an x-offset of 0. Each frame during this transition, the
update occurs on that frame and the animation stutters.
Unfortunately this solution is not yet implemented, and so in the
meantime we should use the InteractionManager to selectively render the
minimal amount of content necessary for the new scene as long as the
animation is in progress.
a callback as its only argument, and that callback is fired when the
navigator transition is complete (each animation from the
also notifies the InteractionManager, but that's beyond the scope of
Your scene component might look something like this:
You don't need to be limited to rendering some loading indicator, you could alternatively render part of your content -- for example, when you load the Facebook app you see a placeholder news feed item with grey rectangles where text will be. If you are rendering a Map in your new scene, you might want to display a grey placeholder view or a spinner until the transition is complete as this can actually cause frames to be dropped on the main thread.
This is an issue that comes up frequently because iOS ships with UITableView which gives you very good performance by re-using underlying UIViews. Work is in progress to do something similar with React Native, but until then we have some tools at our disposal to help us tweak the performance to suit our needs. It may not be possible to get all the way there, but a little bit of creativity and experimentation with these options can go a long way.
This prop specifies how many rows we want to render on our first render
pass. If we are concerned with getting something on screen as quickly
as possible, we could set the
initialListSize to 1, and we'll quickly
see other rows fill in on subsequent frames. The number of rows per
frame is determined by the
After the initial render where
initialListSize is used, ListView looks
pageSize to determine how many rows to render per frame. The
default here is 1 -- but if your views are very small and inexpensive to
render, you might want to bump this up. Tweak it and find what works for
your use case.
"How early to start rendering rows before they come on screen, in pixels."
If we had a list with 2000 items and rendered them all immediately that would be a poor use of both memory and computational resources. It would also probably cause some pretty awful jank. So the scrollRenderAhead distance allows us to specify how far beyond the current viewport we should continue to render rows.
"When true, offscreen child views (whose
overflow value is
are removed from their native backing superview when offscreen. This
can improve scrolling performance on long lists. The default value is
true."(The default value is
false before version 0.14-rc).
This is an extremely important optimization to apply on large ListViews.
On Android the
overflow value is always
hidden so you don't need to
worry about setting it, but on iOS you need to be sure to set
hidden on row containers.
It's common at first to overlook ListView, but using it properly is often key to achieving solid performance. As discussed above, it provides you with a set of tools that lets you split rendering of your view across various frames and tweak that behavior to fit your specific needs. Remember that ListView can be horizontal too.
If you are using a ListView, you must provide a
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
"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.
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: - LayoutAnimation only works for fire-and-forget animations ("static" animations) -- if it must be be interruptible, you will need to use 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
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. If you don't plan to move a view anymore, turn this property off.
On iOS, each time you adjust the width or height of an Image component
it is re-cropped and scaled from the original image. This can be very expensive,
especially for large images. Instead, use the
style property to animate the size. An example of when you might do this is
when you tap an image and zoom it in to full screen.
Sometimes, if we do an action in the same frame that we are adjusting
the opacity or highlight of a component that is responding to a touch,
we won't see that effect until after the
onPress function has returned.
onPress does a
setState that results in a lot of work and a few
frames dropped, this may occur. A solution to this is to wrap any action
inside of your
onPress handler in
For iOS, Instruments are an invaluable tool, and on Android you should learn to use systrace.
You can also use
react-addons-perf to get insights into where React is spending time when rendering your components.
You can edit the content above on GitHub and send us a pull request!