DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to persist the data in atoms with local storage using recoilΒ persist.
Next Dev
Next Dev

Posted on

How to persist the data in atoms with local storage using recoilΒ persist.

Welcome friends πŸ‘‹. In this blog post, you will learn how to persist the data in local storage in recoil.

For people, who understand Hindi

πŸ‘οΈSituation

Suppose, you are making a to-do list website where people can type todos and todos will be stored in the local storage. But the question arises, how can you persist the data with local storage.

😍Solution

Let’s take an example πŸ‘‡


In the πŸ‘† example, there is an atom(β€˜todosAtom’) that is responsible for storing all the todos.

Now, we can use effects_UNSTABLE


Here, we are using **effects_unstable **which runs when the atom is initialized or changed.

But, unfortunately, you will encounter an error if you are using an SSR framework like nextjs.

πŸ€”Then how to solve it?

yarn add recoil-persist
Enter fullscreen mode Exit fullscreen mode

recoil-persist



Now, all of your work would be done with the help of the recoil persist.

If you have any questions, feel free to ask hereπŸ‘‡:
Join the Next Dev Discord Server!

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.