Make your apps dynamic with Temporary State

Retool community workshop

Jess Lin (@jesstyping)

aka the when, why, and how of Temporary State

Quick intro

Who is this for?

• You’ve built a basic Retool app before, and want to make your apps more dynamic.
• You’ve used temporary state before, but you have trouble deciding when you need it.

What we’ll cover

• When & why we need temporary state
• See 5 examples
• Build 2 (and a ½) illustrative examples

Who am I?

• Engineer at Retool who loves to teach. Find me on Twitter @jesstyping.

5 examples - opening quiz!

For each example:

1. Do we need temporary state to build this in Retool?
2. If yes, how many temporary state variables do we need, minimum?

​

Let’s open Retool…

Discussion

1. Which examples do not need temp state?
2. For the examples that need temp state—how many temp state variables?

​

Answers

#1, Basic counter: Yes. 1.

#2, Table row details: No.

#3, Modal + Tabs status: No.

#4, Teams explorer: Yes. 2. (1 in theory)

#5 Multiple counters: Yes. 3. (1 in theory)

​

What’s the general principle for when we need temp state, or not?

When do we need temp state?

​

When you want to track a variable that can change while a user interacts with your app

​

… that is temporary—that you don’t want to immediately “save” to your backend

​

… that Retool doesn’t already provide a built-in way to do.

E.g. each Retool component has a set of properties that update as the user interacts with the component.

Let’s build examples

Let’s open Retool

Review

Example 1: Basic counter

• Created a temp state to track count.
• Initial value = 0
• Used `setValue` to replace the entire state when button is clicked.

Example 2: Multiple counters

• Created a temp state to track ALL the counts. Object of row => count.
• Initial value = the value returned from a Query
• Used `setIn` to replace only the value of the clicked row.

Review

Example 3: Teams explorer

• Example of a complex app enabled by temp state

​

Docs

• https://docs.retool.com/docs/temporary-state

Summary + Next steps

Next

• Create your own example to practice using temp state.
• Sign up for our next session.

Questions?

• Ask now, in the community forum (community.retool.com), or ping me on Twitter @jesstyping

Appendix

Links to example apps

1. Basic counter
2. Table row details
3. Modal and Tabs status
4. Teams explorer
5. Multiple counters

The 4 things we can do with temp state

1. Create one!
2. Set the default value.
3. Update the value.
4. Read the value.

​

Similar to a regular variable when you’re programming.

The 3 decisions for each temp state

• Create one! / Read the value.

Decision: What type of data should this be? E.g.

- number� - string� - a list (and if so, a list of what?)� - an object (and if so, what’s the key and what’s the value?)

• Set the default value.

Decision: What’s the initial value?

• Update the value.

Decision: When does this value need to be updated?