{"id":59435,"date":"2024-09-18T11:30:00","date_gmt":"2024-09-18T06:00:00","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=59435"},"modified":"2026-02-03T17:28:37","modified_gmt":"2026-02-03T11:58:37","slug":"recoil-for-reactjs","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/recoil-for-reactjs\/","title":{"rendered":"Recoil for ReactJS: A Complete Tutorial on Modern State Management"},"content":{"rendered":"\n

You must already know about ReactJS which is a popular backend framework. There is a specific library called Recoil that helps in managing and sharing of components. <\/p>\n\n\n\n

That is what we are going to see in this article, an in-depth analysis on Recoil for ReactJS. So, without further ado, let us get started!<\/p>\n\n\n\n

What is Recoil for ReactJS?<\/strong><\/h2>\n\n\n\n

Recoil is a state management library for React that provides a simple and efficient way to manage the global state. It allows you to share state across components without the need for prop drilling or complex context providers. <\/p>\n\n\n\n

Prerequisites<\/strong><\/p>\n\n\n\n

Before you begin, ensure you have the following:<\/p>\n\n\n\n

– Basic knowledge of React.js<\/a>.<\/p>\n\n\n\n

– Node.js and npm installed on your machine.<\/p>\n\n\n\n

– A React project setup (you can create one using Create React App).<\/p>\n\n\n\n

Step-by-Step Guide to Install Recoil for ReactJS<\/strong><\/h2>\n\n\n\n

Step 1: Install Recoil<\/strong><\/h3>\n\n\n\n

First, you need to install Recoil<\/a> in your React project. Open your terminal and navigate to your project directory, then run the following command:<\/p>\n\n\n\n

npm install recoil\n\nor if you are using Yarn:\n\nyarn add recoil<\/code><\/pre>\n\n\n\n
Step 2: Set Up RecoilRoot<\/strong><\/h3>\n\n\n\n
Recoil requires a `RecoilRoot` component to be wrapped around your application. This component provides the context for Recoil state management.<\/p>\n\n\n\n
Open your `src\/index.js<\/strong>` (or `src\/index.tsx`<\/strong> if you are using TypeScript<\/strong>) file and wrap your main application component with `RecoilRoot<\/strong>`:<\/p>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\nimport { RecoilRoot } from 'recoil';\n\nReactDOM.render(\n  <RecoilRoot<\/strong>>\n    <App<\/strong> \/>\n  <\/RecoilRoot<\/strong>>,\n  document.getElementById('root')\n);<\/code><\/pre>\n\n\n\n
Step 3: Create Atoms<\/strong><\/h3>\n\n\n\n
Atoms are units of state in Recoil. You can think of them as pieces of state that can be read from and written to from any component.<\/p>\n\n\n\n
Create a new file called `atoms.js`<\/strong> in your `src` directory:<\/p>\n\n\n\n
\/\/ src\/atoms.js\nimport { atom } from 'recoil';\n\nexport const textState = atom({\n  key: 'textState', \/\/ unique ID (with respect to other atoms\/selectors)\n  default: '', \/\/ default value (aka initial value)\n});<\/code><\/pre>\n\n\n\n
Step 4: Use Atoms in Components<\/strong><\/h3>\n\n\n\n
Now that you have created an atom, you can use it in your components. You can read and write to the atom using the `useRecoilState<\/strong>` hook.<\/p>\n\n\n\n
Here\u2019s an example of a simple component that uses the `textState<\/strong>` atom:<\/p>\n\n\n\n
\/\/ src\/TextInput.js\nimport React from 'react';\nimport { useRecoilState } from 'recoil';\nimport { textState } from '.\/atoms';\n\nconst TextInput = () => {\n  const [text, setText] = useRecoilState(textState);\n\n  const handleChange = (event) => {\n    setText(event.target.value);\n  };\n\n  return (\n    <div<\/strong>>\n      <input<\/strong> type=\"text\" value={text} onChange={handleChange} \/>\n      <p<\/strong>>You typed: {text}<\/p<\/strong>>\n    <\/div<\/strong>>\n  );\n};\n\nexport default TextInput;<\/code><\/pre>\n\n\n\n
Step 5: Create a Component to Display the State<\/strong><\/h3>\n\n\n\n
You can create another component to display the current state of the `textState` atom:<\/p>\n\n\n\n
const TextDisplay = () => {\n  const text = useRecoilValue(textState);\n\n  return <p<\/strong>>Current text: {text}<\/p<\/strong>>;\n};\n\nexport default TextDisplay;<\/code><\/pre>\n\n\n\n
Step 6: Combine Components in App<\/strong><\/h3>\n\n\n\n
Now, you can combine the `TextInput` and `TextDisplay` components in your main `App` component:<\/p>\n\n\n\n
\/\/ src\/App.js\nimport React from 'react';\nimport TextInput from '.\/TextInput';\nimport TextDisplay from '.\/TextDisplay';\n\nconst App = () => {\n  return (\n    <div<\/strong>>\n      <h1<\/strong>>Recoil Example<\/h1<\/strong>>\n      <TextInput<\/strong> \/>\n      <TextDisplay<\/strong> \/>\n    <\/div<\/strong>>\n  );\n};\n\nexport default App;<\/code><\/pre>\n\n\n\n
Step 7: Run Your Application<\/strong><\/h3>\n\n\n\n
Now that everything is set up, you can run your application to see Recoil in action. In your terminal, run:<\/p>\n\n\n\n
npm start\n\nor\nyarn start\n<\/code><\/pre>\n\n\n\n
Open your browser and navigate to `http:\/\/localhost:3000<\/strong>`. You should see an input field where you can type text, and the current text will be displayed below it.<\/p>\n\n\n\n
Additional Points: Choose based on your preferences<\/strong><\/h2>\n\n\n\n
Redux : <\/strong><\/p>\n\n\n\n
For a more complex project, Redux might be the better choice due to its mature ecosystem, centralized state management, and extensive middleware support.<\/p>\n\n\n\n
Recoil:<\/strong><\/p>\n\n\n\n
For a more complex project, Recoil<\/strong> might be the better choice due to its flexible atom-based state management, fine-grained control over re-renders, and seamless integration with React\u2019s Concurrent Mode.<\/p>\n\n\n\n
In case, you want to learn more about these frameworks and gain in-depth knowledge on full-stack development, consider enrolling for HCL GUVI’s certified Full-stack Development Course<\/a> that teaches you everything from scratch and make sure you master it!<\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
Congratulations! You have successfully set up Recoil in your React.js project. You can now manage the global state easily without the complexity of prop drilling or context providers. Recoil also offers advanced features like selectors and asynchronous state management, which you can explore as you become more comfortable with the library.<\/p>\n\n\n\n
Feel free to expand on this example by adding more atoms, selectors, and components to suit your application’s needs. Happy coding!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
You must already know about ReactJS which is a popular backend framework. There is a specific library called Recoil that helps in managing and sharing of components. That is what we are going to see in this article, an in-depth analysis on Recoil for ReactJS. So, without further ado, let us get started! What is […]<\/p>\n","protected":false},"author":41,"featured_media":64329,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294,737],"tags":[],"views":"5909","authorinfo":{"name":"Arun Kumar","url":"https:\/\/www.guvi.in\/blog\/author\/arun-kumar\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2024\/09\/recoil_for_react_js_1x-300x116.webp","jetpack_featured_media_url":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2024\/09\/recoil_for_react_js_1x.webp","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/59435"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=59435"}],"version-history":[{"count":11,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/59435\/revisions"}],"predecessor-version":[{"id":90050,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/59435\/revisions\/90050"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/64329"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=59435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=59435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=59435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}