For AI agents: the complete documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.
Square Banner
NewReflex Agent Toolkit is launching. Get early access
Square Banner
Reflex Logo
Docs Logo

Componentstate

reflex.state.ComponentState

Base class to allow for the creation of a state instance per component.

This allows for the bundling of UI and state logic into a single class, where each instance has a separate instance of the state.

Subclass this class and define vars and event handlers in the traditional way. Then define a get_component method that returns the UI for the component instance.

See the full docs for more.

Basic example:

# Subclass ComponentState and define vars and event handlers.
class Counter(rx.ComponentState):
    # Define vars that change.
    count: int = 0

    # Define event handlers.
    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1

    @classmethod
    def get_component(cls, **props):
        # Access the state vars and event handlers using `cls`.
        return rx.hstack(
            rx.button("Decrement", on_click=cls.decrement),
            rx.text(cls.count),
            rx.button("Increment", on_click=cls.increment),
            **props,
        )

counter = Counter.create()
Expand

Fields

Prop
parent_state: Optional[BaseState] = None
substates: dict[str, BaseState] = {}
dirty_vars: set[str] = set()
dirty_substates: set[str] = set()
router_data: dict[str, Any] = {}
router: Field[RouterData] = RouterData
is_hydrated: bool = False

Methods

SignatureDescription
get_component(*children, **props) -> ComponentGet the component instance.
create(*children, **props) -> ComponentCreate a new instance of the Component.