# State variables

State variables function as *temporary storage* while users interact with your app. They reset to their initial values upon a page refresh or when the app is closed.

{% hint style="info" %}
For persistent storage that remains intact upon page reloads, consider exploring [Local storage](https://docs.uibakery.io/concepts/localstorage).
{% endhint %}

State variables come in two **scopes**:

* *App* - maintain their values across different pages
* *Page* - maintain their values only within a specific page

State variables can possess the following **attributes**:

* *Name* - the unique identifier
* *Type*
  * String
  * Number
  * Boolean
  * Object
  * Arrray
* *Initial value* - the starting value of the variable

State variables can be organized using the **folder** structure of the *Actions* panel, allowing you to place relevant variables near the actions and logic they are associated with.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FVj6A6Tithch3bqhnBGpV%2FCleanShot%202024-12-19%20at%2014.32.43%402x-min.png?alt=media&#x26;token=7e17fe0c-3745-4c28-a8d2-a3d9e9788acf" alt=""><figcaption></figcaption></figure>

## Creating a state variable

You can create a state variable, same as you would create an Action, from the **Actions** panel. You just need to click the *plus sign* and select **State variable**. From there, specify your variable *type*, assign it an initial *value*, and give the variable a meaningful *name*.

That's it! You can now read and write to this variable. Depending on its scope, it will be available either in the whole app or on a particular page.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FxJDnnJGolIHUgiPhRiZ3%2FCleanShot%202025-01-14%20at%2016.18.46%402x-min%20(1).png?alt=media&#x26;token=4a5a89d4-b979-493a-bfca-236d573e8b5f" alt=""><figcaption></figcaption></figure>

## Working with a state variable

Now that you've created a state variable, let's explore how you can use it in your app. Within the app, all variables can be accessed using the `{{state.<variableName>}}` scope.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FAaIJ57IVwWkdtmSwNzBB%2FCleanShot%202024-12-20%20at%2013.39.27%402x-min.png?alt=media&#x26;token=6e65cd68-fad5-4413-b1d1-8f48af64b9fe" alt=""><figcaption></figcaption></figure>

You can also assign a value to a variable using the **Save to State** **action** or directly through **JavaScript code blocks**. Check out the sections below for more details :point\_down:

### Save to State action

To store a value within an action, follow these steps:

1. Add a new *step* to your action and select **Save to State**.
2. Select the variable you want to modify.
3. Define a new value for the variable, which can either be hardcoded or derived from an available variable.\
   For example,`{{data}}` to reference the result of a previous action step, or `{{ui.component.value}}` to access a component's state.

{% @arcade/embed flowId="B9U2Cqhf8BgqQyfM8nkX" url="<https://app.arcade.software/share/B9U2Cqhf8BgqQyfM8nkX>" %}

### Save and reset variable value with code

You can use state variables in JavaScript code blocks to:

* **Save** state values

```js
state.varName = 'newValue';

// or using setValue method
state.setValue('varName', 'newValue');
```

* **Read** state values

```js
state.varName;

// or using getValue method
state.getValue('varName');
```

* **Reset** a single variable or all variables to the initial value

```js
state.resetValue('varName');
```

```js
// reset all variables, page and app state
state.resetValues();

// reset all page variables
state.resetValues('page');

// reset all app (global) variables
state.resetValues('app');
```

Let's review an example of resetting a state variable value - you have a **Text input** component and you would like it to reset its value after a comment is left.&#x20;

Here's how you can do that:

1. Create a state variable of the **String** type, define its initial value, and name it *Comment*, for example.
2. Assign the variable to the *Text input* component's **Value** field.
3. Create a **Save to State** action that will save the new comment - define its value as `{{data}}`.
4. Assign this action to the **On Change** trigger of the *Text input* component.
5. Next, create another *Save to State* action, that will reset the comment - define its value as `''`.
6. Now, add a **Button** component to the working area and assign the *Reset* action to its **On Click** trigger.

Done! Now, after you leave a comment and click the button, the component will reset its value.

{% @arcade/embed flowId="15HvrIPysPifscjlAkCL" url="<https://app.arcade.software/share/15HvrIPysPifscjlAkCL>" %}