> For the complete documentation index, see [llms.txt](https://docs.digia.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digia.tech/data-and-state/state-management/page-and-component-state.md).

# Page & Component State

This state is scoped locally to the specific screen (Page) or widget (Component) where it is defined.

## Lifecycle

Unlike Global State, these variables do **not** persist forever. They are tied strictly to the lifecycle of their host.

### Page State

* **Lives**: When the user navigates **to** the Page.
* **Dies**: When the user navigates **back** (pops the page).
* **Note**: If you push a *new* page on top, the current page is still "active" in the stack, so its state is preserved until it is removed from the stack.

### Component State

* **Lives**: When the Component widget is rendered on the screen (mounted).
* **Dies**: When the Component is removed from the screen (unmounted).

## When to Use (Use Cases)

### Page State Examples

* **Search Query**: A text variable `searchText` bound to a search bar.
* **Filters**: A list definition `selectedcategories` for a filter modal.
* **Form Data**: Temporary storage for `email` and `password` before the user hits "Submit".

### Component State Examples

* **Internal Toggles**: An `isExpanded` boolean for an FAQ accordion item.
* **Animation Control**: A local variable to track the current animation frame or status.

## How to Create

1. Open the **Variables Panel** (usually on the right side) for your selected Page or Component.
2. Click **+ Add Variable**.
3. **Name**: Give it a descriptive name (e.g., `activeTab`).
4. **Type**: Select the Data Type (String, Integer, Boolean, etc.).
5. **Initial Value**: Set the default value.

### Scoping Rule for Initial Value

> \[!IMPORTANT] When defining the **Initial Value**, you cannot access other variables from the *same* page/component state (because they might not exist yet).
>
> You can **only** access:
>
> 1. **App State** (Global variables).
> 2. **Page/Component Arguments** (Parameters passed into this screen).

## Updating State

To modify the value of a Page or Component state variable (e.g., updating `count` when a button is clicked), you must use the **Set State** action.

* **Action**: [Set State Action](/logic-and-interaction/actions/set-state.md)
* **Usage**: Select the specific variable you want to update and define the new value.