Reusing App State in React Native with Recoil

Hello! Welcome to React Advanced. My name is Sergiy and today I would like to talk about using recoil in React and React Native. A little bit about me. I have been working as a web developer more than 10 years now, I work with different technologies in different industries, I work with backend and frontend technologies, but in several later years I worked with React and I really like it. I am really a fan of Javascript and different Javascript frameworks, but as I said I like React the most.

And what is the plan for today's talk? I would like to start from sharing some moments about State Management problem in React and popular solutions for state management. Then I would like to share just basics of Recoil and how it works, then I would like to share a little bit about ADHD program and why we need Recoil there, and also I would like to talk a little bit about testing Recoil atoms and selectors.

So about state management problem in React. In all our applications we have state and we all know that we usually have some problems managing it. So why we have those problems? I think that we have some problems because we have different types of state, we have a lot of state libraries and approaches and we also have different platforms like React and React Native. So this makes the problem a little bit complex. At first I would like to talk about types of state. So we are on the same page. Why I would like to talk about this because depending on the type of state that we are dealing with right now, we can select a better tool that we need right now for this type of state. So the simplest state is a component's local state. And I think that we all know how to manage this. Today, we can manage local state in class-based components and also in functional components, thanks to Hooks. So the next type of state is component's shared state. When we have some data that we need to use in different components, then we usually select a parent and we move or lift up shared state to this component and then we pass the data via props. Also we can have an app's global state. Global state is some data that we have on a global level for our application and that we use in different components on different levels in our application. Part of this state can be a UI state. UI state is a state that we use for storing data that describes what and how we would like to display. For example, maybe what theme we use, what colors, what fonts, and what sizes of these fonts. Okay, and another part is the cache. Cache is quite important, but when we need the cache, most of our applications, they do API calls. And when we retrieve some data, usually we want to cache it to improve user experience. When we navigate between tabs, or when we navigate between different pages of our applications, very often we can catch the data and not fetch it again and again. And by the way, I put Redux and GraphQL here as some possible solutions, because Redux and GraphQL are really good for caching. And by the way, as far as they know here in React Advanced, we also will have a talk about GraphQL cache, and I'm sure it will be an awesome one.

What about Redux? And I would like to mention that a lot of times when new approach for state management appears, then a lot of people they say, so, okay, so this time Redux will die. The same was when context API was introduced. But Redux is quite alive, and frankly speaking, I really like Redux, and I'm checking how it evolves. And I've been preparing a talk about Redux and how it evolves, Redux toolkits and all of that.

But what about recoil? Can it be a replacement for Redux? And React team, they say yes. So they think that recoil can replace Redux totally. And as far as I know, even creator of Redux, Danny Bramow, you know, yeah? So he usually says that he doesn't like Redux. But I do. But I also like recoil. So what about recoil? Recoil is a state management library for React. So it's another state management library. But also, it's a set of utilities for state management. So recoil provides us a bunch of useful hooks in different utility functions.

Please note that recoil is an experimental set of tools. So it wasn't officially released yet, but as far as I know, it's already used in production, I think, very often. Yeah, so what are the advantages of recoil? They say that it's minimal and React-ish. So it works very well with React and it's minimal. But don't think that the library is small. The library, comparing even with Redux, the library itself is quite big. But minimal means that we need just a little bit amount of code to start to work with recoil. It has an easy learning curve. So we can start just from atoms and selectors and that's all. It's so easy. Also it's a boilerplate-free API. When people say they don't like Redux they usually say that you need to write a lot of code to support Redux state. And also recoil is distributed and incremental state definition. Also advantage of recoil is that we can write our state management system as a distributed one. So items can be distributed. It usually helps with code splitting for example. And also recoil supports React suspense.

I think it is a fairly famous feature that React team is developing for several years. So what is recoil? I created this simple formula. So recoil is atoms plus selectors plus hooks plus utilities. What are the atoms? Atoms contain the source of truth for our application state. Comparing with Redux, it's like slices of our state. And what are the selectors? Selectors represent a piece of derived state. Those who used to use Redux in their applications, I think you already used Redux and library like reselect. So this is quite similar feature.

