Introduction

Continuing our series of episodes (posts) on leveraging the eco-system of React Native to build the mobile application we are discussing in this article statement management aspects.

In this article, We will present multiple state-of-the-art state management libraries.

What is State?

Before we dig more into state details lets first understand what is a state and why you need them at all in your app.

In an application, state is the interface between your data from any kind of backend or local change and the representation of this data with UI-elements in the frontend. State is able to keep the data of different components in sync because each state update will rerender all relevant components. State can be a medium to communicate between different components aswell.

State Management

Usually, any professional application contains multiple components. If your application is big, managing state across the multiple components in large numbers is the most complex thing you should plan carefully.

Managing state is obviously the hardest part of the application development. But not to worry as there are many libraries that are made available for state management at your perusal.

Context API

The Context API was added to React in version 16.3.0 earlier this year. The Context API React provides an internal solution for passing state to where it is needed and avoids the possibility of prop drilling.

Unstated

Unstated by Jamie Kyle is a state management library that uses the Context API internally.

Unstated is designed to build on top of the patterns already set out by React components and context.

Redux

The preceding libraries and API’s work very well but if you want to have control over what is happening and especially why something is happening in your application it can be hard to debug certain state updates. In this case, Redux may help you by forcing you to work in a certain form.

Redux is a predictable state container for JavaScript apps.

Which means, that you are able to reproduce each state update that has happened if you reapply the same actions to the Redux store.

When using Redux you are able to add middleware to your store. Redux Thunk is a middleware, besides Redux Saga and Redux Observable, that adds support for side-effects to Redux.

Apollo Link State

Apollo Link State by Peggy Rayzis from Apollo implemented a library for managing local state as well to avoid the necessity for using a state management library from above when managing the state from the GraphQL Server in your app. You do not even need to consume a GraphQL API to use the expressive query language. You can simply query and mutate your local application state. Check this article for more details in which she describes the crux of this library.

Mobx

Mobx isn’t as popular as Redux, but some consider it a preferable choice due to its basic philosophy and architecture. Mobx lets you store state (even in separation) in any data structure such as objects, arrays, and classes in cyclic data structures or references.

Reference:-

https://kentcdodds.com/blog/application-state-management-with-react