Scribd
Upload
83 views12 pages

Recoil for React State Management

The document discusses state management in React using the Recoil library. Recoil is an alternative to Context API and Redux for managing global state in React apps. It introduces the concept of atoms to store state values outside of components. Atoms can be defined and accessed from any component without prop drilling. The document recommends installing Recoil via NPM and explores key Recoil concepts like RecoilRoot, atoms, useRecoilState, useRecoilValue, useSetRecoilState and selectors. It provides an example of rendering text based on the value of a count atom.

Uploaded by

Aditya Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
83 views12 pages

Recoil for React State Management

The document discusses state management in React using the Recoil library. Recoil is an alternative to Context API and Redux for managing global state in React apps. It introduces the concept of atoms to store state values outside of components. Atoms can be defined and accessed from any component without prop drilling. The document recommends installing Recoil via NPM and explores key Recoil concepts like RecoilRoot, atoms, useRecoilState, useRecoilValue, useSetRecoilState and selectors. It provides an example of rendering text based on the value of a count atom.

Uploaded by

Aditya Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

7.

2 | Context, State
management , recoil

Repo for today - https://github.com/100xdevs-cohort-2/week-7


Context
Let’s you teleport state values to distant children
Helps you get rid of prop drilling
Yesterday, we did the Context API
Yesterday, we did the Context API

context.js

App.jsx
Problem with context?
Doesn’t x re-rendering, only xes prop drilling
fi
fi
7.2 | Context,
State management, recoil
State management using Recoil

What is state management

A cleaner way to store the state of your app


Until now, the cleanest thing you can do is use the Context API.
It lets you teleport state

But there are better solutions that get rid of the problems that Context Api has
(unnecessary re-renders)
State management using Recoil

Recoil

A state management library for React


Written by some ex React folks (I think)

Other popular ones -


1. Zustand
2. Redux
State management using Recoil

Recoil

Has a concept of an atom to store


the state

An atom can be de ned outside the


component

Can be teleported to any component


fi
State management using Recoil

Recoil

npm install recoil


State management using Recoil

npm install recoil

Things to learn -
RecoilRoot
atom
useRecoilState
useRecoilValue
useSetRecoilState
selector
State management using Recoil

npm install recoil


Things to learn -
RecoilRoot
atom
useRecoilState
useRecoilValue
useSetRecoilState
selector

Let’s say I ask you to render


IT IS EVEN
if the current count is even

You might also like