{"id":57003,"date":"2024-01-08T20:28:43","date_gmt":"2024-01-08T14:58:43","guid":{"rendered":"https:\/\/www.oneclickitsolution.com\/blog\/?p=57003"},"modified":"2024-09-06T11:36:00","modified_gmt":"2024-09-06T06:06:00","slug":"recoil-state-management-library-in-react","status":"publish","type":"post","link":"https:\/\/www.oneclickitsolution.com\/blog\/recoil-state-management-library-in-react","title":{"rendered":"Recoil: State Management Library in React"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

Recoil is an open-source state management library. It provides an easy way to share the state between all components of a react application. It is very easy to set up, unlike redux which does not need boilerplate code to set up. It provides a data-graph flow that flows from atoms i.e. our shared states to selectors i.e a pure function and then into the react component.<\/p>\n\n\n\n

Atoms<\/h2>\n\n\n\n

Just like redux, Recoil provides a global state, called Atoms. Atoms are a single source of truth that contains all states of an application. All components of our react application<\/a> can access them and can subscribe to changes made on them.<\/p>\n\n\n\n

Selectors<\/h2>\n\n\n\n

Selectors are pure functions that take atoms or other selectors as input and return output based on the changes in input.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

npx create-react-app my-app<\/strong><\/p>\n\n\n\n

As Recoil is a state management library for React, First we need to create a react app.<\/p>\n\n\n\n

\"React-Native-Developer-CTA2\"<\/a><\/figure>\n\n\n\n

Installation<\/h2>\n\n\n\n

Recoil is very easy to set up. Following are the steps to get started with recoil setup in your react application<\/a>:<\/p>\n\n\n\n

Run the following command to install the latest stable version of Recoil<\/a> if you are using npm.<\/p>\n\n\n\n

npm install recoil<\/h3>\n\n\n\n

Or if you are using yarn then<\/p>\n\n\n\n

yarn add recoil<\/h3>\n\n\n\n

Or if you are using bower then<\/p>\n\n\n\n

bower install –save recoil<\/h3>\n\n\n\n

Now wrap your root component in RecoilRoot just like below<\/p>\n\n\n\n

import React from \"react\";\nimport { RecoilRoot } from \"recoil\";\nimport Counter from \".\/counter\";\n\n\nfunction App() {\n return (\n   <RecoilRoot>\n     <Counter \/>\n   <\/RecoilRoot>\n );\n}\n\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
Now, In your counter component we will write the logic for counter application using Recoil.<\/p>\n\n\n\n
First we will create an atom in our counter component that will contain the counter state.<\/p>\n\n\n\n
const counterState = atom({\n key: \"counterState\",\n default: 0,\n});\n<\/code><\/pre>\n\n\n\n
We have given the name counterState to our atom. A unique key counterState given to it and set the default value to 0.<\/p>\n\n\n\n
useRecoilState<\/strong> hook is used to write and read the atom. useSetRecoilState<\/strong> hook is used to write to the atom while useRecoilValue<\/strong> hook is used to read it.<\/p>\n\n\n\n
const Counter = () => {\n const [counter, setCounter] = useRecoilState(counterState);\n const count = useRecoilValue(countIncrementState);\n\n\n const onIncrementClick = () => {\n   setCounter(counter + 1);\n };\n\n\n return (\n   <div className=\"App\">\n     <h3>Recoil Demo<\/h3>\n     <button onClick={() => onIncrementClick()}>Increment<\/button>\n     <p>{`Current Counter State is: ${counter}`}<\/p>\n     <p>{`Next Counter State is: ${count}`}<\/p>\n   <\/div>\n );\n};\n<\/code><\/pre>\n\n\n\n
Now we have created a selector to transform the value of a state.<\/p>\n\n\n\n
const countIncrementState = selector({\n key: \"counterIncState\",\n get: ({ get }) => {\n   return get(counterState) + 1;\n },\n});\n<\/code><\/pre>\n\n\n\n
After wrapping up the entire code in a file the final code will look like this<\/p>\n\n\n\n
import React from \"react\";\nimport { atom, selector, useRecoilState, useRecoilValue } from \"recoil\";\n\n\nconst counterState = atom({\n key: \"counterState\",\n default: 0,\n});\n\n\nconst countIncrementState = selector({\n key: \"counterIncState\",\n get: ({ get }) => {\n   return get(counterState) + 1;\n },\n});\n\n\nconst Counter = () => {\n const [counter, setCounter] = useRecoilState(counterState);\n const count = useRecoilValue(countIncrementState);\n\n\n const onIncrementClick = () => {\n   setCounter(counter + 1);\n };\n\n\n return (\n   <div className=\"App\">\n     <h3>Recoil Demo<\/h3>\n     <button onClick={() => onIncrementClick()}>Increment<\/button>\n     <p>{`Current Counter State is: ${counter}`}<\/p>\n     <p>{`Next Counter State is: ${count}`}<\/p>\n   <\/div>\n );\n};\n\n\nexport default Counter;<\/code><\/pre>\n\n\n\n
Below is the output for the above code.<\/p>\n\n\n\n
\"recoil<\/figure>\n\n\n\n
\"recoil<\/figure>\n\n\n\n
Benefits of using Recoil<\/h2>\n\n\n\n