5 Types of States in React

Nov 13, 2021
3 min read

You can check out the latest Stack Overflow survey here, this survey shows how 69.28% have found love but 30.72% show dread. To get more command over React, the most important thing is to understand how to handle the state. If you have all the concepts about states like Logical, Form, Server, Browser and Navigation then your interest in understanding React will increase and you will get command to a great extent.

Logical State

A logical state gives you the store that encapsulates business logic information. This information is necessary to meet the main functional requirement. From the store, you get predefined data with schema so that you can implement actions like save, delete, update and view. This stored information is needed globally throughout the app.

An example of a logical state can be given from an e-commerce site like Amazon. You go through its details such as quantity, total amount, delivery person, delivery fee, and much other information performing the main business use-case like delivery and products order are stored in a logical state.

React state management libraries are available for medium or large scale applications. For small scale applications, React context comes in handy. And both of these maintain the logical state globally.

Server State

It handles server-side data offered by an HTTP request. The information contains data and request states such as fetching, loading and error. An E-commerce site has a lot of information about products, user profiles, and promotions. And the status of the request, such as load, is required to show the loader when data is retrieved from the server, and an error toast of isError is to be shown to the user if the request fails.

Libraries such as Apollo Client, React Query, SWR and urql are used to manage the server states.

Form State

Multiple types of data come inside any form. The 'form state' is used to hold the data. Let me focus on the state of form constructors like Input fields, Checkbox, Select, Radio Button, and Toggle switch. And the state is limited to a few components only. You will be well versed with the checkout & payment form which is on an e-commerce website. Within this product quantity, shipping, card details, address, all these things are all managed by the form state. All these form fields require the state to create an order. A post request is sent to the server. Libraries such as React Hook Form, React Final Form, and 'Formik' are mostly used to manage form state.

The navigation state comes when it comes to the path and parameters of the URL. It shows the status of a page so that better user-friendly navigation can be done. These states are most useful for producing impeccable search functionality. To maintain search status, URLs will have search words, sort and filter options. Paths in URLs represent a component hierarchy so that you can fully understand the app.

You will notice that an e-commerce site uses 'Navigation Position' to navigate nested pages using paths and also takes advantage of search functionality via parameters.

Browser State

For the details of current users, browser status comes. It reads only when the component is mounted. These states are stored locally in key-value pairs.

When it comes to long-term storage, a local storage object is used. The data persists even when the window/tab is closed. And the data is also shared across all browser windows/tabs. Its size is 5/10MB depending on the browser.

On the other hand, there is session storage for ephemeral data, which is directly related to a browser window. In this case, the stored data will not be persisted when the window/tab is closed. Nor is it shared with other windows/tabs. Its size is also 5/10MB depending on the browser.

Cookies are used for older browsers, which save data with an expiration time.

It is necessary for an e-commerce site to keep a copy of important data with it. The details of unauthorized users such as shopping carts are saved in any browser storage and after the authentication process, the data is synchronized with the database. There are other types of details, such as preferences, tokens, and other details, that also persist for application-wide use in the browser.

Browser APIs such as sessionStorage, localStorage and cookies are used to handle browser states.

Conclusion

It becomes easier when you categorize the state of the application in Server, Form, Logical, Navigation and Browser as above. And it's also a clear way to visualize the data used in the application.

It handles the mentioned library states efficiently to leverage app performance and also for improved code readability.