Performance issues with ListView?

[henrikra]

I am doing simple weather app and I am using ListView to list forecast of the day. I am using local svg from my images folder to show right icon for specific weather. When I change contents of a list it will flash weirdly because svgs are not loaded yet. Here is example with gif http://giphy.com/gifs/3o7TKvo0bqXxy60Tdu As you can see from the gif it does not always make weird flash but like 50% of the time it does :/

Are svgs cached correctly or do you have something else in mind that could help with performance?

Do you think this is linked to this issue? https://github.com/react-native-community/react-native-svg/issues/52

[matc4]

Hi @henrikra, actually the lib is not caching SVG images, maybe we can do some that save the transformed SVG (The lib is reading the local file and transforming so react-native-svg can interpret), but, it is doing every time an svg is rendered, even if it has the same source

[henrikra]

@matc4 Cool to hear! Btw check my pull request and comment if you want me to change something :)

[maximalism2]

@henrikra, it's features of rendering in ListView. As you know, list view renders items by queue. And on your gif we can see that text is also flashing. In case if you would use png/jpg images as local resources or via https list items rendering will not change, it still will be flashing but a little faster.

[dantman]

@matc4 For starters how about simply making the component pure so that when the props and state are the same render is skipped.

[Crash--]

Not sure that purecomponent are way more optimized. I notice that in fact there is a lot of re-render if your parent re-render itself. With component you can easily add a shouldComponentUpdate to optimize it