Effects and cleanup¶

Render describes the UI. An effect synchronizes it with something external: document metadata, timers, event listeners or another subscription.

from pyreact_forge import component, html, use_effect

@component
def App():
    def effect():
        from js import document
        original = document.title
        document.title = "My Python UI"

        def cleanup():
            document.title = original
        return cleanup

    use_effect(effect, [])
    return html.h1("Browser effect")

Dependency behavior¶

An effect must return None or a cleanup function. Returning a number from a logging expression or returning a coroutine is an error. Write an ordinary function, start an async task inside it if necessary, and cancel/ignore that task during cleanup.

use_layout_effect runs in React's layout-effect phase. Use it only when work must happen around layout before paint. use_insertion_effect is a lower-level adapter intended for style-insertion integrations.

use_effect_event reads current committed values from effect logic. Invoke it only from an effect or another effect event, not from a click handler or render. The alpha does not include a Python static checker for all Rules of Hooks.

For low-level manual JS listeners, Pyodide callback proxies need explicit lifetime management; effect cleanup should remove the listener and release its proxy. Prefer React DOM event props when they fit the interaction.