Using Recoil to Manage Orthogonal State in React Apps with David McCabe
Joel and Dave chat about the essential questions around State Management. A critical point mentioned was that programming gets boiled down to managing State, especially when it comes to working with React; this is due to React's functional paradigms. Dave also talked about how Recoil is designed with Concurrent Mode in mind, his experience in open source, Pattern Language, and the different State in a browser.
Resources
Why are react developers always talking about State Management?
- UI's have been made the same way since small talk in the '70s. MVC
- React changes how you look at it, folding in ideas from functional programming.
- React is a whole new world of possibilities.
- Programming gets boiled down to State management.
- State is the easiest place to get yourself in trouble.
- CSS is a stateless example. It's complex, but you cant shoot yourself in the foot as much.
- Async State makes things even more complicated.
What are the essential questions you ask before you get started?
- Applications have evolved. David doesn't know if there is a "design" phase where you could ask this question. You start with a prototype and move from there.
As your app evolves, how do you know when you need more tools?
- App for performance analysis. It became successful, so they added a bunch of features.
- It turned out to be really buggy.
- Recoil applies a functional structure to async processes. Async processes are just functions evaluated on another host.
- The remaining complexity lies in the non-functional aspects of development.
- They knew that what they were doing was buggy and wasn't working, so they started to solve those problems.
Why yet another one of these? - this question comes out of the assumption that making a State Management library is a big deal.
- David thinks this library captures some programming patterns written down into some code. Everyone should be doing this.
- You are always designing. Sometimes you make happy accidents.
- David doesn't think State management has an established pattern yet.
- Joel extrapolates to web development in general.
- Concurrent and scheduling need to be more established before we can come to a consensus on web development.
Should you use Recoil in every app?
- You could use it in any app, and it gives you patterns and utility hooks that will ensure your app is built for the future.
- Just use react with most apps. The fewer dependencies you have, the more resilient your code.
Any insight with concurrent mode looming?
- It's a slow process because there's a lot of incompatible code.
- Concurrent mode is very complex. Recoil will work with concurrent mode. Recoil was designed with concurrent mode in mind.
- The state definition is incremental and distributed, making code-splitting possible.
- State can be replaced with derived data without modifying the components that use it.
What's the cool stuff that hasn't been published yet?
- Persistence (Observation API)
- Scaling it to bigger apps with more State.
- Note: portions of code need to be optimized.
What's the open source experience been like for you?
It’s been really good. Lots of support from the community.
Joel mentions Jared Palmer and Joel talk about State Management and how Jared fixed their crippling performance problems with Recoil.
This is because Concurrent Mode rendering is not blocking; it is interruptible. This improves the user experience.
When did design patterns fall out of favor? The Gang of Four style patterns
- David thinks that the good parts are assumed, and the bad parts are mocked.
- Christopher Alexander Pattern Language changed the way David looks at his environment.
- The book creates a new language, what the authors call a pattern language derived from timeless entities called patterns.
Are we just encapsulating patterns into the library?
People just don't use pattern language anymore. Did Java kill it?
It's more of an oral culture rather than a written culture.
Cargo holding.
Maybe this is why people use redux when they don't need to because they don't understand what pattern of redux solves, so they use it every time.
Jed Watson combining layers of State. - Local State - shared State - Remote State - Meta State - you aren’t the source of truth - Router State
David's mental modal:
- You can add some types of state.
- Including State shared across tabs.
- Don't separate router state. You can use a function to put the application state into the router and vice-verse
Url bar could be thought of as a component.
- Essential Question: Why is there a difference between mobile and browser?
There's an upside to having a browser that knows about all the semantics on your page.