Why is my app slow when rendering a lot of elements?

[gwenoleR]

Hi !

First of all, this library is so helpful, I working on a multi platform app (iOS, Android, Web) and my DX is very good, thanks a lot !

Unfortunately I have some performances issues on Web, but I'm not sure if it's because RNW or React in general.

Here some context.

We can see my app like a catalogue. The window is divide in two parts : Filters and Results
I do some maths, and on the Filters part i have something like 600 mounted Views. On the Results its depend, but its approximately 10 views by result, and performance start to be very bad when I have more than 20 or 30 results.

So when I have approximately (with the addition of some elements like header, title, etc..) 1000 mounted views I have like a drop of fps (i'm not sure is that, I more a Mobile Dev than Web dev so i don't know how to monitor).

I tried to optimize using React.memo when I can, limit at maximum the number of view, avoid anonymous function on ListView item, etc but it still so slooow

Has anyone come across this problem before ?

Thanks 😊

EDIT: FYI, when I say it's slow, it's visible when i type text on texfield, the text only appear after few milliseconds, or sometimes after few seconds !

[intergalacticspacehighway]

@gwenoleR Can you turn on Highlight updates in react dev tools and see what gets rerendered when you start typing?
I think this could give some insights.

[gwenoleR]

Ooh thanks !
You're right it's helping ! Each Result seems to be rerenred each time I typing ! So I understand why it is so slow !

[intergalacticspacehighway]

Awesome. Let us know the root cause or a solution you apply to fix it. Could be something interesting 😄

[gwenoleR]

I'm not sure why, but in this case, even if the onFavResult was not a anonymous function it's recreate each time a state change on the page...
So I put the onFavResult in an useCallback hook to avoid the recreate

<ResultList
    data={results || []}
    theme={theme}
    onFavResult={onFavResult}
/>

But now everything works perfectly and it's soooo fast !
Thanks for the advice, because this tool is so powerful !

[intergalacticspacehighway]

Great, happy to help 😄
Yeah, If you define a function in a functional component, it'll always be recreated on each render.

[gwenoleR]

Oh this is why ! I missed this on the documentation, it's make sense now.
Thanks !

[theankurkedia]

@gwenoleR In addition to this, you can also debounce your function calls. It can help prevent excess function calls.