This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Yuya Hirano
Have you ever used a state management library called Recoil?
This is super useful and easy to understand.
This article explains the basics of Recoil.
Please click the Like button and Save button if you like this article.
What you will learn in this article
- RecoilRoot
- Atom
- Selectors
What is Recoil?
Recoil is a React state management library created by Facebook.
This is an experimental state management framework for React.
Not officially released yet.
RecoilRoot
To use Recoil, you need to enclose the outside of the target scope with a RecoilRoot component.
If you're enclosing the root component with a RecoilRoot component allows for global State management.
import React from 'react';
import { RecoilRoot } from 'recoil';
function App() {
return (
<RecoilRoot>
<CharacterCounter />
</RecoilRoot>
);
}
Atom
Atom is necessary for state management.
Atom set a unique ID for each Atom with key and an initial value with default.
export const textState = atom({
key: 'textState',
default: '',
});
Components that need to read from and write to an atom could use three way.
If you only want to get the value, you can use useRecoilValue.
If you only want to set the value, you can use useSetRecoilValue.
You can use useRecoilState () to both retrieve and update the state.
Here is how to use useRecoilState.
function CharacterCounter() {
return (
<div>
<TextInput />
<CharacterCount />
</div>
);
}
function TextInput() {
/* useRecoilState determines from which Atom to retrieve
the value by passing the Key specified in Atom as an
argument.*/
// [value, setValueFunction] = useStateRecoil(Key)
const [text, setText] = useRecoilState(textState);
const onChange = (event) => {
setText(event.target.value);
};
return (
<div>
<input type="text" value={text} onChange={onChange} />
<br />
Echo: {text}
</div>
);
}
Here is how to use useSetRecoilValue and useRecoilValue.
function TextInput() {
const text = useRecoilValue(textState);
const setText = useSetRecoilState(textState);
const onChange = (event) => {
setText(event.target.value);
};
return (
<div>
<input type="text" value={text} onChange={onChange} />
<br />
Echo: {text}
</div>
);
}
Selector
Selector can return values processed from Atom state, or process and update Atom state.
Like Atom, each Selector is assigned a unique ID using key.
The "get" function returns the processed value of the state, and the "set" function processes the state and updates it.
Each time Atom is updated, it is render.
const charCountState = selector({
key: 'charCountState', // unique ID (with respect to other atoms/selectors)
get: ({get}) => {
const text = get(textState);
return text.length;
},
});
function CharacterCount() {
const count = useRecoilValue(charCountState);
return <>Character Count: {count}</>;
}
Conclusion
Recoil can be used to manage values globally or only between specific components.
While Redux and others have complex syntax and take time to get used to, Recoil is simple and easy to use for state management.
ref: Recoil
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Yuya Hirano
Yuya Hirano | Sciencx (2023-02-06T07:34:04+00:00) Super useful a state management library “Recoil”. Retrieved from https://www.scien.cx/2023/02/06/super-useful-a-state-management-library-recoil/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.