Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Official Recoil Tutorial Code Along - React Web Development

Name: Official Recoil Tutorial Code Along - React Web Development
Rating: 4.1 (18 reviews)

Industry Web Development & React For All Levels - Recoil For Building Complex Apps - JavaScript - Project Examples

Created byLiam Sloane

Last updated 2/2025

English

English [Auto],

What you'll learn

Understand the fundamentals of Recoil and React state management. Students will learn what Recoil is, why it's popular, and how it compares to others like Redux
Be able to build and use Recoil atoms and selectors. Students will learn how to create and use Recoil atoms and selectors to manage state in React apps
Be able to persist Recoil state to local storage. Students will learn how to persist Recoil state to local storage
Be able to use advanced Recoil features to build scalable state management logic. Students will learn how to use advanced Recoil features such as atom families
Build impressive and scalable Web Applications with React and Recoil
Build impressive and scalable Mobile Applications with React Recoil
Be job interview ready with declarative popular javascript programming solutions for app development

Course content

4 sections • 51 lectures • 6h 28m total length

What Is Recoil - Introduction and Key Concepts5:25
Explore recoil as a scalable state management library for React, compare it to Redux and context API, and learn key concepts like selectors and derived state through a code along.
Why Top Companies Are Choosing Recoil2:02
Understand why recoil js matters in modern react apps and why big companies like Coinbase, Discord, Google, and Facebook use recoil.
What is Recoil - DAG as a State Management Graphical Solution6:48
Learn how recoil uses a directed acyclic graph to manage state with atoms and selectors, enabling efficient UI updates and straightforward subscribe/unsubscribe patterns with stores, unlike Redux.
Join Our Online School0:55
What A Basic React Application Component Tree Looks Like3:24
See how React uses functional components to build pages, charts, tables, and forms with a virtual DOM for rendering, and explore when Redux or Recoil helps manage app state.
Why Recoil Fundamentally Helps Large Applications Scale1:46
Discover how Recoil addresses state management in large React apps by avoiding prop drilling and multiple global state pieces, offering scalable structure beyond context and legacy Redux patterns.
Maintainability and scalability with Recoil6:33
Recoil acts as a state management solution orthogonal to the React tree, lifting state into atoms and using selectors to derive pure state, improving maintainability and scalability with code splitting.
What Exactly is Recoil JS - Summary So Far5:53
Explore how recoil provides a boilerplate-free api with an orthogonal state structure, enabling local and global state via atoms and selectors, with reducers, derived data, and persistence.
What Is An Atom In Recoil5:04
Explore how atoms in Recoil are uniquely updatable, subscribable units of state that can be shared across components, enabling synchronized state in React apps.
Quick Review On Atoms1:34
Explore how Recoil atoms initialize state with the atom function, require globally unique keys for debugging, and set a default value for the initial state.
Introduction to useRecoilState in The Context of JSX and The React Renderer8:42
Learn how to read and write shared font size state with useRecoilState, using atoms in Recoil to reflect changes across components via JSX and the React renderer.
What are Selectors in Recoil4:45
Learn how recoil selectors act as pure functions that derive data by transforming atoms into new atoms, enabling derived data like filtered carts and total prices.
How Selectors work with Examples9:09
Explore how recoil selectors derive derived data from atoms using functions to transform to-do list atom into a filtered view, with code showing use of get and use recoil value.
Memoization and general Optimizations with Recoil5:43
Explore how recoil selectors derive data from atoms with pure, memoized functions. Learn how memoization enables cross-component reuse and faster updates by caching results and recomputing when inputs change.
Recoil Conceptual Code Review Part I5:34
Review recoil concepts by building a to-do list with atoms and selectors, deriving data and implementing dynamic filters for a reusable React state management approach.
Recoil Conceptual Code Review Part II6:32
Learn how recoil uses atoms and selectors with use recoil value to manage and derive state through a filter to do list selector and filter bar.

Quick Note0:14
What is Create React App - Full Download Review11:09
Create a React app from scratch using npx and explore the project setup. Review the default structure, dependencies, and build process, including code splitting and development versus production workflows.
How The React Development Server Works7:02
Start the react development server and view the app at localhost 3000. The server compiles React code into memory, renders to the dom, and updates instantly as you edit.
How do Functional Components Work in React5:34
Explore how functional components work in React, converting to arrow functions, returning elements, and using props and destructuring for basic state management in a modular page.
What Are Functional Components and Passing Props in React Basics6:11
Learn how to create functional components, pass props from parent to child, destructure props, and respect their immutability to render dynamic content in a React app.
How Local State Works With useState Hooks in React9:48
Explore local state with the useState hook in a React functional component, toggling visibility via an onClick handler, using immutable state updates, JSX, and conditional rendering in a recoil-ready app.
Building Multiple Components and passing Props in React - Long Form15:01
Learn to refactor a React app by turning a button into a separate component, lifting state to the home page, and using props to drive a modular, reusable component tree.
Cleaning Up The File Architecture and Component Modules in The Project App9:00
Architect a modular React app by extracting button and title into separate components, refactoring index.js and app.js, and embracing Recoil for shared state across pages.

