For AI agents: the complete documentation index is at llms.txt. Remove the trailing slash from a page URL and append .md to read its Markdown version. For the docs home, use index.md.

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

parent_state

Optional[BaseState]

Default: None

substates

dict[str, BaseState]

Default: {}

dirty_vars

set[str]

Default: set()

dirty_substates

set[str]

Default: set()

router_data

dict[str, Any]

Default: {}

rx_router_session

Field[SessionData]

Default: SessionData(client_token='', client_ip='', session_id='')

rx_router_headers

Field[HeaderData]

Default: HeaderData(host='', origin='', upgrade='', connection='', cookie='', pragma='', cache_control='', user_agent='', sec_websocket_version='', sec_websocket_key='', sec_websocket_extensions='', accept_encoding='', accept_language='', raw_headers=_FrozenDictStrStr(_data=mappingproxy({})))

rx_router_page

Field[PageData]

Default: PageData

rx_router_url

Field[URLData]

Default: URLData(scheme='', netloc='', origin='://', path='', query='', query_parameters=_FrozenDictStrStr(_data=mappingproxy({})), fragment='', href='')

rx_router_route_id

Field[str]

Default: ''

is_hydrated

bool

Default: False

Methods

get_component

get_component(*children, **props) -> Component

Get the component instance.

Parameters

children

The children of the component.

props

The props of the component.

Raises

NotImplementedError

if the subclass does not override this method.

create

create(*children, **props) -> Component

Create a new instance of the Component.

Parameters

children

The children of the component.

props

The props of the component.

Returns

A new instance of the Component with an independent copy of the State.