Reacton

Common errors

• NameError: name 'Button' is not defined

  cause A component from `ipywidgets` (like `Button` or `VBox`) was used without being correctly imported, specifically not from `reacton.ipywidgets`.
  fix Import the wrapped ipywidgets components using `import reacton.ipywidgets as w` and refer to them with the alias, e.g., `w.Button`.

• RuntimeError: Widget constructor arguments do not match traits for widget type X

  cause The arguments provided to an `ipywidgets` constructor via Reacton (or a custom wrapper) do not align with the defined traitlets of that widget, or a new version of ipywidgets changed its API.
  fix Carefully review the constructor arguments for the specific widget (`X`) against the `ipywidgets` documentation. If using custom wrappers, verify the mapping from `reacton` arguments to `ipywidgets` traits. Update `ipywidgets` or `reacton` if there's a known incompatibility.

• UI updates are not reflected after modifying component data

  cause The component's data was modified directly instead of using Reacton's state management hooks, preventing Reacton from detecting changes and re-rendering the UI.
  fix Ensure all mutable data that affects the component's render output is managed using `reacton.use_state`. Updates must be performed via the `set_` function returned by `use_state` to trigger re-renders.

Warnings

• gotcha When integrating with existing `ipywidgets` or custom widgets, Reacton assumes that widget constructor arguments match their underlying traits. Discrepancies can lead to runtime errors.
  Fix: Ensure that arguments passed to widget constructors, especially when creating custom wrappers, precisely align with the widget's traitlets. If issues arise, consider opening an issue on the Reacton GitHub.
• gotcha Directly manipulating ipywidgets' elements via `ipywidgets.Widget.element(...)` bypasses Reacton's type-safe wrappers. This can lead to a less robust development experience, lacking type completion and static analysis.
  Fix: Prefer importing `reacton.ipywidgets as w` and using its wrapped components (e.g., `w.Button`) for better type safety, IDE support, and full integration with Reacton's lifecycle.
• gotcha Attempting to manage UI state or event handlers imperatively (outside of Reacton's `use_state`, `use_effect`, etc.) can lead to inconsistent UI behavior, memory leaks, and difficult-to-debug issues, similar to common pitfalls in non-declarative UI frameworks.
  Fix: Embrace Reacton's declarative paradigm by using `reacton.use_state` for local component state and other Reacton hooks for side effects and lifecycle management. Avoid directly modifying widget properties or adding/removing event handlers manually once a component is rendered.

Install

• pip install reacton Install Reacton

Imports

• component

  import reacton
  @reacton.component

  Decorator for defining Reacton components.
• use_state

  import reacton
  clicks, set_clicks = reacton.use_state(0)

  Hook for managing local component state.
• w
  wrong:

  import ipywidgets as w

  correct:

  import reacton.ipywidgets as w

  While 'ipywidgets' can be imported directly, 'reacton.ipywidgets' provides type-safe, wrapped components with autocomplete for better development experience within Reacton.

Quickstart

This example creates a simple button component that updates its click count using Reacton's `use_state` hook and a declarative approach to UI rendering within a Jupyter environment.

import reacton
import reacton.ipywidgets as w
from IPython.display import display

@reacton.component
def ButtonClick():
    clicks, set_clicks = reacton.use_state(0)

    def my_click_handler():
        set_clicks(clicks + 1)

    button = w.Button(
        description=f"Clicked {clicks} times",
        on_click=my_click_handler
    )
    return button

display(ButtonClick())