React Basic Challenges Pre Recoil8:51
learn how to integrate recoil with react to manage state in a to-do app, moving from local state and prop drilling to reusable components and libraries that lift out state.
Create Your First Atom in Recoil11:50
learn to create a recoil atom for a to-do list, defining a key and default state with id, text, and is complete, and explore lifting state for global access.
Rendering Atoms and Hooking Up Recoil To React11:09
Explore rendering a to-do item with recoil by installing recoil, creating a to-do list atom, and reading state with use recoil value inside a React component.
Event Handling With Local State And Atoms17:49
Utilize Recoil atoms and use Recoil state to manage a to-do list, building a to-do item creator with an input and add task button for event-driven state updates.
Connecting Local and Recoil State Together For Rendering Updates in React11:48
Connect local input state to Recoil atoms to add to-do items, update the to-do list with the spread operator, and render updates in a React app, including id and isComplete.
Styling Code For the Next Video0:18
Styling A Recoil App with CSS7:51
Improve a recoil app’s user interface by applying a reusable CSS library, styling headers, containers, and buttons with flex layouts to enhance UI and UX.
Mapping Through Props and Components with Recoil and React11:55
Turn atom into a component and map the to do list into a to do item, using recoil and props to render container with max height, min height, and overflow.
Challenge - Fix A UX Bug10:22
Fix a UX bug by clearing the input after adding a task in the recoil todo app. Use local state and setInputValue to reset the input, improving user experience.
Mapping Indexes From Recoil Base State13:42
Toggle to-do item completion by updating the recoil base state with useRecoilState and the to-do list atom, locating each item with findIndex to edit the correct entry.
Slicing and Updating Object State in React and Recoil14:45
Toggle item completion in a React and Recoil to-do list by updating a specific item’s is complete flag without mutating state, using slice and spread to rewrite at index.
JSX ClassNames and Implicit Coersion6:47
Apply a conditional className in JSX to reflect completed tasks in a recoil-based to-do app. Learn to explicitly convert booleans to strings to avoid implicit coercion and improve readability.
Editing and Updating State Values in Recoil12:21
Edit and update to-do items in Recoil by targeting atom state with input values, using onChange handlers, and immutably updating items via spread and slicing.
Function Naming and React Course Challenge5:57
Learn to name functions clearly and implement a delete item feature in a recoil-based app, then refactor for a modular, maintainable workflow.
Refactoring React and Recoil Code Demonstration8:14
Learn to refactor React and Recoil code by extracting a replace item at index function to simplify to-do list updates and better handle atoms and orthogonal state.
Refactoring Exercise and Solution in React10:17
Refactor toggle item completion and delete items into shared utility functions in React Recoil. Boost readability and maintainability with function hoisting and concise, reusable code.

Starter Code0:06
Adding Some Extra Styles To Our App And Upcoming Selector Discussion5:34
Improve the app's look with refined css and a new add button, then explore selectors and recoil to create encapsulated, reusable state features beyond basic hooks.
Problem Solving Orders of Operation - Thinking Above Junior Level As A Developer9:25
Develop a dynamic search filter in the Recoil to-do app using atom state and the main and to-do item components to show completed tasks.
Solution - Thought Processes For Building Features With Recoil6:35
Develop problem solving and independent thinking to guide building features with recoil. Learn to manage the to-do item, update state, and use selectors for derived data.
Writing The Filter Component Shell And Visualizing Selectors In A Recoil App8:46
Build the filter dropdown shell for a to-do app using recoil to visualize selectors and derive the derived state from atomic state.
Writing A Filter Selection In Recoil And Rendering The Derived State9:00
Explore using Recoil selectors to derive and filter state. Build a completed to-do list selector, wire it to the atom, and render filtered results.
Switching Local State to Atom State for Selectors with Multi Atoms11:01
Learn to switch local state to recoil atom state using multiple atoms, create a filter option atom, and build selectors that derive data from all atoms for dynamic filtering.
Building A Selector Conditionally and Performance Algorithmic Decision Making6:57
Pass the filter option atom into a selector to return the full to-do list or a filtered subset, and compare array filter performance to alternatives.
Updating Component and Iterations for Dynamic Scaling with Selector13:12
Explore updating components and iterating toward dynamic scaling with a filtered to do list selector in recoil, including refactoring names, conditional rendering, and basic styling.
Persisting Data and Formal Course Conclusion10:20
Learn how to persist to-do data in a React app with the Recoil persist library, using persist atom and effects to store state in the browser storage.
Final Code Solution

Requirements

No programming experience needed. JavaScript and React recommended! :)

Description

Welcome to the complete Official Recoil Tutorial Code Along Course from Scratch and learning about the library that's going to blow your mind when it comes to making web and mobile applications in React for the better!

