How to Use Custom States in Bubble.io to Store & Manage Data Without the Database

Hey,

Did you know that not all data needs to be stored in your database? Many Bubble.io users slow down their apps by running too many database searches when they could be using Custom States instead.

Custom States let you store and manipulate data on the page without saving it permanently, making your app faster, more responsive, and more user-friendly.

This week, I’m breaking down exactly how to use Custom States in Bubble.io to optimise performance, manage temporary data, and improve user experience.

1. What Are Custom States?

A Custom State is a temporary piece of data stored on a page, element, or reusable component. Unlike database entries, Custom States:

• Do not require a database search (instant access to stored values).

• Disappear when the page is refreshed (unless stored in a reusable element).

• Can be used to store lists, numbers, text, or user selections without database calls.

Think of them as mini memory storage units that Bubble uses to remember things temporarily.

2. How to Create a Custom State in Bubble.io

1. Select any element on the page (e.g., a group, repeating group, or button).

2. Go to the Element Inspector and find the Custom State section.

3. Click “Add a new Custom State” and choose the type (text, number, list, etc.).

4. Assign an initial value (optional).

Example: If you want to store a user’s selected category without saving it to the database, create a Custom State like this:

• Element: Group_ProductList

• State Name: selectedCategory

• State Type: Text

Now, whenever a user selects a category, Bubble remembers it instantly without needing a database entry.

3. How to Use Custom States in Workflows

Once you’ve set up a Custom State, you can modify it dynamically using workflows.

Example 1: Store User Input Without a Database

• When a user selects a category from a dropdown, update the Custom State instead of making a database change.

• Workflow:

  • When Dropdown’s Value is Changed → Set Custom State selectedCategory = Dropdown’s Value

  • Use selectedCategory to filter search results instantly.

Example 2: Store Multi-Step Form Data

• Instead of saving incomplete form data to the database, store it in Custom States until submission.

• Workflow:

  • When Next Button is Clicked → Store values in Custom State

  • On the final step, save everything to the database in one request.

Example 3: Track a User’s Cart in an E-Commerce App

• Instead of saving every product selection to the database, store items in a Custom State list until checkout.

• Workflow:

  • When User Clicks “Add to Cart”, add the item to the cartItems Custom State list.

  • Display cartItems in a repeating group without needing to fetch it from the database.

4. When to Use Custom States vs. The Database

Rule of Thumb: If the data is only needed for that session, use Custom States. If it needs to be retrieved later, store it in the database.

5. Advanced Use Case: Combining Custom States with Workflows

If you want even more flexibility, combine Custom States with workflows for dynamic interactions.

Example: Building a Dynamic Tab System Without a Database

• Create a Custom State called activeTab on a group.

• When a user clicks a tab, update activeTab instead of making a database change.

• Show or hide content based on activeTab.

This removes the need for unnecessary database writes, making navigation smooth and responsive.

That’s a Wrap

Custom States are one of the most powerful yet underused features in Bubble.io. They make apps faster, reduce database queries, and improve the user experience.

What’s the first thing you’ll use Custom States for? Hit reply and let me know—I’d love to hear how you’re applying this.

Until next week
Stackless