why use "with state" in a callback function invokes itself again?

[Roadelse]

Hi, I've been learning Trame and have encountered an issue that has been quite confusing for me lately.
Here is the simple demo:

from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import vuetify, html

server = get_server(client_type="vue2")
state, ctrl = server.state, server.controller

state["key1"] = 1

@state.change("vrg_idx")
def change_vrg_idx(vrg_idx, *args, **kwargs):
    with state:
        print(f"into change_vrg_idx, {vrg_idx=}")
        if vrg_idx == "r2":
            state["key1"] = 2
        else:
            state["key1"] = 1


with SinglePageWithDrawerLayout(server) as layout:
    with layout.toolbar:
        vuetify.VToolbarTitle("js-vuetify test")

    with layout.content:
        with vuetify.VContainer(fluid=True, classes="pa-4"):
            with vuetify.VRadioGroup(classes="pt-2 ma-0", dense=True, v_model=("vrg_idx", "r1"), style="width: 100%;"):
                with vuetify.VRow(classes="pt-2", dense=True):
                    with vuetify.VCol(classes="d-flex justify-center align-center", cols="6"):
                        vuetify.VRadio(label="radio1", value="r1")
                    with vuetify.VCol(classes="d-flex justify-center align-center", cols="6"):
                        vuetify.VRadio(label="radio2", value="r2")


if __name__ == "__main__":
    server.start()

If i run the demo and change the radio, it will print the information twice. If I comment the "with state:", everytihing seems work fine
So, why does it happen? And, Where and when should I use the "with state:"

[jourdain]

The with state: is mainly mandatory when you are outside the main execution loop (i.e. thread, async task, jupyter cell...) or when you want to force a flush before the end of the execution.

In your case, since you are with-in a synchronous @state.change() method callback, the state will be flushed automatically at the end. No need to do it twice.

My guess is that the @state.change execute your function because vrg_idx is dirty, then within that method, the flush state happen (exit of with state) before the vrg_idx was removed from its dirty state.

Hope that helps,

Seb

[Roadelse]

really thank you!