Introduction to Managing State in Stimulus Code

Managing State in Stimulus Code

As we’ve been building our sample concert application in this course, we’ve spent a lot of time worrying about state management. As a reminder, state means the set of values the front-end needs in order to draw the correct information to the screen and properly manage user interaction. In the Hotwire and Stimulus universe, state and data are largely managed by adjusting the dataset of various DOM elements and using the browser and Stimulus controllers to work with that information. While a Hotwire and Stimulus application may use external classes to manage client-only abstractions, we probably don’t need a separate class beyond the DOM to manage the state of the application.

In this chapter, we’ll build out our calendar filter to the schedule page using the DOM to hold our client-side state. We’ll also look at how to use the MutationObserver API to detect DOM changes that might indicate client-side state updates. Later, we’ll see that a complex React app often uses ...