rio icon indicating copy to clipboard operation
rio copied to clipboard

Consider automatically refreshing after state changes

Open Aran-Fey opened this issue 1 year ago • 2 comments

Currently, the GUI is only updated after an event handler returns or when force_refresh() is called. It would arguably be more intuitive if state changes automatically triggered a refresh (say with a delay of 100ms or so).

One potential problem with this is that a component might be rebuilt while it's in an inconsistent state. However, that can only happen if the user's code has an await statement in the middle.

Aran-Fey avatar Dec 07 '24 19:12 Aran-Fey

The documentation now says the a component refresh happens when its state changes; that's fine.

Whether I know what I am doing is questionable; but the issue I am running into is that the state of the parent component controls the appearance of a child component by passing state variables as parameters to the child component.....the thing is that a change in state variable triggers the parent component refresh but it does not trigger the child's even though the state variable that changed is one of those that are passed to the child component. Was this clear?

Question: Can a parent component force a refresh of a child component?

gsal avatar Apr 07 '25 02:04 gsal

Yes, by changing the child's key. That basically tells rio "Hey, this isn't the same component as before", so the old child will be removed and replaced with a new one.

Quick example:

class Parent(rio.Component):
    table_data: list[list[str]] = []
    child_key: int = 0
    
    def add_row(self):
        self.table_data.append([f'row {len(self.table_data)+1}'])
        self.child_key += 1
    
    def build(self) -> rio.Component:
        return rio.Column(
            rio.Table(
                self.table_data,
                key=self.child_key,
            ),
            rio.Button(
                'add row',
                on_press=self.add_row,
            ),
        )

Aran-Fey avatar Apr 07 '25 06:04 Aran-Fey