How to manage global state in a React application?

Global state refers to data that is accessible across multiple components in a React application. Unlike the local state, which is confined to a single component, the global state can be accessed and modified from anywhere in the component tree.

In this article, we will explore the following approaches by which we can manage the global state in React.

Steps to Create React application and manage global state:

For React Context API: No additional installation is required, as it's built into React.

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After setting up the React environment on your system, we can start by creating an App.js file and creating a directory by the name of components.

At last, we can apply any Approach to handle Global State

Folder Structure:

👁 ewregt

Approach 1: Using Redux

Include dependency in project:

npm install redux react-redux

The updated dependencies in package.json file will look like:

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-redux": "^9.1.0",
 "react-scripts": "5.0.1",
 "redux": "^5.0.1",
 "web-vitals": "^2.1.4"
}

Example: This example implements the above-mentioned approach.

Approach 2: Using MobX

Include dependency in Project

npm install mobx mobx-react

The updated Dependencies in package.json file will look like:

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "mobx": "^6.12.0",
 "mobx-react": "^9.1.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: This example implements the above-mentioned approach.

Approach 3: Using Recoil

Include dependency in Project

npm install recoil

The updated Dependencies in package.json file will look like:

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "recoil": "^0.7.7",
 "web-vitals": "^2.1.4"
}

Example: This example implements the above-mentioned approach.

Approach 4: Using Zustand

Include dependency in Project

npm install zustand

The updated Dependencies in package.json file will look like:

 "dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4",
 "zustand": "^4.5.2"
}

Example: This example implements the above-mentioned approach

Appraoch 5: Using XState

Include dependency in Project

npm install xstate @xstate/react

The updated Dependencies in package.json file will look like:

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "@xstate/react": "^4.1.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4",
 "xstate": "^5.9.1"
}

Example: This example implements the above-mentioned approach

Output(Same for all Approaches):