Temporary state

Learn how to use temporary storage with your app.

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

These methods can be used inside of a Run JS Code type query:

state.setValue(value: any)

Sets the value of state.value to whatever is passed in as an argument

state.setIn(path, value: any)

Sets the value of state.value at a specified location. The path variable accepts an array of keys/indexes to select. I.E. state.setIn( [ 0, "trout" ], {length_inches: 16 } ). The value will be set without destroying and recreating the other values of the state.

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


Did this page help you?