Summary
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
Jared Palmer
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.