In this video we'll learn about Recoil React State Management which is a new and experimental state management library from Facebook. It is great for when your components are highly relational, when you have derived/computed state, and when you want to avoid re-rendering the entire tree when only certain parts of your state have updated. This library will eventually be concurrent mode compatible.
Join me on Discord! https://discord.gg/wcSNwfu
Source code: https://github.com/leighhalliday/recoil-cart-demo
Recoil: https://recoiljs.org/
Reduce Video: https://youtu.be/NiLUGy1Mh4U
Should you use it? Answer these questions:
- Do I have to share state between components?
No: Stick with useState.
Yes: You should "lift state up" using useContext, Redux, MobX, or Recoil.
- Am I running into performance problems because state updates is causing unnecessary re-renders?
No: Your choice.
Yes: Maybe give Recoil a try!
00:00 Introduction
02:30 Setting up RecoilRoot
05:45 Creating an atom
06:45 The useRecoilState Hook
11:30 The useRecoilValue Hook
14:30 Setting up Shipping component
19:15 Creating a selector for derived/computed state
26:50 Summary