Dynamic Event Handler Registration and Cleanup

[SebasTheFish]

I am developing a python shiny core application that dynamically renders components that each require their own module server functions. The problem arises when the components are unloaded from the screen, the UI updates, but the module server functions are still loaded and cause some reused IDs to have multiple event handler registered. The r-shiny implementation supports destroying observers, is there a python shiny equivalent to this? (Below is a snippet that produces the offending operation)

from shiny import ui, module, reactive, Inputs, Outputs, Session, render

from .msgCard import msgCardUi, msgCardServer

@module.ui
def sendPageUi():
    return ui.output_ui(id="card_set"),

@module.server
def sendPageServer(input: Inputs, output: Outputs, session: Session, msgs, updateHandler):

    @render.ui
    def card_set():
        u = []
    
        for id, msg in msgs().items():
            u.append(msgCardUi(id, msg=msg))
    
        return (
            ui.layout_columns(
                *u,
                col_widths={ "xs": (12), "sm": (12), "md": (6), "lg": (4), "lg": (3) })
        )

    @reactive.effect
    def card_server_setup():
        for id, msg in msgs().items():
            msgCardServer(id, msg, updateHandler)

[SebasTheFish]

I resolved this by manually keeping track of dynamically allocated effects and invoking their destroy methods from the parent generator class.

[calderonsamuel]

Hi, can you show how that looks in code? 🙏

[SebasTheFish]

The component server function has to return a reference to the decorated event handler functions as such:

@module.server
def msgCardServer(input: Inputs, output: Outputs, session: Session, msgState, updateMsg):
    id = int(session.ns.split("-")[1])
    
    msg = deepcopy(msgState)

    @reactive.effect
    @reactive.event(input.msg_delete_button, ignore_init=True, ignore_none=True)
    def msgDeleteHandler():
        updateMsg(None, id)

    return [msgDeleteHandler]

Then, the generator function has to call destroy on the returned event handlers to prevent them from firing unintentionally and (hopefully) have their resource GC'ed, as such:

    # Store effects to destroy on prop change
    effects = []

    @reactive.effect()
    def card_server_setup():
        # Access the effects list
        nonlocal effects

        # Clean up old event handlers
        for effect in effects:
            effect.destroy()
        effects.clear()
    
        # Create new event handlers
        for idx, msg in enumerate(msgs()):
            effects += msgCardServer(str(idx), msg, updateHandler)

(I'm sure there is a better way to keep track of the event handlers, but this is just my initial implementation)

[calderonsamuel]

Thanks for the snippet. Nice work! I wonder if in this scenario is better to create a custom input/output. Here is a nice walktrough for R: https://book.javascript-for-r.com/shiny-output. And here the official one for Python: https://shiny.posit.co/py/docs/custom-component-one-off.html