Reusing App State in React Native with Recoil

Rate this content
Bookmark

A group of volunteers all over the world is working on React and React Native apps for the ADHD America program (non-for profit organization). In our work we use Recoil - quite a new React state management tool that looks quite promising. I'll show how we use it in both apps - for web and for mobile and explain why we decided to try it.

24 min
25 Oct, 2021

Video Summary and Transcription

Recoil is a minimal and easy-to-learn state management library for React and React Native. It supports distributed and incremental state definition, React suspense, and provides hooks like useRecoilValue and useRecoilState. Recoil can be used in both React and React Native applications, allowing for easy reuse of state configurations. Testing Recoil is straightforward, with the ability to observe state changes and compare snapshots. Overall, Recoil is an experimental but promising alternative to Redux.

1. Introduction to Recoil and State Management

Short description:

Hello! Welcome to React Advanced. Today I will talk about using recoil in React and React Native. I will discuss the state management problem in React, the types of state, and the popular solutions for state management. Then I will explain the basics of Recoil, its usage in ADHD program, and testing Recoil atoms and selectors. We will also touch upon caching with Redux and GraphQL.

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.

2. Redux and Recoil Comparison

Short description:

What about Redux? Can recoil replace Redux? Recoil is a state management library for React. It's minimal, React-ish, and has an easy learning curve. It's a boilerplate-free API and supports distributed and incremental state definition. Recoil also supports React suspense.

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.

3. Introduction to Recoil and ADHD MyWay Application

Short description:

Recoil is a state management library for React. It's minimal, React-ish, and has an easy learning curve. It's a boilerplate-free API and supports distributed and incremental state definition. Recoil also supports React suspense. ADHD is a non-profit organization and project that helps students with ADHD to obtain education in a more proper way. Companies like Amazon have supported the ADHD America program. In our React application, we use recoil for state management. We can define atoms and selectors to manage the application state. Recoil provides hooks like useRecoilValue and useRecoilState to read and update the state. To use recoil, we need to wrap our application in RecoilRoot. Recoil also supports observing events using the RecoilObserver component.

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.

4. Recoil: State Management and Testing

Short description:

Recoil is a simple and powerful state management library for React and React Native. It provides selectors for reading and modifying state, supports synchronous and asynchronous operations, and integrates well with React suspense. Recoil can be used in both React and React Native applications, allowing for easy reuse of state configurations. Testing Recoil is straightforward, with the ability to observe state changes and compare snapshots. Overall, Recoil is an experimental but promising alternative to Redux.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn