Intro
01:48
Course Intro
What we'll cover in the course, and how to make full use of the course.
03:46
Overview of Recoil
The history of Recoil, why it was built, and why you would (and wouldn't) want to use it.
03:06
Project Setup
Let's look at the project we'll be working on and get it set up. We'll also install Recoil.
The Basics
09:29
Atoms - Basics
We store shareable state in a Recoil atom, and explore API you can use to interact with them.
15:09
Selectors - Basics
Learn how to build simple derived state using Recoil Selectors.
Atom & Selector Families
11:55
Atom Families
We look at a common React Context performance bottleneck and how Atom Families can solve it.
17:09
Atom Families 2
We take further advantage of Atom Families by adding an Edit Properties sidebar and element resizing.
20:35
Selector Families
We take a look at how to and why you'd use a selectorFamily.
Async Selectors
17:58
Data Fetching - Basics
We fetch user data using a selector and a selectorFamily, and learn how Recoil works with Suspense.
10:25
Data Fetching - Advanced
We cover a couple of more advanced patterns when fetching data with Recoil.
24:13
Data Fetching in our Design Tool
We take what we've learned about Async Selectors and apply it to our design tool.
Patterns
08:53
Error Handling
How to gracefully handle and recover from errors when using Recoil.
10:03
Intermediate Selectors
We make use of an "intermediate selector" to control when the data fetching happens.
12:48
Selector Composition
We create a new selectorFamily that composes functionality on top of our existing editProperty selectorFamily.
Atom Effects
08:08
Atom Effects - Basics
We learn the basics of atom effects by persisting the state of a Recoil atom to localStorage, and rehydrate that state when the page loads.
07:38
Atom Effects with Atom Families
We persist the state of an Atom Family. Then we create a reusable Atom Effect function that we can use to persist any Atom or Atom Family to localStorage.
13:24
Async Atom Effects
We look at how to sync Recoil state to and from an API using Atom Effects.
06:51
Optimising API Calls
We look at how to avoid making an API call for each atom initialised in an atom family.
03:45
Unnecessary onSet calls
We look at how to prevent onSet from being called when the atom is first initialised.
04:05
Atom Effects vs Async Selectors
When should you use an Async Selector and when should you use an Atom Effect?