State Management in React with Paul Henschel

Paul Henschel is a frontend developer based in Germany and Switzerland. The founder of Luxundlaune, a photography platform in Germany, Paranoidandroid, a custom firmware for Android, and several open-source projects like react-spring and react-three-fiber.

In this interview, Joel and Paul discuss the biggest challenges in state management, picking a state management library for your project, and the Redux mindset that everything should revolve around State.

Why is State management talked about so much when it comes to building an application?

• So many ways you can go about it. There is no one defined way to do it.
  • proxy
  • mutate
  • streaming

Zustand, react-spring, and react-three-fiber

When starting using Zustand, Paul liked using Redux over things like Mobx or anything that's Magic. But he didn't like the boilerplate or the opinions that came along with it. Then he decided to create something new that came along with Zustand.

react-three-fiber brought its own complications. There were two reconcilers that needed to talk to each other, basically like components. That's when Paul realized there was so much more going on that he didn't even know that he needed. The core fundamentals of React and Redux weren't going to help here.

• Take anything to do with 3-D games, for instance. Refreshing props via React simply wouldn't work based on the fact that it needs to be very fast. React would be refreshing roughly 60 times per second, every frame the object moves to get from point A to point B.
• Redux, at the time, couldn't put them on.
• Zustand resolved these issues by the fact that it can notify a component of changes without re-rendering it.

Are there too many options in the world?

• Possibly! Every library basically solves a problem. That's how libraries are pretty much created. Take Facebook, for instance. They made a library that solved their problems, and thus Folly was born.
• Other libraries, such as Recoil, Paul isn't a huge fan of. It's extremely large and has somewhere around 30 API's in it. Even if it is the best thing in the world, there is just so much to learn and that takes a lot of time.
• Recoil is great.
• React is like a petri dish, constantly evolving and upgrading.

Animation is largely a product of state

• The problems that come up with animations is largely a state management issue.
• Hooks changed the game in this regard. With hooks, you have your bare-bones application and a simple flag that toggles on/off.
• It's state made movable.

State is the most important part of the application

• Applications should revolve around your state.
• The apps that are made without state in mind are a complete mess.
  • It doesn't scale as well.
  • You're modeling stuff around refactor.
• When writing something big, start with a good, stable state model.

Redux as a state management solution

• Joel loves the Zen of Redux. the philosophies underneath it, and the core principles over the implementation of the library itself.
  • The mind-blowing idea of the store; the single source of truth; the ability of being able to store everything at the top level.
• For Paul, it was difficult to get into. After hearing about it from basically everyone, decided to give it a go. He really liked it in the beginning.
  • It helped him to also learn JavaScript and functional programming along with Redux.
  • "I'm glad I went through all this churn, and what people call boilerplate."
• Zustand represents those principles at the core fundamentally.
  • It's inspired by and has a direct line that you can draw between the two.
  • "Same idea. New implementation, different use cases perhaps, different ways to think about it, too."

Do you use state machines?

• Paul didn't really try it at all. It's a bit overarching.
• It's a wall of very specific configuration and It's hard to function like that.
• He likes obstructions and tools on thresholds, not Magic. There is a sweet spot between something that creates and does everything and something that still allows you to be explicit.

Has anything come out of this, creating these libraries, that surprised you?

• Yes, of course, because there are so many levels that have accumulated now. React green room, React use gesture and switched arms, React-Three-Fiber.
• I enjoy this. For me, that's my reward.