Custom States are one of the most powerful concepts but often misunderstood in Bubble.io. Unlike data stored in databases, Custom States are temporary variables that exist only in the browser of the user during their active session. They are a fundamental pillar for creating interactive and responsive applications without having to constantly manipulate the database.
In this article, we are going to explore the Custom States in depth, locate them with specific use cases and understand how they can improve the user experience and optimize the performance of your Bubble.io applications.
Custom States offer several advantages compared to traditional database storage:
🔑 Key concept : Think of Custom States as a temporary whiteboard where you jot down information as you work, but delete it when the task is complete. They disappear when the page is refreshed!
Before we go any further, let's clarify the fundamental distinction between changes in Custom States and in the database in Bubble:
Bubble allows you to create several types of Custom States :
To create a Custom State in Bubble.io, it's very simple. For this example, we're going to apply it to a button.
💡 Tip : Adopt a consistent naming convention for your Custom States. For example, prefix them with “cs” or “state” to easily distinguish them from database fields in your workflows.
To change a Custom State, use the “Set state” action in your workflow:
Multi-step forms are one of the most common use cases for custom states.
Concrete example :
⚠️ Important note : The idea here is to store the data entered in Custom States throughout the process and then save it to the database only at the last stage. This prevents unnecessary server calls, WU consumption, and improves the user experience.
Custom States are perfect for managing a shopping cart before finalizing an order.
Concrete example :
💡 Practical tip : To manage quantities, you can either add the same product to the list several times, or create an object-type Custom State that stores the product and its quantity.
Adapt the appearance and the behavior of your interface based on user actions.
Concrete example : Quickly switch between 2 interfaces
🔥 Discover our Tips & Tutorial on the subject: How to swap between interfaces with a Custom State
The strategic use of Custom States can dramatically improve the performance of your Bubble.io application:
💡 Insight performance : On a complex multi-stage form, using Custom States to store intermediate data can reduce WU consumption by up to 80% compared to backing up at each stage!
🔴 Problem : Data loss when the page is refreshed.
✅ Solution : Use the localStorage (via the plugin of the same name) or the database for data that must persist.
🔴 Problem : Code becomes difficult to maintain and debug.
✅ Solution : Use objects to group related states (ex: a “filter” object rather than several separate states).
🔴 Problem : Unreachable states or unexpected behavior.
✅ Solution : Create the states at the appropriate level and use the correct reference (this page vs parent group vs element).
🔴 Problem : JavaScript errors when trying to access an uninitialized state.
✅ Solution : Always set an appropriate default value.
💙 The final word : Custom States are one of Bubble.io's most powerful tools for creating dynamic and efficient applications. By mastering their use, you can considerably improve the user experience and optimize the performance of your applications. Feel free to experiment with different approaches and to combine Custom States with other Bubble features to create rich and complex interactions!
