State Management with Recoil

The basic element of recoil is an “Atom” . Atom manages the state of each component. The creation and use of atom is pretty easy, just like the useState hook.
An Atom is initialised by calling the function atom

Let’s Code

For the Demo we are going to add a item to TodoList and read the todolist from atom using ‘useRecoilValue’

let’s make a file to handle recoil states todolistrecoil.js

we read the list from and map it to show the list.

Now the TodoListCreator looks something like this…

we handle the input in react state and on submit , we use ‘useSetRecoilState’
get the previous todo’s and append new item and set as new state.

Do not forget to call these components in your App.js

An !Important thing before it works, you have to wrap your application with a Provider in the same way Redux or Context are doing.

We have a state where we want to derive from one or more states,
this can be done using selectors in recoil.
for ex: we want to show the stats of the todo list
completed:the number of tasks completed in the list
pending:the number of tasks not completed in the list

here’s the code for selectors
Firstly we get the todoliststate then we compute and get a different state derived from the todoliststate

todoliststat.js

we access the state value useRecoilValue

There’s Plenty more to it like fetching async requests and much more which are covered in docs.
Recoil is still experimental and should not be used in Production.
But this seem to be very promising and I hope that soon, we will be able to made easier to maintain states in our react apps and make our life easier!

Thank you for reading!

Related posts:

Immediately following the death of a loved one, the bereaved party needs the support of family and friends. That person doesn’t necessarily need you to be there 24/7 because if I’ve learned one thing…

The goal of devconnected is to provide fresh and interesting articles about open source, DevOps, system administration (for Windows, or Linux), monitoring solutions and time series databases. Note …

There are literally hundreds of tactics out there about how to drive more traffic to your site. Obvious ways like using paid ads, which work, but many of us don’t have marketing budgets to even…