> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

# 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](https://reflex.dev/docs/state-structure/component-state/) for more.

Basic example:
```python
# 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()
```

## Fields

| Prop | Description |
| --- | --- |
| `parent_state: reflex.state.BaseState \| None` |  |
| `substates: dict[str, reflex.state.BaseState]` |  |
| `dirty_vars: set[str]` |  |
| `dirty_substates: set[str]` |  |
| `router_data: dict[str, typing.Any]` |  |
| `router: reflex_base.vars.base.Field[reflex.istate.data.RouterData]` |  |
| `is_hydrated: bool` |  |

## Methods

| Signature | Description |
| --- | --- |
| `get_component(cls, *children, **props) -> 'Component'` | Get the component instance. |
| `create(cls, *children, **props) -> 'Component'` | Create a new instance of the Component. |