Why the slow screen redraw under certain circumstances in React Native

Question

Usually simple ListView rows are rendered nearly instantly. Sometimes, however, the rendering goes slowly, to a point where you can see the screen being drawn. What causes this?

I first noticed it in an app I'm building to try out React Native, but was also able to reliably reproduce in the react-native repository Movies example. To reproduce:

• Open the Movies example project and run in the iOS simulator
• Search for a common word (e.g. "fast")
• Delete one character a time.
• Notice that once the data is fetched, the screen updates instantly.
• Now search for a nonsense word (e.g. "asdf")
• Delete one character at a time.
• Notice how a few times the rows of the search result list appear almost one-at-a-time. It's quite visibly slow compared to the instant redraw of the first query.

You should see something like this:

I noticed that, from react's perspective, the ListView is finished rendering before it's fully visible on the screen. I found this out by passing a callback to the setState call that causes ListView to re-render. The call back logs a message to the console, and the message appears slightly before the full screen is painted.

I would very much like to know if others have observed this and if it's avoidable. It's happening quite often in my app and makes the live-search feel pretty slow.

Answer 1

Have you tried adding 'initialListSize' on the ListView? I found adding it improved performance quite a lot, if you know the minimum list size beforehand.

Edit - from the docs:

Rate-limited row rendering - By default, only one row is rendered per event-loop (customizable with the pageSize prop). This breaks up the work into smaller chunks to reduce the chance of dropping frames while rendering rows.

Try adding pageSize={10} for example to the ListView