Introduction to State Management in React

- Nasir Zaidi

What is React?

React is a JavaScript library created by Facebook. It was released in 2015 and is used to build user interfaces. It's a simple way to create dynamic web pages by combining HTML, CSS and JavaScript.

React works by defining components and then connecting them together using props. ReactJS is mainly utilized to build visual, interactive websites and web apps.

What is State?

State represents the value of a dynamic properties of a UI component at a given instance. Whenever the state of the component is changed, the component will re-render itself by calling the render() method along with the new state.

What is State Management in React?

Before we proceed to state management in React, let’s consider a simple real-life example by visualizing a clock component. The clock component displays the date and time of a particular city at that specific instance. As the current time will change every second, the clock component should maintain the current date and time in it’s state.

As the state of the clock component changes every second, the clock’s render() method will be called every second and the render() method will show the current time using it’s current state.

Similarly, user Interface elements are the basic building blocks of any website. These elements or ‘controls’ guide users as they navigate through a website. Input controls allow you to input information or text in the website, whereas navigational components.

Similarly, navigational controls such as sliders and icons help you surf the website smoothly. Below is an example of UI controls:

Thus, ‘State Management’ refers to managing the state of these UI controls. In this technique, the state of one UI control like is dependent on the state of other UI controls.

For instance, a state managed UI control such as a button will be in the enabled state when input fields have valid input values and the button will be in the disabled state when the input fields are empty or have invalid values.

State management is a way to communicate and share data across the components of an application. It provides a data structure representing the application state that you can read and write.

As your application grows, it is important to be particular how your state is organized and how the data flows between UI controls. Redundant or duplicate state is a common source of bugs and reduces the website’s performance.

In order to overcome this problem, you can use a React state management library. In React, state is a JavaScript object that is a part of a component and can be changed based on the events or user actions. You can also call the state a memory of a component.

State Management Libraries in React

Recoil

Recoil is one of the latest React State Management libraries developed by the Engineering team at Facebook in 2021. With over 18k stars on GitHub, Recoil aims to provide “several capabilities that are difficult to achieve with React alone”.

It provides a global state so all components in a React application can share states easily and it is minimal compared to Redux with no boilerplate code setup needed.

Recoil provides a data-graph that flows from shared states into React components. Recoil’s working model is centered around two functions:

Atoms. They are the units of global state. They are updateable, subscribable and can be created at run-time. Components can access and subscribe to changes made to them. Atoms can be used in place of React local component state. If the same atom is used from multiple components, all those components share their state.

Selector. It is a pure function that accepts atoms or other selectors as an input. Components can subscribe to selectors, and will then be re-rendered when the selectors change. Selectors are also used to calculate derived data that is based on state.

Installation

How is Recoil Useful?

• Simplicity. With a React like approach, Recoil gives a boilerplate-free API where shared state has the same simple interface as React local state. You can make any app with Recoil just like other state management libraries

• Concurrent Mode. Recoil is compatible with concurrent mode, which is a set of features that allows React apps to stay responsive and adjust according to a user's network and device capabilities.

• Code Splitting. Code splitting means to split the code in components which are then loaded in parallel, in order to maintain apps especially larger ones. In Recoil, state definition is incremental and distributed, which allows for code-splitting and eases app maintainability.

MobX

A simple, scalable and open-source state management tool for React, MobX was launched in 2016 and is one of the oldest libraries around. Its GitHub repository has around 26k stars and has been used by over 110,000 people, making MobX one of the most popular libraries.

In order to understand the working of MobX, take a look at the image below:

An Action is triggered by an Event and the Action is the impetus to the observable state. You can thus infer that Actions modify the state of the entire application. As seen in the flow-chart, MobX supports uni-directional data flow. Moreover, these automatic updates are the side-effects of the Action.

In MobX, you create a JavaScript class with a makeObservable call inside the constructor that is your observable store. Then you declare properties and methods of the class. The components subscribe to this observable store to access the state, calculated values, and actions.

Installation

Why use MobX?

• Optimal Rendering. All data uses and modifications are tracked at runtime, which builds a dependency tree that stores all relations between the state and output. This ensures that computations depending on your state run only when required.

• Ease of Use. MobX ensures minimal code and a boiler-plate free code. In order to update a record field, you can simply use a normal JavaScript assignment and the reactivity system will detect all your changes and spread them out to where they are being used. No special tools are required when updating data in an asynchronous process.

• Unopiniated. MobX is unopinionated and allows you to manage your application state outside of any UI framework. This makes your code portable and easily testable.

XState

XState is a state management library for React. It is unique from other state management libraries like Redux in the sense that XState does not necessitate the use of a global store or having a provider to wrap the entire application.

It is a simple way to manage the state of your application, and separate logic from the view so that you can write clean, readable code with no repetition. Xstate coordinates the local state, manages the global state performantly, and consumes data from other hooks.

It works well with bringing finite state machine patterns into React applications. Finite state machines help address state transitions in a simplified and sorted way.

Installation

To connect XState with React, type the following in your command prompt:

Why use XState?

With nearly 22k stars on GitHub and over 160k users, XState is advantageous for the following reasons:

• Increasing application smoothness. XState makes the application reliable and smooth by reducing the number of states and easing the transition of moving between states

• Create a Global Store. XState can substitute prominent state management libraries like Redux by allowing your global state to be visualized and visually edited. XState allows you to create a global store, dispatch events to it, and subscribe to only the pieces that are needed.