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

• Usage: Select the specific variable you want to update and define the new value.