Store temporary data

Temporary states are like scratch-pads for your app. You can store data in them while your app is running. They are accessible anywhere on your app inside {{ }}, and they support reads ({{ temporaryState1.value }}), as well as writes ({{ temporaryState.setValue(3) }}).

🚧

Temporary state values are reset each time your app is loaded. We are currently rolling out support for persisting temporary state values across browser sessions. If this isn't yet available for you, you must write the values to a database or localStorage.

Create a temporary state

1. Open your Retool app in creator mode, and open the bottom panel.
2. Click + New, and select Temporary state.
3. Name your new temporary state. To edit the name, hover over and click on the name—either in the sidebar or in the main body of the bottom panel.
4. Assign your new state an Initial value. This is the value of the temporary state when your app first loads.

JavaScript methods

You can call the following methods within JavaScript queries.

state.setValue(value: any)

Sets state.value to the value passed in as an argument. Returns a void Promise.

For example, to set the value of tempState to a string "user_123_456":

await tempState.setValue("user_123_456");

state.setIn(path, value: any)

Sets the value of state.value at a specified location. path accepts an array of keys or indexes to select, where each item represents a key or index in the path to the object to update. The last item of the path array is the key or index to update. The value is set without destroying and recreating other values.

When using state.setIn, the initial value of state must be an empty object (e.g., { }).

The following examples show objects before and after calls to state.setIn.

Path as an array of indexes

"object1": {
  "key1": [
    "value1",
    "value2"
  ],
  "key2": {
    "nestedKey1": "value3"
  }
}

await tempState.setIn(["object1", "key1", 1], "value3")`

"object1": {
  "key1": [
    "value1",
    "value3"
  ],
  "key2": {
    "nestedKey1": "value3"
  }
}

Path as an array of keys

"object1": {
  "key1": [
    "value1",
    "value2"
  ],
  "key2": {
    "nestedKey1": "value3"
  }
}

await tempState.setIn(["object1", "key2", "nestedKey1"], "value4")

"object1": {
  "key1": [
    "value1",
    "value2"
  ],
  "key2": {
    "nestedKey1": "value4"
  }
}

When to use temporary state

Creating temporary states are helpful when:

1. You want to track a variable that can change while a user interacts with your app.
2. There's a variable that you don't want to immediately persist to a database.
3. There isn't a built-in way in Retool to track a variable. For example, each Retool component comes with a set of properties that update as the user interacts with the component.

Examples

For in-depth examples on how to use temporary state, see this talk from a Retool Community workshop in May 2022 (slide deck).