Recoil is the state management library for React built by Facebook that has quickly become popular due to its simplicity, power, and performance.

Move over Redux - let Recoil takeover.

Key Focus: Upgrading Skills, Mastering React and Recoil, and Excelling in React Interviews

Recoil is as powerful of a solution as Redux for scalable apps with a much more intuitive and low barrier access point to learn and implement especially if you come from a React background (they go hand in hand like peanut butter and jelly). Recoil is easier to learn and use, and it provides a number of features that make it easier to build and maintain complex state management logic and I can't wait to teach you how to use it!

This course is a comprehensive Recoil tutorial that will teach you everything you need to know to start using Recoil in your React applications. We will build an app from scratch as a code-along, and you will learn how to use Recoil to manage state in a scalable and efficient way. In this comprehensive and in-depth course, you will embark on an immersive journey through the Recoil official documentation, simplifying key concepts for practical solutions, and equipping yourself with the knowledge and expertise to excel as a React developer.

Why am I the right teacher for you?

My name is Clarian, I've worked as a head engineer with top tech and entertainment companies around the world for over 15 years, tech developer, Co-founder for million plus businesses built from scratch, consultant in the space for billion plus tech companies, and I am fully passionate and dedicated to what I teach. My courses and programming is published world wide including on highly regarded computer science publications such as Safari O'Reilly. I've been working very hard to make the switch into being a full time online programming instructor.

From Junior to Senior: Progressively Advanced Topics

Starting from the junior level, we will guide you through a carefully designed learning path, ensuring that you build a strong foundation. We will cover the fundamentals of React and Recoil, gradually progressing to highly advanced topics that will prepare you to tackle complex real-world projects.

A Deep Dive into the Recoil Official Docs and Beyond

No stone will be left unturned as we dive deep into the Recoil official documentation. We will meticulously explore each concept and technique, giving you a comprehensive understanding of Recoil principles, best practices, and advanced features.

Course Content

In this course, you will learn:

What Recoil is and why it is so popular
How to install and configure Recoil in your React applications
How to create and use Recoil atoms
How to create and use Recoil selectors
How to persist Recoil state to local storage
How to use advanced Recoil features to build scalable state management logic

Who Should Take This Course

This course is ideal for React developers who want to learn how to use Recoil to manage state in their applications. It is also a good choice for developers who are looking for a more efficient and scalable alternative to Redux.

Why Learn Recoil

Here are some of the reasons why you should learn Recoil:

Recoil is easy to learn and use. It has a simple API that is similar to React's.
Recoil is powerful and flexible. It can be used to manage state in any type of React application, from simple to complex.
Recoil is fast and efficient. It is designed to scale to even the most demanding applications.
Recoil is popular and well-supported. It is used by many large companies, and it has a large and active community.

Recoil vs Redux

Recoil is a newer state management library than Redux, but it has quickly become popular due to its simplicity, power, and performance.

Here are some of the advantages of Recoil over Redux:

Recoil is easier to learn and use. It has a simpler API and fewer concepts to learn.
Recoil is more flexible. It can be used to manage state in any type of React application, from simple to complex.
Recoil is faster and more efficient. It is designed to scale to even the most demanding applications.
Recoil is popular and well-supported. It is used by many large companies, and it has a large and active community.

Course Topics

Introduction to Recoil
- What is Recoil?
- Why is Recoil so popular?
- Recoil vs Redux
Getting Started with Recoil
- Installing and configuring Recoil
- Creating and using Recoil atoms
Recoil Selectors
- What are Recoil selectors?
- Creating and using Recoil selectors
Persisting Recoil State
- Persisting Recoil state to local storage
Advanced Recoil Features
- Managing state in complex applications
- Using Recoil with multiple components
Building a Recoil App
- Code-along: building a simple Recoil app

Conclusion

By the end of this course, you will have a deep understanding of Recoil and how to use it to build scalable and high-performance React applications.

Topics Include:

Recoil
React
State management
JavaScript
Web development
Mobile development
Scalable applications
High-performance applications
Official tutorial
Code-along

Call to Action

Enroll in this course today and learn how to use Recoil to build scalable and high-performance React applications!

Who this course is for:

Junior developers looking to build a strong foundation in React and advance their React skills.
Intermediate React developers seeking to master Scalable Code and excel in high-level React and Recoil interviews.
Senior React developers aiming to stay updated with modern concepts and industry requirements.
React developers interested in migrating from traditional Redux to Recoil for improved productivity.

Official Recoil Tutorial Code Along - React Web Development

What you'll learn

Explore related topics

Course content

Introduction16 lectures • 1hr 20min

Create A React App From Scratch - REACT PROPS AND COMPONENTS FOR BEGINNERS8 lectures • 1hr 4min

Build An App with Recoil From Scratch16 lectures • 2hr 44min

Building Dynamic Atom State Features With Recoil11 lectures • 1hr 21min

Requirements

Description

Who this course is for: