Propagate and update of a reactive variable *up* a herarchy of components

[JovanVeljanoski]

Hi,

I read in the docs that you can use the create_context and use_context methods to propagate data/changes down a hierarchy of components.

I am looking to do the opposite: I would like to update a reactive variable somewhere at the bottom of the component hierarchy, and have that propagated to the top. Some usecase would be something like..

import solara

from my_module import MyComponent, MyOtherComponent


@solara.component
def Page():

    app_data = solara.use_reactive(initial_app_data)

    with solara.Column(margin=11):
        with solara.lab.Tabs():
            with solara.lab.Tab("Tab-1"):
                MyComponent(app_data=app_data)
            with solara.lab.Tab("Tab-2"):
                MyOtherComponent(app_data=app_data)

So what I am trying to accomplish is to update the app_data from inside the MyComponent components, and to propagate that change to other tabs etc..

I also tried this version:

import solara

from my_module import MyComponent, MyOtherComponent


@solara.component
def Page():

    def app_data_change_callback(app_data):
        print('data updated...')
        app_data.set(app_data.value)

    app_data = solara.use_reactive(initial_app_data)

    with solara.Column(margin=11):
        with solara.lab.Tabs():
            with solara.lab.Tab("Tab-1"):
                MyComponent(app_data=app_data, callback=app_data_change_callback)
            with solara.lab.Tab("Tab-2"):
                MyOtherComponent(app_data=app_data, callback=app_data_change_callback)

Both cases work but the change of app_data is contained only within e.g. MyComponent and not outside of it. I also tried to use set_context/use_context, but that seems to only work down a component hierarchy, not up.

Alternatively, is there a way to have something like a.. "global state", something that like what streamlit does with "session_state"?

My apologies if this is already explained somewhere - i really tried going over the docs and use LLMs to get ideas, but could not figure it out at the end. I would (personally) find it a key feature for larger apps.

The advanced version of this would be.. to be able to pass data/state/reactive variables back and forth between pages of multi-page apps..but that can be a separate issue/discussion.

Cheers.

[maartenbreddels]

Hi Jovan,

in the quickstart we use some top level reactive variables. That's a pattern I prefer for apps, instead of local use_reactive. https://solara.dev/documentation/getting_started

What we are now leaning towards, is to create class, which has reactive variables, and have methods operator on that, similar to: https://py.cafe/maartenbreddels/solara-conditional-form

Does that help, or does that seem applicable to your situation?

cheers,

Maarten

[JovanVeljanoski]

Hi,

Thanks for the examples. The getting started was not helpful for my case, but the conditional form i think shows what I need very nice. I quickly modified it in pycafe to see if it is likely to work for my case and it looks like it does! Thanks.

Can you however briefly explain why my attempt did not work - I modified your example in pycafe to illustrate my (naive) approach: https://py.cafe/b7yuvghp7/conditional-form

(ignore the breaking of the conditional link between continents and countries, the point to propagate the changes across components)