Solara•3mo ago

Efficiently rendering a list of components

Hey! I think i might be doing something in a non-solara way, since my app is having trouble re-rendering some compoents. I have a 'logbook' component that displays a list of entries in a loop, something like this:

@solara.component
def LogbookRender(logbook: Logbook):
    appending, set_appending = solara.use_state(False) # Are we appending a new entry?

    with solara.Card():
        for entry in logbook:
            EntryRender(entry) 
        
        if appending:
            EntryRender(logbook.new_entry(), on_save=lambda: set_appending(False))
        else:
            solara.Button('Add Entry', on_click=lambda: set_appending(True))

@solara.component
def LogbookRender(logbook: Logbook):
    appending, set_appending = solara.use_state(False) # Are we appending a new entry?

    with solara.Card():
        for entry in logbook:
            EntryRender(entry) 
        
        if appending:
            EntryRender(logbook.new_entry(), on_save=lambda: set_appending(False))
        else:
            solara.Button('Add Entry', on_click=lambda: set_appending(True))

The issue is that every time the user adds an entry to the list all of the previous entries are re-rendered, and this can take quite awhile for a long logbook. Is there a way to let solara know not to rerender all of the previous entries and just append the new one at the bottom of the container? I feel i might be doing something wrong but don't know what 😅 Cheers and thanks!

6 Replies

MaartenBreddels•3mo ago

Yeah, if you give an element a unique key, using .key(f'some-prefix-{entry.id}') is should be smarter

pnjunOP•3mo ago

Cool! Is there some documentation on the .key() method? Do i just call it on the component after i create it like this?

EntryRender(entry).key(f'some-prefix-{entry.id}')

EntryRender(entry).key(f'some-prefix-{entry.id}')

thanks a lot! I tried this and it does not seem to be any faster, everything is re-rendered anyway

MaartenBreddels•3mo ago

can you make a pycafe snippet that show this? This should work as advertised, if not, maybe something else is going on

pnjunOP•3mo ago

i will try to make something reproducible!

pnjunOP•3mo ago

Hey! I got a snippet working. The problem is in the fact that my logbook class returns a new entry object every time you iterate over it, even if the contents are the same. I In hindsight, it is obvious that the automatic caching is not working, since i call the components with a different object as argument. I am thinking if i can change the structure of my logbook class to deal with this, but i do not know it that is possible. The solution with the .key call sounds like the perfect approach, but adding the .key call as you suggest does not do anthtying, the caching still does not work. You can try my snipped with and without the .key call and the result is always the same, the components are always re-rendered even if they have the same key. Here is the snippet: https://app.py.cafe/snippet/solara/v1#c=H4sIAFrcDGcAA41UXU_bMBT9K5Z5IJVCWvoBIxLaBmPapO2Fh-2BoMqNbxKrjp3ZLiWq-t93nY9SUFFJX-x7r8-559i3G5pqDjSmJyQtIF0SvXKkcK6y8XBotWSGRRyehiTThnCdrkpQjjmhVaJOCMb62ly4YrWIUl0O14Ln4Jzozg995VfFDxBUdZSyDIYlY8aBWhjgHKRtyEptgMAzKysJNlGirLRxpIVMkD2VzFpyp5ypg0GcKIIfh4zM50IJN58HFmQWEgfPrk_7z0cjHyTXTe4N1E8Hhi0kvAbEYAe4D-W7BCIUMUzlEEz2c_6rBUjedWidCWAw8GxfOlvRqkortDNRnuabsJVkdVuOUVP3eJURygXZqQEsxHVONk1-e4p4vmCN3nfORLfM8J0fjeA2_puZJddr1UI3Dnygm1_CuuaEANuDOp3nEkJ00s3bNVrZoawszC2-Dwi-M2lhQPDm8RrXQFhVYfu-eUYUrEnTxucWcV9mQu93MiWyJ7Rpc-e3P-Y975raE3rAwGgJ3fJF8J4nNyvntAokW4C8zjxza3FCQ6LVPJUiXV5LVi44i_fkBkq7zoX2RiuWew_2PXv1mAJf5otoSA38WwkDfowsjl3_njHj6soPYhvBPTr2R8Caxpm3MqTAhbtTHo_GzqwwUtWu0ArPVLXmgsPZ0ygaz6JzPIx94KDReEOfwFgcVxqPkVxrd68RctOzGdyFNC2E5Kidxg-7jGMLlIxJHGdX0Ph8NgppKdTfdjtpdz9A5AXy-K3geCwTEm4Q1YK51fhXIRSYdxh86dmircWSinlcSreP2_BAFx3R-WgWjcaTq_FkOp1eXV6MPr3b_gsmWhlV9WvkVnkPezWNPNjlxWw2a-CPmHLciE7YMRN6_YdVF73qy9lHOPG9YZjJY6R9nWf1v23YXAY-yIfH7X-KXjAkEwYAAA

PyCafe

Playground for Python web frameworks. Run and edit Python code snippets for web frameworks in a web browser.

pnjunOP•3mo ago

Thanks a lot!

Gaming

Programming

Efficiently rendering a list of components