State Management (Context API & Redux Toolkit)

As React applications grow, managing data becomes more challenging. A small application may only have a few components, but a large application can contain hundreds of components that need to share the same information.

For example, an online shopping website needs to share the shopping cart, user login details, and selected language across many different pages.

Passing data from one component to another through multiple levels of components can make the code difficult to manage. This problem is solved with state management.

In React, two popular state management solutions are Context API and Redux Toolkit.

What is State Management?

State management is the process of storing, updating, and sharing data across different components in an application.

Instead of keeping separate copies of the same information, state management provides a central way to access and update shared data.

Real-World Example

Imagine a school where every classroom keeps its own attendance list.

If a student's attendance changes, every classroom would need to update its own list, which is inefficient.

Instead, the school keeps one central attendance record that every classroom can access. State management works in the same way by storing shared data in one place.

Why Do We Need State Management?

As applications become larger, many components may need the same information.

Examples include:

• Logged-in user details
• Shopping cart items
• Website theme (Light/Dark Mode)
• Language settings
• Notifications
• Favorite products

Without proper state management, developers would have to pass data through many components using props, a process known as prop drilling.

State management helps avoid this problem.

What is the Context API?

The Context API is a built-in React feature that allows multiple components to share data without passing props through every level.

It is ideal for sharing data that many components need but does not change frequently.

Common use cases include:

• User information
• Theme settings
• Language preferences
• Authentication status

Basic Context API Example

First, create a context.

import { createContext } from "react";

const UserContext = createContext();

export default UserContext;

Next, provide the data.

<UserContext.Provider value="John">
  <App />
</UserContext.Provider>

Finally, use the data.

import { useContext } from "react";

const user = useContext(UserContext);

return <h2>{user}</h2>;

Explanation

• createContext() creates a shared data container.
• Provider makes the data available.
• useContext() allows any child component to access the shared data.

Advantages of Context API

The Context API offers several benefits:

• Built into React
• No additional installation
• Reduces prop drilling
• Easy to use
• Suitable for small and medium applications

However, for very large applications with complex state, developers often use Redux Toolkit.

What is Redux Toolkit?

Redux Toolkit is the recommended way to use Redux in modern React applications.

It provides a central store where application data is stored and managed.

Instead of each component managing its own copy of the data, every component can read from and update the same store.

Redux Toolkit simplifies many of the complex steps that older versions of Redux required.

Installing Redux Toolkit

Install Redux Toolkit using npm.

npm install @reduxjs/toolkit react-redux

Basic Redux Toolkit Example

Create a simple slice.

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment(state) {
      state.value++;
    }
  }
});

export const { increment } =
  counterSlice.actions;

This slice manages a counter that can be shared across the application.

Context API vs Redux Toolkit

Feature                 Context API   Redux Toolkit
Built into React        Yes           No
Installation required   No            Yes
Easy to learn           Yes           Moderate
Best for small projects Yes           Moderate
Best for large projects Moderate      Yes
Handles complex state   Limited       Excellent

Both tools solve the same problem but are designed for different project sizes.

When Should You Use Each One?

Use Context API When:

• Sharing user information
• Managing themes
• Handling language settings
• Working on small or medium projects

Use Redux Toolkit When:

• Building large applications
• Managing shopping carts
• Handling complex business logic
• Managing many different types of shared data

Choosing the right tool depends on the size and complexity of your application.

Real-World Example

Imagine you are building an online shopping website. The shopping cart icon appears on every page.

When a customer adds a product:

• The cart count updates.
• The checkout page updates.
• The order summary updates.
• The navigation bar updates.

Instead of passing the cart data through many components, you store it in a shared state.

For a simple project, the Context API may be enough. For a larger e-commerce application with many features, Redux Toolkit is usually a better choice because it keeps all shared data organized in one central store.

Best Practices

When managing state:

• Keep local data in component state.
• Use Context API for simple shared data.
• Use Redux Toolkit for large applications.
• Avoid unnecessary global state.
• Organize your state clearly.
• Give slices and contexts meaningful names.

Following these practices keeps your application easier to understand and maintain.

Summary

State management is an important part of building modern React applications because it allows multiple components to share and update the same data.

The Context API provides a simple, built-in solution for sharing common information across smaller applications, while Redux Toolkit offers a powerful and scalable approach for managing complex state in larger projects. Understanding both tools will help you choose the right solution based on your application's size and requirements.

Key Takeaways

• State management allows multiple components to share and update data.
• The Context API is built into React and reduces prop drilling.
• createContext, Provider, and useContext are the main parts of the Context API.
• Redux Toolkit provides a central store for managing application state.
• Redux Toolkit is the recommended version of Redux for modern React projects.
• Use Context API for simple shared data and Redux Toolkit for larger, more complex applications.
• Organized state management makes applications easier to maintain and scale.
• Learning both Context API and Redux Toolkit prepares you for real-world React development.