Preface

Welcome to the wonderful world of React Native apps! Thanks to this technology, you can have your own native app up and running in a matter of minutes. Don’t worry if this is the first time you are hearing about React Native. Basic knowledge of JavaScript will be enough to hit the ground running. Together, we will go over the important concepts of React and React Native and we will learn about the React Native ecosystem, setup, and tooling. By the end of Chapter 4, Styling and Populating the Funbook App, you will have a fully functioning social-media clone app in your hands.

This is where stuff starts getting interesting. Our app has a few API endpoints and needs to manage data objects across multiple components and screens. This situation is very common in medium-sized and large applications. Because of this, there are many solutions to this common problem. A lot of developers use battle-tested and renowned open-source libraries, such as Redux or MobX. Others look for innovative ideas and land on XState or Jotai for their projects. Others still use built-in React functionalities or concentrate on data fetching instead of state management with the help of React Query. Throughout this book, we will put ourselves in the shoes of all of these types of developers. We will pick one specific functionality from the app – the like button with the list of liked images – and we will try out the open source libraries listed here, one by one.

When we emerge victorious at the end of this book, you will have a very good understanding of different ways to manage states in React Native apps. I hope you will also have an idea of what you prefer, and why. Redux, MobX, XState, Jotai, and React Query were created to solve the same problem, but their creators approached it very differently. I also hope you will simply enjoy this book as much as I’ve enjoyed writing it.

Who this book is for

This book is meant for beginners in the React and React Native world. It covers basic topics pertinent to software development with ReactJS. Even if you are knowledgeable about basic React solutions, you may be a newbie to MobX, XState, Jotai, or React Query, which means this book is meant for you as well.

What this book covers

Chapter 1, What are React and React Native?, will start by going over a brief history of web development to achieve a better understanding of the ideas behind the creation of React and React Native. We will also talk about ReactJS concepts, and we will get acquainted with React Native code.

Chapter 2, Managing State in a Simple React App, will talk about some real-life problems that React developers face. We will concentrate on robust state management for medium-sized and large applications. Since React itself was not created with the tools to manage global states, we will look at modern React solutions and other state management strategies.

Chapter 3, Planning and Setting Up the Funbook App, will get into coding for real here! We will create our very own app, a social media clone app, called Funbook. We will learn about popular tools, especially Expo, and the React Native ecosystem.

Chapter 4, Styling and Populating the Funbook App, will be all about making the app we have on our hands look good. We will also populate it with some data so that we can work on a project that’s close to how a real production app may work.

Chapter 5, Implementing Redux in Our Funbook App, will explore the tumultuous history of Redux and then go over configuring Redux and Redux Toolkit in the app. Once the dependencies are set up, we will move on to implementing the like button and the list of liked images with the help of Redux. This chapter includes responses from a short conversation I had with the main Redux and Redux Toolkit maintainer – Mark Erikson, also known by his Twitter handle @acemarke.

Chapter 6, Using MobX as a State Manager in a React Native App, will return to the bare React Native app we created in Chapters 1 to 4, and this time, we will add MobX and MobX-State-Tree into the mix. We will start with how this library came to be, and then move on to configuring it in the Funbook app. Once we’re ready, we will use it for the liked images list and the like button. This chapter includes responses from an exchange I had with the MobX-State-Tree maintainer – Jamon Holmgren.

Chapter 7, Untangling Complex Flows in React Native Apps with XState, will go deeper into some advanced math problems, as XState is based on advanced mathematical concepts. When we have a handle on them, we will move on to configuring XState in the Funbook app and using it for the liked images functionality.

This chapter includes responses I received from the creator of XState – David Khourshid, better known on the internet as DavidKPiano.

Chapter 8, Integrating Jotai in a React Native App, will return to the bare Funbook app again, and this time, we will implement the youngest state management library in this book: Jotai. We will learn about its concepts, configure it, and use it for the liked button and liked images list functionality. This chapter includes responses from a conversation I had with the creator of Jotai, Daishi Kato.

Chapter 9, Using React Query for Server-Side - Driven State Management, will look at the problem of state management in a very new way: maybe we don’t need state management libraries at all. Maybe all we must do is effectively manage data fetching. In order to test this hypothesis, we will install, configure, and use React Query, also known as TanStack Query.

Chapter 10, Appendix, will take a bird’s eye view of everything that we have learned about in the book. I have also included a few common job interview questions that are pertinent to the topic of state management in React Native apps.

To get the most out of this book

You will need to install Expo on your computer. All code examples have been tested using Expo 44 on macOS, but they should work with future version releases.

Additional setup instructions are detailed in Chapter 3, Planning and Setting Up the Funbook App.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

This book represents the state of the most well-known state management libraries in 2022. I encourage you to try new and lesser-known solutions on your own, as new libraries are published every day.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Simplifying-State-Management-in-React-Native. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/wv4Mk.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “export const ListOfAvatars = () => {“.

A block of code is set as follows:

Import { Text } from 'react-native';
const Welcome = () => {
  return <Text>Hello, World! </Text>;
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

return (
    <View style={{ paddingTop: 30 }}>
      <FlatList
        data={arrayOfAvatars}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>

Any command-line input or output is written as follows:

$ yarn add react-query
$ expo start

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “If you want to see your app on your phone, you’ll find the QR code to scan in the Expo Go app right here. “

Browsing through sample data

You can see the example data used in the app whenever you’d like.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Simplifying State Management in React Native, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

1. Scan the QR code or visit the link below

https://packt.link/free-ebook/978-1-80323-503-5

2. Submit your proof of purchase
3. That’s it! We’ll send your free PDF and other benefits to your email directly