Recoil Logo

Learn Recoil

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?

Built with + by Jacques Blom.