Taming the State Management Dragon

Rate this content
Bookmark

We spend a lot of time discussing which state library we should use, and fair. There are quite a few, from the common one everyone uses and loves to hate on, to that one quirky alternative, to several up and comers. However, discussing which library is best puts the cart before the horse.

When figuring out how to handle state, we should first ask ourselves: what different categories of state do we need? What are the constraints of each category? How do they relate to each other? How do they relate to the outside world? How do we keep them from becoming a giant, brittle ball of yarn? And more.

This might sound overwhelming, but never fear! In this talk, I'll walk you through how to answer these questions, and how craft an approachable, maintainable, and scalable state system. And yes, I will talk about how to pick a state management library too.

Bryan Hughes
Bryan Hughes
23 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk discusses various aspects of state management in software development. It covers different types of state, such as bootstrap data, lazily loaded data, and reactive data. The Talk also explores the concept of locality in state management, including local, global, and regional state. It introduces libraries like Recoil and Jotai that challenge the single global store concept and provide better locality. The Talk emphasizes the importance of setting up state management systems for success and creating reliable systems to focus on user satisfaction.

Available in Español

1. Introduction to State Management

Short description:

Hi, everyone. My name is Brian Hughes, and I'm a staff frontend engineer at Patreon. Today I want to talk about some things I've learned over the years of how to build successful state management solutions inside of applications. State is not just data, it's how we access, read, update, and synchronize data. It's more than just libraries, it's the entire house. When designing a state management solution, one important question to ask is when is state created? There are three categories of state: bootstrap data, pre-interaction state, and dynamic state.

Hi, everyone. My name is Brian Hughes, and I'm a staff frontend engineer at Patreon. At Patreon, I'm on a team called frontend platform, and our team is tasked with managing basically all of the foundations for our frontend code base. And this includes architecture and state management. And today I want to talk about some things I've learned over the years of how to build successful state management solutions inside of applications. Because I think this is a really critical part to having a successful frontend code base. It's also one that tends to be under-invested in.

Let's start off with the definition. What is state? So I define state as data and all of its related mechanisms. We know that intrinsically I think that state isn't just data, right? Data's just a blob of, well, data. It's really how are we accessing that data? How are we reading that data? How are we updating it? How are we synchronizing it? So state is really its data and all of those mechanisms associated with it. The mechanisms are more than just libraries. I think a lot of times when we think of state, we're like, well, we've got this API schema coming from our backend and tells us what data we have. And we pick the state management library, Redux, recoil, Jotie, whatever, and that's it, right? But that's not it. Those are really important parts. The way I like to think of it is that our API schema, what data the backend returns and the libraries that we use to access this data, that's like the foundation of a house. It's really critical, of course, it's the foundation. But we also need walls and a roof and things like that too. And a real state management solution in an front-end application, especially any really reasonably complex application is we got to think about this holistically, we got to think about the entire house.

So whenever I'm going through and I'm designing a state management solution, either if it's for a whole new application, rewriting an old one, or even if it's just adding a new page to an already existing system, there's a handful of questions that I really like to ask myself. And we only have so much time today, so I'm just going to stick to two of the really important ones, or at least that I think are important, and I also think aren't talked about as much as I wish they were. So the first question is, when is state created? If we think about a front-end application, it's not a snapshot in time, right? It exists over time and it changes and reacts to user input, right? And so when is the state coming into being? Understanding that really informs what kind of a testing strategy do we need for it, what kinds of safeguards do we need for accessing and just all sorts of things. And it really depends on the answer to this question. And I think there are roughly three categories of state when it comes to this temporal nature. The first category is state that is created before startup, otherwise known as bootstrap data. And when we think about this, we'll take, for example, a social media site. We'll use that as an example through this talk. On a social media site, we load the page, the first thing we do is we see a bunch of posts. That is something that exists before we can even begin interacting. And so this happens, or at least one way it can be done is we can do this as part of bootstrap data in a modern server-side rendering type setup.

2. Data Assembly and Gotchas

Short description:

In Next.js, data for the first render is assembled by calling multiple back-end API endpoints and then starting the application. However, the creation and consumption of data are decoupled, and we need to keep them in sync. The data goes through multiple steps and is funneled along, passing through different places before being accessed. While implementing this is not complicated, it still requires writing and maintaining code, which comes with a cost.

Say with Next.js. And in this world, the idea is that we first, we assemble all of the data needed to do that first render. You know, we call our back-end, usually multiple back-end API endpoints, and we might do some hydration, massaging of data. We assemble all that together, and only then once we're done doing that do we start the application and do that first render.

And so there's a couple of gotchas to be aware of with this. And like I mentioned, this data creation and the data consumption, they're pretty decoupled. The way that data looks for example, in Next.js instead of that get-server-side-props function, the way we work with it, the way it looks and everything is usually different than whenever we're reading it from say inside of Redux or something like that. And so we just need to keep in mind that these are decoupled, and thus we need to actually think about keeping them in sync. Now, it's actually not that complicated to do in practice. Usually TypeScript is a great solution to this, but is still something that we have to think about, and thus we also have to maintain.

Another bit of a gotcha with this is this data goes through a couple of steps and it kind of gets funneled along. Like I said, we start off calling multiple endpoints to fetch different, oftentimes unrelated bits of data. We're fetching who is the current user, what is the list of most recent posts, what are the current trending topics, things like that. And we take all the disparate data and we kind of like squeeze it together into one ball. And we pass it along through a couple of different places. It goes into our top level component, we pass it off to our libraries to Redux say whenever we're initializing our store, only then to we break it apart and access it later. And again, this isn't particularly complicated to implement, but it is code. And anytime we implement, we have to write code to do a thing. No matter how simple that code is, it is still code that has to be maintained and is still code that can have a bug in it, and thus it comes with a cost.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Announcing Starbeam: Universal Reactivity
JSNation 2022JSNation 2022
27 min
Announcing Starbeam: Universal Reactivity
Starbeam is a library for building reactive data systems that integrate natively with UI frameworks such as React, Vue, Svelte or Ember. In this talk, Yehuda will announce Starbeam. He will cover the motivation for the library, and then get into the details of how Starbeam reactivity works, and most importantly, how you can use it to build reactive libraries today that will work natively in any UI framework. If you're really adventurous, he will also talk about how you could use Starbeam in an existing app using your framework of choice and talk about the benefits of using Starbeam as the state management system in your application.
The Zen of Yarn
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.

Workshops on related topic

Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
State Management in React with Context and Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
Roy Derks
Roy Derks
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
From Idea to Production: React Development with a Visual Twist
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Omer Kenet
Omer Kenet
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A