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

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.
  • https://nomadlist.com
  • https://houzz.com
  • https://www.parentlist.org/resources/?fwp_grade_level=1st-grade&fwp_pricing=free
• 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.
  • Example: https://www.houzz.com/products/coffee-and-accent-tables/shape_name--Round
• 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.

    Immutable JavaScript Data Structures with Immer

• 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.
  • https://github.com/facebookexperimental/Recoi
• 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."