cft
Become a CreatorSign inGet Started

Redux Vs. Recoil: Why I’ve Moved from Redux to Recoil for State Management

This blog explains why React developers need to move from Redux to Recoil.


user

Bewar Salah

4 months ago | 2 min read
Follow

redux-vs-recoil-why-ive-moved-gmiuf

Recoil.js VS Redux.jS

This blog explains why React developers need to move from Redux to Recoil.

Introduction

Managing application state is always a difficult task. React does not come with its own state management tool until recently. React developers added a new state management API, called Context API.

It has a lot of limitations and it stores only one value. If we need to have multiple states, then we need to have multiple context providers. This makes the React component tree nested into each other.

It makes the code hard to read. Also managing a complex state with Context API is a difficult task for developers.

Using third-party state management library, like Redux has some limitations. Setting up the boilerplate of Redux is complex. There needs a lot to write to set up React with Redux. Managing complex applications with a huge state is also difficult with Redux.

Recoil (the new state management library for React.js) solves these issues. It is easy and minimal to set up. It considers state as atoms. The atoms can be used in any React component.

For the sake of distinguishing Recoil with Redux, I have created the same app with both libraries. Recoil takes up to 56 lines of code with linting while the same app with Redux takes up to 100 lines of code.

What is Recoil?

Recoil is a state management library for React.

  • It is easy to set up.
  • It works and thinks like React.
  • It uses hooks to retrieve states and update states.
  • It uses pure functions to query asynchronous data.

Atom

It stores the source of truth (state). It can be any of JavaScript types like objects, arrays, or simple numbers.

  • An atom is defined by passing an object with key and default properties to atom function.

Recoil atom

  • The state (stored in atoms) can be used in any React component.

using Recoil value

  • The state (stored in atoms) can be updated! Note that, we used useRecoilState hook instead of useRecoilValue.

updating Recoil state

Recoil Root

In order to use UsersList component which uses a Recoil value, we need to wrap it inside RecoilRoot component from the Recoil library.

Conclusion

As a React developer, I shifted to Recoil because it is very simple to use. It does not require a complex boilerplate to set up state management. It uses hooks to read or update the state inside components. It is worth trying.

There are more about Recoil to figure out, like selectors (the derived state). To find more about Recoil please go to the Recoil official documentation which covers more concepts.

More content at plainenglish.io

Upvote


user
Created by

Bewar Salah

Follow

Software Developer


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles