Tutorial Recoil | React State Management 2022

This guide introduces Recoil, a React state management library created by Meta that is still experimental but open source. I show how to set up a simple posts app using Recoil to manage global state, replacing useState for shared state logic.

You’ll see how to create atoms, which are pieces of state shared across components, and how to use Recoil hooks like useRecoilValue and useRecoilState to read and update state. This is a practical intro for React developers looking for a minimal alternative to Redux or Context API.

What's inside

• Introduction to Recoil and its experimental status
• Setting up a new React app with Vite and installing Recoil
• Creating a Recoil root provider in the app entry point
• Defining atoms to hold shared state (post list state)
• Using useRecoilValue to read atom state in components
• Using useRecoilState to update atom state and handle posts
• Building components: PostList, PostItem, and PostCreator
• Managing state updates and rendering the posts list

Introduction to Recoil and its experimental status

Recoil is a minimalistic React state management library developed by Meta. It is still experimental and in beta, but already open source and usable. The library aims to provide similar functionality to Redux or Zustand but with simpler implementation and better integration with React.

I share my personal experience loving Recoil for extracting state logic cleanly and managing shared state with less boilerplate. It’s designed to work seamlessly with React hooks and lets you share state across components easily.

Setting up a new React app with Vite and installing Recoil

I start by creating a new React project using Vite with the command npm create vite@latest recoil-tutorial and select React with JavaScript. After the project is created, I install Recoil with npm install recoil.

This setup is fast and straightforward. I open the project in Visual Studio Code and run the development server to confirm the app works before adding Recoil.

Creating a Recoil root provider in the app entry point

To use Recoil, you need to wrap your app with the RecoilRoot provider. This is similar to Redux’s Provider. I import RecoilRoot from 'recoil' and wrap the main app component in main.jsx or App.jsx.

This provider makes the Recoil state available to all components inside it. You can place it at the root of your app or anywhere you want the shared state to be accessible.

Defining atoms to hold shared state (post list state)

Recoil introduces the concept of atoms, which are units of state that components can subscribe to. I create an atoms folder and define a postListState atom using Recoil’s atom function.

The atom has a unique key string ('postList') and a default value, which is an array of posts. For demo purposes, I add a default post with some text and a username. This atom will hold the list of posts shared across components.

Using useRecoilValue to read atom state in components

To read the value of an atom without updating it, I use the useRecoilValue hook. In the PostList component, I import useRecoilValue and the postListState atom, then call useRecoilValue(postListState) to get the current posts array.

I render the posts by mapping over this array and displaying each post’s content. This hook subscribes the component to atom changes so it re-renders when the state updates.

Using useRecoilState to update atom state and handle posts

When I want to read and write atom state, I use the useRecoilState hook. In the PostItem or PostCreator components, this hook returns a tuple with the current state and a setter function.

This lets me update the posts list by adding, editing, or deleting posts. The state updates propagate automatically to all components subscribed to the atom.

Building components: PostList, PostItem, and PostCreator

The app is structured with three main components:

• PostList: reads the posts atom and renders a list of PostItem components.
• PostItem: displays individual post content and could include edit or delete actions.
• PostCreator: contains an input and button to add new posts by updating the atom state.

This modular approach keeps UI and state logic clean and reusable.

Managing state updates and rendering the posts list

I demonstrate how to wire up the components so adding a post via PostCreator updates the postListState atom. The PostList automatically reflects the changes by re-rendering the updated posts.

This shows Recoil’s reactive state management in action, with simple hooks and atoms replacing more complex Redux setups.

Resources

CourseReact course

Master React fundamentals and state management with practical projects.

YouTubeReact State Management with Recoil

Watch the full tutorial video on using Recoil for React state.