What about ADHD? ADHD is a non-profit organization and project. It was started by students, they had ADHD and they decided that students that have ADHD they need some help to obtain education in a more proper way. So they decided to do something with this. And companies like Amazon, actually Amazon Web Services, they decided to help students with this. So a group of volunteers all over the world, all together with professional managers and developers from AWS, we all help ADHD America program to develop ADHD MyWay application that should help children to obtain education in a more proper way and to resolve issues they have. In ADHD MyWay we develop React and React Native, so mobile application, and I asked to show a few slides from the application itself, and by the way, here we can see a dashboard that parents or teachers will use, and also we developed mobile application, and mobile application will be used mostly by childrens, children, sorry. And young generation likes mobile applications, yeah, so we decided to implement exactly mobile application. And interesting moment that our design, initial design was created on Hackathons by students as well.

In our React application we started to use recoil. And here how we can use recoil in our login view state, so we can see that login view state is just a simple atom. Atom Key should be a unique one. And another one property is a default property, where we have initial login state. It can be any object of the state slice that you create for your application. So here we can see some fields like username, password, username error and all that. Then we can use this state by leveraging recoils hook use recoil value. We use use recoil value when we need just read the state and we don't want to change it. When we want to change the recoil state then we use use recoil state. It's quite similar like react use state hook. By the way to use recoil, recoil atoms, and hooks you need to wrap your application into recoil root. Recoil root will provide all required contacts for all our components and so our components will be able to connect and subscribe to the store updates. By the way here when we have when we use use recoil value hook we not only read the value from the state but we also subscribed to the state changes and when this state when it's updated then all components that were subscribed to updates they also will be updated. It's cool What about observing events? Here you can see that we added RecoilObserver component and actually it's our experiment about using a observer pattern to notify all observers that some action has happened.

It's quite simple. We create a basic subject where we attach all observers and we use notify method in this basic subject and we notify any observer that some action has happened but only if observer has the same topic. What is the topic? The topic is just a simple string, you can see it here, and it's very similar like Redux action types.

Selectors. Of course, one of the great things of Recoil is selectors, so we don't need additional third-party library, we can use selectors out of the box, and as I said earlier, selectors represent the derived state. We can just read state or we can read and modify some data, so we can filter something. Also, a great thing here is that the selectors can be synchronous and asynchronous, and it's a really nice thing, and it also plays very well with React suspense.

What about React Native app? Here you can see our login view state for React Native, and it's totally the same that we use in React application. This allows us to reuse all state configuration for login, registration, forgot password features and all of that. And then we can use it easily in our navigation, for example. You can see that we also use useRequireValue to get the data and to subscribe to the state updates. The same thing that we need to use recoil route here as well.

Okay before we move on to testing recoil I would like to share a little bit about reusing state management, in this situation state management with recoil in React Native. I had quite good experience moving shared state features into a separate library but it was with Redux and now we have an idea to split the same I mean to extract the state management that we have in React and React Native applications into a separate library and we already started to work on this so we create a library that will contain all recoil athens and also selectors everything that we need for login authorization stuff and all of that yeah so at least we extract a piece of state about those features that I mentioned but we also continue to look what we can reuse as well about testing.

Testing recoil is a quite easy thing so first of all please remember to use recoil root in your tests because of course you need to wrap your component or application with recoil root because without this you will have an error and first of all if you need to test some react component so you test recoil atom i mean recoil state within the react component context then you can use recoil observer pattern pattern it's not a part of recoil utilities you can create such similar simple recoil observer and then you can use it like this and you just change the state and then you can observe what that state was changed and what was changed and and sometimes you need to test your selectors outside of react components context so you can use snapshot unstable. It wasn't available in the first versions of recoil but now it's available and you can generate snapshots and then you can compare old state with new state.

So a small summary. Recoil is really nice tool but it's still experimental. Recoil can be used in react and react native. Earlier Redux was a very famous tool for react native applications but today I think we already have really good alternative. Recoil is very easy to test within react contexts and outside. And actually I really like this tool and it's possible that in a few years it really can replace Redux.