# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/data-and-state/state-management/page-and-component-state.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.