Managing Complex State in React with Jared Palmer [explicit]
Please be advised that this video contains language that can be considered explicit.
Joel and Jared chat about the essential questions around State management; they concluded that there is no silver bullet in dealing with State Management. The conversation also included an overview of how URL-driven Applications are used to maximize SEO performance (they do this by keeping State the URL). Jared also gave a walkthrough of Formkit and Recoil. He expanded on how Recoil solves performance when you need to update State in a deeply nested tree.
Resources
State Management
- The reason why State management comes up as a pain-point is that it's core to application development. If you understand State Management, you know React at its most profound levels.
- Managing State is an art form. It's the most challenging part because it's the main job.
- Managing State has heuristics, similar to a language that has been acquired through experience.
- Using TypeScript, you learn to start recognizing patterns. It gives an additional layer of information. It also enhances communication in a project.
- "I became a lot better at managing State when I started using TypeScript... you can preview what's behind the interface."
- "Strict TypeScript rules reduce cognitive load."
Essential Questions in State Management
The biggest question that you need to answer: Where is this State going to live?
You should never have State in two places at any time. Do not duplicate State.
You need to have a single source of truth, and it needs to live in one place.
- It can live in memory, local storage, session storage, URL bar, and browser history.
- Example of implementing State in browser history. 👉 https://twitter.com/rauchg/status/1245850468212826114
URL driven Applications
- An example of Natural Language Generation in the URLs.
- Amazon SEO hack: generating canonical URLs for better SEO.
- Currently, you can not share search queries on egghead.io. URLs = Sharing State.
- You need to ask yourself before using URLs to store State: Is this something that you need to share with someone else? If yes, store State in the URLs.
- URL-driven applications are not hard to build. The best way is to extract the writing and reading of the URL from your components.
- You are holding the State in the URL; you are not keeping State in React. You can then flow it down the tree.
- This isn't just an SEO problem, but a State management problem.
Normalizing Data
The best way to level up your State game is to learn how to normalize.
The process of normalization is heavily used in every software design because normalizing data has a significant impact on reducing data redundancy.
Normalizing data with unlock performance gains. You need to have a single source of truth for each atomic unit of State. And you only want to make a change in one place.
Immer - write mutual code.
Using immutable data structures provides many benefits, including making your code easier to reason about and less prone to bugs.
Immer - It's useful when making an update at scale using structural sharing. It's super fast, perfect for large nested lists.
Formik
- https://formik.com is using Immer when creating deeply nested components.
- Lots of State is being managed in one single place.
- To handle several nested tree updates, it uses recursion, and its handle by an internal engine, using React to evaluate, and Immer to manage the updates.
Recoil
https://codesandbox.io/s/recoil-sandbox-20200516-meh12
- Recoil is a state management library for React, so you need to have to React installed and running to use Recoil.
- Recoil will solve the issue of performance, keeping the typing fast in Formkit.
- With Recoil, you can isolate nested State and ignore the rest of the tree.
- React is not the best option when working with deep, nested trees.
- "It doesn't always have to be React."
- "There is no silver bullet when it comes to State Management. If it's confusing for everyone, it's hard for everyone."