Reusing App State in React Native with Recoil

Hello, welcome to React Advanced. My name is Sergey 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 several latest years I work 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 components 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 components 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 a 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. And another part is 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 don't 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 I 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? I would like to mention that a lot of times when a new approach for state management appears, then a lot of people say, OK, 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, 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 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. So the advantage of Recoil is that we can write our state management system as a distributed one. So atoms can be distributed. It usually helps with code splitting, for example. And also Recoil supports React suspense. I think it's quite a 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 your applications, I think you already used Redux and library like Reselect. So this is quite a similar feature. What about ADHD? ADHD is a non-profit organization and project. It was started by students, they actually had ADHD. They have 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 that they have. In ADHD MyWay we develop React and React Native, so mobile application. And I asked to show just 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 develop mobile application and mobile application will be used mostly by children. And young generation likes mobile applications. So we decided to implement exactly mobile application. And interesting moment that initial design was created on hackathons by students as well. So 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 should use the key and key should be unique one. And another one property is a default property where we have initial login state. It can be any object of a 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 recoil hook useRecoilValue. We use useRecoilValue 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 useRecoilState. It's quite similar like React useState hook. By the way, to use recoil atoms and hooks, you need to wrap your application into recoil root. Recoil root will provide all required context 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 use useRecoilValue hook, we not only read the value from the state, but we also subscribe to the state changes. And when this state is 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 recoil observer component and actually it's our experiment about using observer pattern to notify all observers that some action was happened. So it's quite simple. We create a basic subject where we attach all observers and we use notify method in this basic subject. And when 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, they represent the derived state. So 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, they 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? So 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 recoil value to get the data and to subscribe to the state updates. This same thing, sure thing that we need to use recoil root 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 athons and also selectors, everything that we need for login, authorization stuff and all of that. 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 quite an 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 athon, I mean recoil state within the React component context, then you can use recoil observer pattern. It's not a part of recoil utilities. You can create such a simple recoil observer and then you can use it like this and you just change the state and then you can observe what state was changed and what was changed and all of that. 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 a really good alternative. Recoil is very easy to test within React context and outside. And actually I really like this tool and it's possible that in a few years it really can replace Redux. What do you think about this? I have shared a few links here so you can check recoil documentation. It's really nice and authors of their libraries also created some introduction videos about recoil. And in the recoil.js resources you can find a link to quite interesting resource about recoil. So there was a course created about it and it's free. Also I'm sharing a link to ADHD America program and a link to my GitHub where I plan to add the simplified code. It will be the same functionalities that we use in React and React Native in ADHD, but of course it will be simplified and all data that is related to our project will be removed because we don't provide our code for public at least yet. Thank you.