Intro

What we'll cover in the course, and how to make full use of the course.

Course Intro

The history of Recoil, why it was built, and why you would (and wouldn't) want to use it.

Overview of Recoil

Let's look at the project we'll be working on and get it set up. We'll also install Recoil.

Project Setup

The Basics

We store shareable state in a Recoil atom, and explore API you can use to interact with them.

Atoms - Basics

Learn how to build simple derived state using Recoil Selectors.

Selectors - Basics

Atom & Selector Families

We look at a common React Context performance bottleneck and how Atom Families can solve it.

Atom Families

We take further advantage of Atom Families by adding an Edit Properties sidebar and element resizing.

Atom Families 2

We take a look at how to and why you'd use a selectorFamily.

Selector Families

Async Selectors

We fetch user data using a selector and a selectorFamily, and learn how Recoil works with Suspense.

Data Fetching - Basics

We cover a couple of more advanced patterns when fetching data with Recoil.

Data Fetching - Advanced

We take what we've learned about Async Selectors and apply it to our design tool.

Data Fetching in our Design Tool

Patterns

How to gracefully handle and recover from errors when using Recoil.

Error Handling

We make use of an "intermediate selector" to control when the data fetching happens.

Intermediate Selectors

We create a new selectorFamily that composes functionality on top of our existing editProperty selectorFamily.

Selector Composition

Atom Effects

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.

Atom Effects - Basics

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.

Atom Effects with Atom Families

We look at how to sync Recoil state to and from an API using Atom Effects.

Async Atom Effects

We look at how to avoid making an API call for each atom initialised in an atom family.

Optimising API Calls

We look at how to prevent onSet from being called when the atom is first initialised.

Unnecessary onSet calls

When should you use an Async Selector and when should you use an Atom Effect?

Intermediate Selectors

We make use of an "intermediate selector" to control when the data fetching happens.

Sign up or log in to watch