Watch the original course announcement

Watch on YouTubeThe player loads when you press play.

I taught this course in 20 lessons, originally 3 hours and 31 minutes of video. I’ve kept the notes and examples here as part of my teaching archive. Recoil is no longer maintained, but you can still find the course in Recoil’s official learning resources.

The project

We build a drawing app inspired by Excalidraw. Each shape can be edited independently, so there are practical questions to answer. Where should its state live? Which values can we calculate, and what should the editor show while it waits for data?

We start with atoms and selectors, then use families for collections of elements. Later lessons cover data fetching, error handling, composing selectors, and saving state with atom effects.

The original lesson videos are currently unavailable. You can read the lesson descriptions below, browse the drawing app code, and watch the public YouTube tutorials.

The curriculum

Intro

  1. 01Course Intro1:48
  2. 02Overview of Recoil3:46
  3. 03Project Setup3:06

The Basics

  1. 04Atoms - Basics9:29
  2. 05Selectors - Basics15:09

Atom & Selector Families

  1. 06Atom Families11:55
  2. 07Atom Families 217:09
  3. 08Selector Families20:35

Async Selectors

  1. 09Data Fetching - Basics17:58
  2. 10Data Fetching - Advanced10:25
  3. 11Data Fetching in our Design Tool24:13

Patterns

  1. 12Error Handling8:53
  2. 13Intermediate Selectors10:03
  3. 14Selector Composition12:48

Atom Effects

  1. 15Atom Effects - Basics8:08
  2. 16Atom Effects with Atom Families7:38
  3. 17Async Atom Effects13:24
  4. 18Optimising API Calls6:51
  5. 19Unnecessary onSet calls3:45
  6. 20Atom Effects vs Async Selectors4:05

Originally published on Learn Recoil.