Hola amigos 👋 (I just finished a Duolingo Spanish lesson, as you can tell)

The complexity of your app grew consistently. To keep things organized, you split your code into small, reusable components. Now you have hundreds of them. It becomes more challenging to manage the state of your app. Multiple components, from all over the place, depend on the same data. You start extracting these shared data to the closest common parent, and from there you drill the data from one component to another, until it reaches the component that depends on that data. It quickly gets unmanageable, and you realize that...

You need global state management!

From your research on the topic "The best global state management library", you conclude that you need to integrate Redux. The only thing you remember about Redux is the time you took a course on React or React Native, and there was a module about Redux. At the time it felt pretty clear, but after a week, you knew as much about Redux as I do about Regex.

I cannot deny the popularity, the scale, and the maturity of Redux, but man it is overcomplicated. Actions, Action Creators, Reducers, Selectors, Saga, Thunk 🤯

An easier alternative is the Context API. It is easy to learn, it comes out of the box and it gets its job done. It is a great and easy solution that works well for small projects.

On the other hand, Context API was developed for things that do not change often (ex: theme, options, preferences). It is not very optimal when it comes to data that changes very often.

Then what is the alternative?

Recoil.js

​Recoil.js is an experimental library developed by the Facebook team with simplicity and compatibility in mind. It was developed specifically for React, and that makes it super easy to get started and integrate it into your React or React Native project. It feels native because they kept the API, semantics, and behaviour as Reactish as possible.

In recoil, there are 2 main building blocks: atoms and selectors.

Atoms are the shared state; individual units of the state.

Selectors are pure functions, that consume atoms (or other selectors), process the data, and return it. They are used to create derivative data.

Data flows from atoms through selectors down into React component.

Continue reading and learning more about recoil in this blog post with real project example. No, we are not going to build a Todo list app. We are going to build something more complex: Fantasy sports app with ability to see a list of players and build your own team.

Read more

​