React state management beginner to pro

State Management in React

State management in React is a very popular and crucial part of React. That’s because passing data between components, code organization, dynamic UI updates, and handling side effects play a major role in any scale of a software application. OK, hold on if you have no idea what I’m talking about, no problem. What are these state management methods, and how can we choose the best-suited one for our application? Let’s get a step-by-step understanding of that.

What is state? 🤔

The state is any data that describes the current behaviour of an application.

Keeping the state in an application is not specific to React. Even though use Angular, Vue or any other component-based UI library or framework keeping track of the current state is a must.

Ways to keep state in a React application

In a React application we have to keep the state mainly in two ways;

1. UI State: The type of state that results from user interaction with specific UI elements, such as alerts, authentication, and modals. This state vanishes with each browser refresh. It is simple to retrieve and synchronous. This UI state can be taken into 02 categories.

• Local state: Data specific to a particular component and its behaviour.
• Global state: Data specific to the whole application or a few components and its behaviour.

2. Server state or Cache state: This refers to data that originates from the server and is stored on the client side for performance optimization purposes. It’s not strictly stated in the traditional sense, but rather cached data fetched from the server. Server state presents new challenges to deal with like Caching, dedupe requests, incremental fetching, mutations, outdated requests, synchronization of the data.

In this blog post let’s talk about the local and global state and later with another blog let’s cover up the server state of a React application.

How to maintain the state locally? 🤔

React itself provides some ways to maintain the state in a React functional component.

In function-based components, we can use the useState hook to maintain the local state. This state is only accessible inside that specific component. Obviously, that’s what local means😉.

Here is a simple example which explains the most commonly used hook in React😃 — useState.

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

export default Counter;

If you do not have any idea about useState and need more clarification just refer to this blog post.

[embed]Everything you need to know about useState hook React Hooks were introduced in React 16.8, which was released on February 16, 2019. If you like to use React or a React…blog.stackademic.com

Ok guys, now we have an idea of how we can maintain the state locally. Just think about a situation in which I need to pass my local state from one component to another child component. Obviously, to pass state to another component we have to use props and easily we can pass data to the child component. No worries at all guys.

import React from 'react';
import ChildComponent from './ChildComponent';

function Parent() {
  const [message, setMessage] = useState("Hello from Parent!");
  return (
    <div>
      <ChildComponent message={message} />  {/* Pass data as props */}
    </div>
  );
}

function ChildComponent(props) {
  return (
    <div>
      <p>The message from parent is: {props.message}</p>  {/* Access props */}
    </div>
  );
}

export default Parent;

If we explain this in a much simpler way;

Parent to child data passing using props

But imagine you have to pass data to a grandchild. That means then you have to pass data to two layers. That means you have to pass data from one component to another two times🥲. Annoying right? And this bullshit is known as prop drilling in React😂.

Parent-to-grandchild data passing using props

Then to overcome this problem we have to maintain a global state and pass data directly to the child components. No need to pass data as props.

If you need to implement the third approach, which means to maintain a global state, then how can we do that?

How to maintain the state globally? 🤔

To work with the state globally there are many options. Out of that;

• Context API — Built-in React feature for sharing data across components.
• Redux — Predictable state container for JavaScript applications, particularly useful for managing complex application states in React projects.
• Redux toolkit — Redux Toolkit (RTK) is an official add-on library for Redux that simplifies common tasks and reduces boilerplate code.
• Zustand — A small, fast, and scalable bearbones state management solution with a minimalistic approach.
• MobX — Simple, scalable state management.
• Jotai — Minimalistic state management library with an emphasis on simplicity and performance.

are somewhat popular choices out there? Yep, there are many more libraries which can be used to maintain the global state of a React application.

Ok, then there are tons of libraries, how can we pick one?

1. By considering the technical requirements. Ok, just imagine I have some kind of a legacy React application with React class components and now I need to go on with a state management approach. Then you won’t be able to use Zustand. Because Zustand uses a hooks-based approach and with class components, we won’t be able to use React hooks. Then it makes it impossible to use Zustand along with this project.
2. Depending on the development team and their expertise. If we take an example, you all know the software will be developed as a team. Some devs have years of expertise in some of the technologies in our teams. If the whole dev team knows about the React toolkit, and all the dev team likes to go with that state management solution, what is the point of going for another option (if there is not a big technical incompatibility)😅🙃.
3. Based on the Client’s requirements. We develop software for clients and they have their preferences. Obviously those points have to be considered when we go for a state management option. Sometimes the projects which we start off might be halfway gone and then we have to continue from the available state management solution, if there is one already in that project.

These are a few incidents, and there are more things to consider when choosing a state management approach. Like some times it is necessary to use a more complex, feature-rich approach by thinking about the future of the application. But sometimes the case is to maintain the code base minimally and simply.

As I explained at the beginning of the blog we have to make the right choice according to the requirements. Otherwise, we have to face unwanted complexities due to the use of state management.

One main thing, which needs to be considered is;

Until you do not need to use a global state management approach do not use a global state management library.

Now you have a good understanding of what React state management is. And stay tuned for the next blog post. Let’s dive deep into state management with the Redux toolkit with a practical approach.

Stay until the next blog. 👋👋👋👋

Stackademic 🎓

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us **X | [LinkedIn](https://www.linkedin.com/company/stackademic) | [YouTube](https://www.youtube.com/c/stackademic) | [Discord](https://discord.gg/in-plain-english-709094664682340443)**
• Visit our other platforms: **In Plain English | [CoFeed](https://cofeed.app/) | [Differ](https://differ.blog/)**
• More content at **Stackademic.com**