Performance when rendering many components

[mattikl]

I'm rendering a list that contains Toggle and TextInput components. When this list gets long, the initial render is super slow. Also the subsequent renders of the list are slow, but I can solve this problem in application code by wrapping the Belle components and implementing shouldComponentUpdate.

I did some profiling and noticed that lots of CPU time gets consumed in functions injectStyles and removeStyle. It looks like the performance could be improved by refactoring how the style storage is used and styles updated. I'm thinking immutable data structures and batching the updates. But this is just guessing since I don't know the code well.

Is anyone working on this already? Any thoughts?

I also understand that the main objective in Belle is good UX and the performance optimizations shouldn't interfere with that. Optimal solution for the long list use case would be to use components that only implemented the needed functionality and focus on performance. But I've been happy using Belle so far, so thanks for the great work with it!

[nikgraf]

Hey @mattikl, thanks for your kind words & the feedback. Super valuable. Especially that you already did some profiling.

Yes, I'm working on a solution, but it will more be a complete restructuring of the architecture of Belle (using CSS Modules by default, but you can use anything class based). Here is what we came up so far: https://github.com/nikgraf/future-react-ui/ - I'm curious what you think about such a hard cut …

Right now I'm fixing a few bugs and upgrade Belle 2 to the lastest dependencies to do a final release for Belle 2 before focusing on Belle 3.

[mattikl]

Hi @nikgraf, that's all very interesting. I haven't seen enough real-life usage to really compare the different techniques, but that's sounds like a good approach for Belle 3.

So rather than trying to optimize Belle 2's ad hoc styling, I'll wait for Belle 3 development to start and hope to help you out with that.