**0**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: #### **What is recoil.js to React?** recoil.js is the state management library for React. Hence it can be used instead of usestate in your React Project. #### **How are they different from each other?** It seems like React ( global version of [**useState**](https://reactjs.org/docs/hooks-reference.html#usestate)) You can manage your state very easily. It has very simple concepts like [**atom**](https://recoiljs.org/docs/basic-tutorial/atoms) and [**selector**](https://recoiljs.org/docs/basic-tutorial/selectors). Very clean and simple working model. #### **Installation:** for npm package: npm install recoil for yarn package: yarn add recoil #### **Implementing State** 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 ( //... ); } ``` #### **Atom** 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 }); ``` #### **Selectors** 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; }, }); ``` #### **Using State:** There are two ways to get the declared state into our components. i.e. by useRecoilState or useSetRecoilState, useRecoilValue. #### **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}; } ``` #### **useRecoilState:** 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 (

Value of the state : {text}

); } ``` #### **useSetRecoilState:** 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 ); } ``` #### **Conclusion:** 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.

Configure recoil.js to your React project

Written ByYash VibhandikCEO, Bitontree

Published:19 June 2024

Share This Blog

Written ByYash Vibhandik
CEO, Bitontree