DEV Community

Cover image for How to use Recoil Selectors in Nextjs
Next Dev
Next Dev

Posted on • Updated on

How to use Recoil Selectors in Nextjs

Welcome 👋, to this new blog post where I will teach you how you can use selectors in recoil for state management.

🤔Difference between Atoms and Selectors

Atoms are used to store a value. But selectors are used to getting or setting the value of an atom. In simple words, selectors help you perform complex logic for your website.

😁Situation

Let’s suppose I give you a project of making a currency converter. In this project, you need to have two inputs US dollars and Rupee. But the problem is how will you convert the US dollars to Rupee in recoil so that you can use values globally.

💡Solution

We can use selectors here. But how?

Step1: Setup your recoil.
Recoil State Management in Nextjs

Step2: Now make a new atom called usdAtom


Then come to your index.tsx file

Step3: Now make a new selector called rupeeSelector


Now you can enjoy the values

Whole Code:
GitHub - nextdev1111/selectors

Discussion (0)