Hello Developers,
This article was written when I was reading and learning to use Recoil for a project. I know about Redux, but Recoil is much more used in Open-Source and is gaining popularity, so this is a small article with shortcuts to use Recoil.
For more information: https://recoiljs.org/
Installation:
For npm: npm install recoil
For CDN: <script src = "https://cdn.jsdelivr.net/npm/recoil@0.0.11/umd/recoil.production.js"></script>
To use Recoil, you need to make every component use Recoil.
//App.js
import React from 'react'
import { RecoilRoot } from 'recoil'
import ChildComponent from './component/ChildComponent'
const App = () => {
return (
<RecoilRoot>
<ChildComponent />
</RecoilRoot>
)
}
Atoms are the smallest units of state in Recoil, serving as fundamental variables. This article guides you through creating and using an Atom, providing a clean structure for managing state variables within React components.
Setting Up Your Atom:
Organize your state-related code in a 'utils' file for better project structure management.
//Atom.js
import { atom } from "recoil"
export const counterAtom = atom({
key: 'counterAtom', //A unique identifier for the Atom, ensuring uniqueness across your application.
default: '12' //The initial value of the Atom, is set to '12'. Adjust based on your desired initial state.
});
Now, as you have created an atom or variables, how to access them?
There are multiple ways.
Let's go🚀
//Component.js
export const Component = () => {
const xAtom = useRecoilValue(xAtom); //only access to value
const [yAtom, setyAtom] = useRecoilState(yAtom); //same as useState
const setZAtom = useSetRecoilState(zAtom); //on set function, no access to the current value, but can change using set variable
return (
<>
<p>xAtom</p>
<button onClick={() => setyAtom(yAtom+ 1)}>yAtom</button>
<button onClick={() => setZAtom(c + 1)}>zAtom</button>
</>
)
}
But what if I want to combine two atoms?
- One way is to do that in component [useMemo]
- Other is to use a selector
//Atom.js
import { atom, selector } from "recoil"
export const xAtom = atom({
key: 'xAtom',
default: 10
})
export const yAtom = atom({
key: 'yAtom',
default: 11
})
export const sum = selector({
key: 'sum',
get: ({get}) => {
return (
xAtom.xAtom +
yAtom.yAtom
)
}
})
How to accept and store backend calls
import { atom, selector } from "recoil"
import axios from "axios";
export const information = atom({
key: 'information',
default: selector({
key: "informationSelector",
get: async () => {
const res = await axios.get("somerandomsite");
return res.data
}
})
})
What is Atom Family
- When you are making Todo, how will store multiple todo, creating different atom for different todo?
- No, for this Atom Family is here
- Let's have an example
//Atom.js
import { atomFamily } from "recoil"
const TODOS = [{
id: 1,
title: "Go to GYM",
description: "Hit the gym"
}, {
id: 2,
title: "Go to Office",
description: "Code something new"
}]
export const todoAtomFamily = atomFamily({
key: "todoAtomFamily",
default: id => {
return TODOS.find(x => x.id === id)
},
});
//App.js
import {todoAtomFamily } from './Atom'
const App = () => {
return (
<RecoilRoot>
<Main />
</RecoilRoot>
)
}
const Main = () => {
<Todo id={1} />
)
}
function Todo({id}){
const currentTodo = useRecoilValue(todoAtomFamily(id));
return (
<>
{currentTodo.title}
{currentTodo.description}
</>
)
}
Selector Family
//Atom.js
import { atomFamily, selectorFamily } from "recoil";
import axios from "axios";
export const todosAtomFamily = atomFamily({
key: 'todosAtomFamily',
default: selectorFamily({
key: "todoSelectorFamily",
get: (id) => async ({get}) => {
const res = await axios.get(`https://sum-server.100xdevs.com/todo?id=${id}`);
return res.data.todo;
},
})
});
//App.js
const [todo, setTodo] = useRecoilState(todosAtomFamily(id));
That's all about it. Hope you get an idea of what recoil is and how to use it.
I know the Recoil selector family is a little difficult and hard to understand, but it also used less.
Thanks
Harsh Chandwani
Follow for more: https://twitter.com/heyy_harshh
Top comments (0)