React State Management

| "State management is the core of application development" -Jared Palmer

Managing state in a UI is challenging. It's genuinely difficult and the solutions require a depth of knowledge and experience to understand. Everything is a balance of tradeoffs in complexity, performance, and user experience.

This is a series of interviews with experts, open-source maintainers, and UI developers that have combined decades of experience building stateful UI applications for millions of users.

Part interview, part screen share, these videos should benefit you if you're building web applications.

They focus on React, but the underlying principles are valid for UI work in general (and beyond).

There's more to development than just writing code. Follow the đź’ˇ prompts for content ideas you can create to build your reputation. Share what you create!

Mark Erikson on Redux

Interview

Mark Erikson & Joel Hook talk about Redux

"People don't seem to understand the context and history of why different tools exist." -Mark Erikson @acemarke

How do you know when you need to use a state management library? How do you choose which one to use?

Released in 2015, Redux might seem old. The reality is that its total usage outnumbers any other state management library by an order of magnitude.

Redux's maintainer Mark Erikson joins Joel to discuss the past, present, and future of Redux.

đź’ˇ Response Prompts

  • What is the motivation behind the "Ducks" file structure? How well does it match your typical project structure?

  • Mark's approach to state management begins by asking these questions:

    What kind of app am I building? Where does the data come from? How is it interacted with? How long does it live for? Does it change over time?

    Compare Mark's "Essential Questions of State Managment" with the approach you take in your own applications. How similar are your approaches?

Courses

David Khourshid on State Machines & XState

"I like to call XState 'Redux with Rules'" -David Khourshid

Should all state changes be the result of an event and an action?

David Khourshid argues this doesn't always work. In this conversation, David and Joel use the example of a person being either awake or asleep and the states between.

Thinking about application state in this way led David to research the history of finite state machines, eventually leading to the creation of the XState library.

đź’ˇ Response Prompts

  • Choose an everyday activity, and model it in a state chart.
  • Here's what David thinks about when planning an application: What are the pieces of state? How is it organized? How will the data change over time? How can the data be modeled?

Course

Podcasts

Jared Palmer on State Management

"If I'm focusing on anything other than state management, I'm wasting time" -Jared Palmer

In this in-depth, expletive-filled conversation, Formik creator Jared Palmer discusses a variety of angles to approach state management. Whether you use MobX, Immer, the useEffect hook, or even your app's URL, there are pitfalls everywhere.

Learning to "think in state" can help you avoid them.

đź’ˇ Response Prompts

  • Jared's Essential Questions of state management: The biggest question of state is "Where will it live?" (and the answers aren't always obvious).
  • Jared says that he became a lot better at state management when he started using TypeScript. Why do you think type safety would change the way state management is approached?

Courses

Chance Strickland on Context & State

"I think you always want to think like a state machine. What are the actual finite states your component can be in at a given time?" -Chance Strickland

Web development's shift from the imperative ("do this thing when there are changes over time") style to React's declarative style where UI is a function of state.However, there are still many ways to approach API design.

In this interview, Chance gives a guided tour behind the scenes of ReachUI. There's more thought that goes into seemingly simple interactions than you might think.

đź’ˇ Response Prompts

  • Chance brings up React's Context API, and the misconception that it is only for global state. Create an example of state being shared with the Context API that isn't available to the entire application.
  • Model a state chart and build a Traffic Light component based on Chance's description.
  • How should you balance using an existing component library with writing your own?

Courses

Tanner Linsley on React-Query & State Separation

"It's not global state. It's server state and UI state." -Tanner Linsley

Tanner is known for his open source tooling collectively known as the TanStack. One part of the stack is React-Table, which Tanner describes as a sort of state manager for tables.

Another library Tanner's created is React Query. This set of Hooks focuses on fetching & caching state from the server, as Tanner sees React's built in useState and useReducer as adequate for most client side state.

In this conversation, Tanner talks with Joel about the evolution of React Query while providing a demo of the library in action.

đź’ˇ Response Prompts

  • Tanner's questions of state management: Who owns this piece of state? Do I own it in my browser, or is it owned somewhere else? By a server, or another user, or something else?
  • What are "derived state" and "computed state"? Have you specifically considered them in your development work?
  • Tanner suggests that no matter the library or approach you use to do your actual state management, model it as a state machine. One technique that Tanner suggests is to use enums instead of booleans. Have you written code you could refactor to these guidelines?

Courses

Talk

React Query: It’s Time to Break up with your "Global State”! –Tanner Linsley, React Summit 2020

David McCabe on Recoil

"Recoil solves three basic issues: flexible shared state, Derived data & queries, and app-wide state observation" -David McCabe

David McCabe is a UI engineer at Facebook, and the author of Recoil.

David describes Recoil as the encapsulation of some patterns, which boils down to writing things down in some code in a way that provides structure to an application.

Other topics in this conversation include design patterns, React's Concurrent mode, and how the the future of web development is informed by things we've seen in the past.

đź’ˇ Response Prompts

  • When asked if Recoil should be used in every app, David responds that it helps push you toward good patterns but has some performance and cognitive overhead. How should you evaluate if a library is right for your application's needs?
  • How does the URL bar in the browser relate to state management?

Courses

Talk

"Recoil: State Management for Today's React" - David McCabe, ReactEurope 2020

Christopher Chedeau on State Management

"The challenge with useState in React Hooks is that it's local to components. Recoil expands this idea to manage more than local state." -Christopher Chedeau

Christopher Chedeau is a frontend manager at Facebook, and co-creator of React Native among other libraries and tools.

In this conversation he discusses the motivation behind Facebook's Recoil library and how it solves some of their problems. There is also a comparison of how libraries like MobX, Redux, Falcor, and others solve similar problems with different approaches.

While the application you work on might not be as large as Facebook, you'll still encounter many of the same challenges as you build. Don't be afraid to try multiple solutions in the development process.

đź’ˇ Response Prompts

  • Christopher points out that state management begins as soon as you bring external data into an application. How does the method you use to get data into your application inform how you structure your state?
  • As a manager at Facebook, Christopher can attest that "the best way to improve performance is to measure it". Joel uses a metaphor of state management at the business level. What parts of your development process could you be better about measuring?

Courses

Podcasts