Welcome 👋 guys, to this new tutorial blog post. In this blog post, I will teach you how to do state management in the nextjs with the help of recoil.
Atoms
In this tutorial, I will teach you how to use atoms from recoil in nextjs.
Think of atom-like a news report, whose work is to take news from one area to the whole nation.
🫠Situation
Let’s suppose, today you have to build a modal for your website. An example of a modal is shown 👇
But how will you make it?
We can use useState hooks for that, but useState will not be efficient for this purpose. So, you need to use Recoil in this situation.
Step1: Download Recoil
yarn add recoil
Step2: Go to the _app.js file and wrap components with RecoilRoot:
Step3: Make a atoms folder in the root directory. Then make a atoms.ts file in that folder.
Step4: Make atom for modalSwitch:
Step5: Use this atom in modal.tsx for making modal functional.
Step6: Use this atom in index.tsx for making modal functional.
Now you can try it
If any error comes, feel free to join the discord server:
https://discord.gg/hN4Wc5VR4M
Thanks for reading this blog post.
Top comments (1)
This apparently doesn't work you have Client-Side only component that relies on Recoil.