{"id":9272,"library":"reacton","title":"Reacton","description":"Reacton is a pure Python library that ports the declarative UI paradigm of React (JavaScript) to the ipywidgets ecosystem. It enables developers to build reusable and composable user interface components within Jupyter notebooks and web applications built with ipywidgets, by offering a declarative approach to state and UI management. It aims to simplify complex UI logic, reduce boilerplate, and enhance maintainability, serving as a foundation for frameworks like Solara. The current version is 1.9.1, with updates released on a feature-ready basis rather than a strict cadence.","status":"active","version":"1.9.1","language":"en","source_language":"en","source_url":"https://github.com/widgetti/reacton","tags":["ipywidgets","react","ui","declarative","jupyter","frontend","widgets"],"install":[{"cmd":"pip install reacton","lang":"bash","label":"Install Reacton"}],"dependencies":[{"reason":"Core dependency for UI rendering in Jupyter environments.","package":"ipywidgets","optional":false},{"reason":"Provides backported and experimental type hints.","package":"typing_extensions","optional":false}],"imports":[{"note":"Decorator for defining Reacton components.","symbol":"component","correct":"import reacton\n@reacton.component"},{"note":"Hook for managing local component state.","symbol":"use_state","correct":"import reacton\nclicks, set_clicks = reacton.use_state(0)"},{"note":"While 'ipywidgets' can be imported directly, 'reacton.ipywidgets' provides type-safe, wrapped components with autocomplete for better development experience within Reacton.","wrong":"import ipywidgets as w","symbol":"w","correct":"import reacton.ipywidgets as w"}],"quickstart":{"code":"import reacton\nimport reacton.ipywidgets as w\nfrom IPython.display import display\n\n@reacton.component\ndef ButtonClick():\n    clicks, set_clicks = reacton.use_state(0)\n\n    def my_click_handler():\n        set_clicks(clicks + 1)\n\n    button = w.Button(\n        description=f\"Clicked {clicks} times\",\n        on_click=my_click_handler\n    )\n    return button\n\ndisplay(ButtonClick())","lang":"python","description":"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."},"warnings":[{"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.","message":"When integrating with existing `ipywidgets` or custom widgets, Reacton assumes that widget constructor arguments match their underlying traits. Discrepancies can lead to runtime errors.","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-16T00:00:00.000Z","next_check":"2026-07-15T00:00:00.000Z","problems":[{"fix":"Import the wrapped ipywidgets components using `import reacton.ipywidgets as w` and refer to them with the alias, e.g., `w.Button`.","cause":"A component from `ipywidgets` (like `Button` or `VBox`) was used without being correctly imported, specifically not from `reacton.ipywidgets`.","error":"NameError: name 'Button' is not defined"},{"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.","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.","error":"RuntimeError: Widget constructor arguments do not match traits for widget type X"},{"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.","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.","error":"UI updates are not reflected after modifying component data"}]}