Configuring Recoil.js in your React project involves setting up the state management library Recoil to manage the state of your application. Recoil offers a flexible and efficient way to manage the global state and makes it easy to share and update data across components. Here's a step-by-step summary of how to configure Recoil.js in your React project:
1.What is recoil.js to React?
2.How are they different from each other?
3.Installation
4.Implementing State
5.Atom.
6.Selectors
7.Using State:
8.useRecoilValue
9.Conclusion:
recoil.js is the state management library for React. Hence it can be used instead of usestate in your React Project.
It seems like React ( global version of useState)
You can manage your state very easily.
It has very simple concepts like atom and selector.
Very clean and simple working model.
for npm package: npm install recoil
for yarn package: yarn add recoil
So basically there are two concepts introduced in Recoil i.e. atom and selectors.
import React from 'react';
import { RecoilRoot } from 'recoil';
const App = () => {
return (
<RecoilRoot>
<Component1/>
<Component2/>
//...
</RecoilRoot>
);
}
An atom represents a piece of state. Atoms can be understood as something that can be read from and written to from any component. Components that are associated with this atom will automatically be re-rendered once the atom is updated.
const someState = atom({
key: 'someUniquekey', // unique for recoil internal reasons
default: '', // initial value of state/atom
});
A selector represents a piece of derived state. You can think of this as the output of passing state to a function that modifies the given state in some way.
const charCountState = selector({
key: 'charCountState', // Have to Be Unique
get: ({get}) => {
const text = get(someState); //pass a atom in this function
return text.length;
},
});
There are two ways to get the declared state into our components. i.e. by useRecoilState or useSetRecoilState, useRecoilValue.
Whenever you want to use the value of the state but don’t want to update it in the whole component.
import { useRecoilValue } from 'recoil';
const CharacterCount = () => {
const count = useRecoilValue(charCountState);
//Name of the Atom or selector
return <>Character Count: {count}</>;
}
Whenever you want to use the value of the state and also want to update it globally through the component itself.
import { useRecoilState } from 'recoil';
const TextInput = () => {
const [text, setText] = useRecoilState(someState);
const onChange = (event) => {
setText(event.target.value);
};
return (
<div>
<input type="text" value={text} onChange={onChange} />
<br />
Value of the state : {text}
</div>
);
}
Returns a setter function that can be used asynchronously to change the state. The setter may either be passed a new value or an updater function that receives the previous value as an argument.
import { useSetRecoilState } from 'recoil';
const TextInput = () => {
const setText = useSetRecoilState(someState); //CHANGE HERE
const onChange = (event) => {
setText(event.target.value);
};
return (
<>
//OTHER LOGIC
</>
);
}
We have successfully implemented the global state using Recoil. Although this was a small part, it is enough to use it in your projects. It is a developing project with many changes being present explicitly in syntax or under the hood. So I wouldn’t really suggest using it in big projects. One can always try new things and in my opinion, if you like Hooks then you would love using Recoil.
Thank you for reading!305, Zodiac Square, Ahmedabad, India, 380054
Toronto, Ontario, Canada, M5V 3L9
20 Emma Place, Clifton, NJ, USA 07013