ReactJS State Management with Programming Examples and Explanation

Fawad August 16, 2023

0 1 9 minutes read

Table of Contents

Introduction:

In the world of web development, creating dynamic and interactive user interfaces is crucial to providing a seamless user experience. As applications grow in complexity, managing the state of the application becomes increasingly challenging. This is where ReactJS state management comes into play. ReactJS, a widely used JavaScript library for building user interfaces, offers various techniques and libraries to efficiently manage state and ensure a smooth user experience. In this article, we will delve into the world of ReactJS state management, exploring its importance, different approaches, and the benefits they bring to modern web development.

The Role of State Management

State, in the context of a web application, refers to any data that can change over time and affects the behavior and appearance of the user interface. This can include data like user inputs, fetched API responses, or UI configurations. Effective state management is critical because it ensures that the application remains responsive and updates in real-time as users interact with it.

In a simple React component, state can be managed using the built-in useState hook. However, as applications grow larger and more complex, the need for more sophisticated state management solutions becomes evident.

Challenges in State Management

As applications evolve, managing state efficiently becomes challenging due to several reasons:

Component Hierarchies: Applications consist of numerous components nested within each other. Passing state between deeply nested components can lead to prop drilling, where data needs to be passed down through multiple levels of components, making the codebase hard to maintain.

Global State: Some data needs to be accessible across different components, leading to the requirement for a global state. Managing global state manually can result in synchronization issues and make it difficult to understand the flow of data.

Asynchronous Operations: Handling asynchronous operations like fetching data from APIs and managing loading states can lead to complex code structures that are hard to manage.

Optimizing Rerenders: Rerendering components when the state changes is a fundamental part of React’s mechanism. However, inefficient rerendering can impact the performance of an application.

ReactJS State Management Solutions

ReactJS provides several solutions for effective state management, each catering to different scenarios and application complexities. Let’s explore some of the most popular ones:

Redux state management

Redux is a predictable state container for JavaScript applications. It centralizes the application’s state in a single store and provides a set of rules for managing state changes. Redux follows a unidirectional data flow, making it easier to track and debug changes.

Redux’s core concepts include actions, reducers, and a store. Actions are dispatched to describe state changes, reducers are functions that specify how the state changes in response to actions, and the store holds the entire application state.

While Redux can introduce some boilerplate code, its strict structure and predictable nature make it suitable for large-scale applications with complex state management needs.

Mobx state management

Mobx is another state management solution that focuses on simplicity and reactivity. It allows developers to create observable data structures that automatically track and update changes. Mobx’s philosophy is centered around “observables” and “actions.”

Observables are data structures that can be automatically tracked for changes. When an observable changes, all components that depend on it are automatically updated. Actions are functions that modify observables, ensuring that state changes are tracked correctly.

Mobx’s reactive nature simplifies complex state management scenarios, making it a good choice for applications that prioritize ease of use.

Context API with Hooks state management

React’s Context API is a built-in solution for managing global state without the need for third-party libraries. When used in conjunction with hooks like useContext and useReducer, it provides a way to share state across components without prop drilling.

Context API is well-suited for smaller applications or situations where the complexity doesn’t warrant using external libraries. While it might not offer the same level of predictability as Redux, it can simplify state management and reduce the need for external dependencies.

Benefits of Effective State Management

Implementing a robust state management solution brings several benefits to a ReactJS application:

Predictability: With a structured state management approach, developers can easily predict how state changes propagate through the application, leading to more manageable and maintainable code.

Debugging: Debugging becomes more straightforward when state changes are tracked and controlled through a state management solution. Redux, for example, provides powerful debugging tools that help pinpoint issues in the application’s state flow.

Performance: Efficient state management can lead to better performance by minimizing unnecessary re-renders and optimizing how data is accessed and updated.

Scalability: As applications grow, effective state management becomes crucial for maintaining a scalable codebase. Solutions like Redux and Mobx provide patterns that promote scalability and organization.

Redux State Management in ReactJS Programming Examples:

first, you need to install Redux and React-Redux as dependencies in your project.

npm install redux react-redux

1	npm install redux react-redux

if you don’t know to install the dependencies then visit my previous article.

Replace the App.js file code with the following code

import React from 'react';
import { createStore } from 'redux'; // Import createStore from Redux
import { useSelector, useDispatch, Provider } from 'react-redux'; // Import necessary functions from react-redux

// Redux actions
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

const incrementCounter = () => ({
  type: INCREMENT_COUNTER,
});

// Redux reducer
const initialState = {
  counter: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT_COUNTER:
      return {
        ...state,
        counter: state.counter + 1,
      };
    default:
      return state;
  }
};

// Redux store
const store = createStore(counterReducer);

// React component using Redux
const Counter = () => {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => dispatch(incrementCounter())}>Increment</button>
    </div>
  );
};

const App = () => (
  <Provider store={store}> {/* Provide the Redux store to the entire application */}
    <Counter />
  </Provider>
);

export default App;

import React from 'react';

import { createStore } from 'redux'; // Import createStore from Redux

import { useSelector, useDispatch, Provider } from 'react-redux'; // Import necessary functions from react-redux

// Redux actions

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

const incrementCounter = () => ({

type: INCREMENT_COUNTER,

});

// Redux reducer

const initialState = {

counter: 0,

};

const counterReducer = (state = initialState, action) => {

switch (action.type) {

case INCREMENT_COUNTER:

return {

...state,

counter: state.counter + 1,

};

default:

return state;

}

};

// Redux store

const store = createStore(counterReducer);

// React component using Redux

const Counter = () => {

const counter = useSelector(state => state.counter);

const dispatch = useDispatch();

return (

<div>

<p>Counter: {counter}</p>

<button onClick={() => dispatch(incrementCounter())}>Increment</button>

</div>

);

};

const App = () => (

<Provider store={store}> {/* Provide the Redux store to the entire application */}

</Provider>

);

export default App;

reactjs State Management

Program Explanation:

import React from 'react';

import { createStore } from 'redux';

import { useSelector, useDispatch, Provider } from 'react-redux';

import React from 'react';

import { createStore } from 'redux';

import { useSelector, useDispatch, Provider } from 'react-redux';

These import statements bring in the necessary modules and functions for using Redux and React-Redux.

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

const incrementCounter = () => ({

  type: INCREMENT_COUNTER,

});

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

const incrementCounter = () => ({

type: INCREMENT_COUNTER,

});

These lines define a Redux action type and an action creator function. The action creator creates an action object with the type property set to INCREMENT_COUNTER.

const initialState = {

  counter: 0,

};

const counterReducer = (state = initialState, action) => {

  switch (action.type) {

    case INCREMENT_COUNTER:

      return {

        ...state,

        counter: state.counter + 1,

      };

    default:

      return state;

  }

};

const initialState = {

counter: 0,

};

const counterReducer = (state = initialState, action) => {

switch (action.type) {

case INCREMENT_COUNTER:

return {

...state,

counter: state.counter + 1,

};

default:

return state;

}

};

Here, a reducer function is defined. The reducer takes the current state and an action as parameters and returns a new state based on the action type. In this case, when the INCREMENT_COUNTER action is dispatched, the reducer increments the counter property in the state.

const store = createStore(counterReducer);

1	const store = createStore(counterReducer);

This line creates the Redux store using the createStore function from Redux and passing in the reducer function. The store holds the state of the application and provides methods to dispatch actions and access the state.

const Counter = () => {

  const counter = useSelector(state => state.counter);

  const dispatch = useDispatch();

  return (

    <div>

      <p>Counter: {counter}</p>

      <button onClick={() => dispatch(incrementCounter())}>Increment</button>

    </div>

  );

};

const Counter = () => {

const counter = useSelector(state => state.counter);

const dispatch = useDispatch();

return (

<div>

<p>Counter: {counter}</p>

<button onClick={() => dispatch(incrementCounter())}>Increment</button>

</div>

);

};

This component, named Counter, uses the useSelector hook to extract the counter value from the Redux store’s state. The useDispatch hook provides a way to dispatch actions to update the state. The component displays the counter value and a button to increment it.

const App = () => (

  <Provider store={store}>

    <Counter />

  </Provider>

);

const App = () => (

</Provider>

);

The App component wraps the Counter component with the Provider component from React-Redux. This ensures that the Redux store is accessible to all components within the application.

Overall, this code sets up a simple Redux-based state management system within a React application. It demonstrates how Redux actions, reducers, and the store are used to manage and update the application’s state, and how React components interact with the state using hooks provided by React-Redux.

Mobx State Management in ReactJS Programming Examples:

Start by installing MobX and MobX React using npm:

npm install mobx mobx-react

1	npm install mobx mobx-react

then Create a new file named todoStore.js in the src directory and add the following code:

import { observable, action } from 'mobx';
const todoStore = observable({
  todos: [],
  addTodo: action(function (todo) {
    this.todos.push(todo);
  }),
});

export default todoStore;

import { observable, action } from 'mobx';

const todoStore = observable({

todos: [],

addTodo: action(function (todo) {

this.todos.push(todo);

}),

});

export default todoStore;

then Create a new file named TodoList.js in the src directory and add the following code:

import React from 'react';
import { observer } from 'mobx-react';
import todoStore from './todoStore';

const TodoList = observer(() => {
  return (
    <div>
      <ul>
        {todoStore.todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
});

export default TodoList;

import React from 'react';

import { observer } from 'mobx-react';

import todoStore from './todoStore';

const TodoList = observer(() => {

return (

<div>

<ul>

{todoStore.todos.map((todo, index) => (

))}

</ul>

</div>

);

});

export default TodoList;

and finally, Replace the code of src/App.js with the following code:

import React from 'react';
import './App.css';
import TodoList from './TodoList';
import todoStore from './todoStore';

function App() {
  const addTodoHandler = () => {
    const newTodo = prompt('Enter a new todo:');
    if (newTodo) {
      todoStore.addTodo(newTodo);
    }
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <TodoList />
      <button onClick={addTodoHandler}>Add Todo</button>
    </div>
  );
}

export default App;

import React from 'react';

import './App.css';

import TodoList from './TodoList';

import todoStore from './todoStore';

function App() {

const addTodoHandler = () => {

const newTodo = prompt('Enter a new todo:');

if (newTodo) {

todoStore.addTodo(newTodo);

}

};

return (

</div>

);

}

export default App;

Start the development server by running:

npm start

npm start

Your browser should open with the todo list application. You can add new todos by clicking the “Add Todo” button.
reactjs State Management

reactjs State Management

Remember, this is a basic example to demonstrate MobX state management in React. In a real-world application, you might want to organize your code and handle more complex state and interactions.

Code Explanation:

todoStore.js

import { observable, action } from 'mobx';

1	import { observable, action } from 'mobx';

observable: This is a MobX decorator function that marks an object, array, or primitive as observable. It allows MobX to track changes made to the observable data structure and automatically update any components that are observing it.

action: This is another decorator provided by MobX. It’s used to define a function as an “action,” meaning that any changes to the observable state made within this function are tracked and batched together for more efficient updates.

const todoStore = observable({

  todos: [],

  addTodo: action(function (todo) {

    this.todos.push(todo);

  }),

});

const todoStore = observable({

todos: [],

addTodo: action(function (todo) {

this.todos.push(todo);

}),

});

todoStore: This is an observable object that represents the application’s state. It contains a todos array property and an addTodo method.

todos: This is an observable array that will store the list of todos.

addTodo: This is a method defined using the action decorator. When addTodo is called, it pushes a new todo into the todos array. Since addTodo is marked as an action, any modifications to the todos array made within this method will be tracked by MobX for proper reactivity.

export default todoStore;

1	export default todoStore;

The todoStore object is exported as the default export from this module. This allows other parts of your application to import and use this store to manage and access the application’s state.

TodoList.js

import React from 'react';

import { observer } from 'mobx-react';

import todoStore from './todoStore';

import React from 'react';

import { observer } from 'mobx-react';

import todoStore from './todoStore';

React: This is imported from the ‘react’ library, indicating that this component is using React features.

observer: This is a higher-order component provided by the mobx-react package. It’s used to convert a functional component into an observer that reacts to changes in the MobX observable state.

todoStore: This is the observable state object that you’ve created earlier using MobX. It contains the todos array and the addTodo action.

const TodoList = observer(() => {

  return (

    <div>

      <ul>

        {todoStore.todos.map((todo, index) => (

          <li key={index}>{todo}</li>

        ))}

      </ul>

    </div>

  );

});

const TodoList = observer(() => {

return (

<div>

<ul>

{todoStore.todos.map((todo, index) => (

))}

</ul>

</div>

);

});

TodoList: This is a functional component that will render a list of todos.

observer(() => { … }): The observer function wraps around the component’s function. This makes the component reactive to changes in the observable state (todoStore in this case).

Inside the component function:

It renders a div element containing an unordered list (ul).

The map function is used to iterate over each todo item in the todoStore.todos array. For each todo, a li element is created, and the todo content is displayed.

Each li element has a unique key attribute set to the index of the todo to help React efficiently manage updates.

export default TodoList;

1	export default TodoList;

The TodoList component is exported as the default export from this module. This allows other parts of your application to import and use this component to display the list of todos.

App.js

import React from 'react';

import './App.css';

import TodoList from './TodoList';

import todoStore from './todoStore';

import React from 'react';

import './App.css';

import TodoList from './TodoList';

import todoStore from './todoStore';

React: This is imported from the ‘react’ library, indicating that this component is using React features.

./App.css: This imports a CSS file that is used to style the components in the app.

TodoList: This imports the TodoList component that you’ve created earlier.

todoStore: This imports the observable state object from the todoStore.js module.

function App() {

  const addTodoHandler = () => {

    const newTodo = prompt('Enter a new todo:');

    if (newTodo) {

      todoStore.addTodo(newTodo);

    }

  };




  return (

    <div className="App">

      <h1>Todo List</h1>

      <TodoList />

      <button onClick={addTodoHandler}>Add Todo</button>

    </div>

  );

}

function App() {

const addTodoHandler = () => {

const newTodo = prompt('Enter a new todo:');

if (newTodo) {

todoStore.addTodo(newTodo);

}

};

return (

</div>

);

}

App: This is the main functional component that represents the entire application.

addTodoHandler: This is a function that is called when the “Add Todo” button is clicked. It prompts the user to enter a new todo, and if a value is provided, it calls the addTodo action on the todoStore to add the new todo.

Inside the return statement:

A div element with the class name “App” is created as the main container for the application.

An h1 element with the text “Todo List” is displayed as the application’s title.

The TodoList component is rendered, displaying the list of todos from the observable state.

A button element is rendered with the text “Add Todo,” and an onClick event handler is attached to the addTodoHandler function. Clicking this button prompts the user to add a new todo.

export default App;

1	export default App;

The App component is exported as the default export from this module. This is the root component of your application, and it’s used to start rendering the entire UI.

Context API with Hooks State Management in ReactJS Examples

first Create a new file named StateContext.js in the src directory and add the following code:

import React, { createContext, useContext, useReducer } from 'react';

// Create a context
const StateContext = createContext();

// Define a reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    default:
      return state;
  }
};

// Create a provider component
const StateProvider = ({ children }) => {
  const initialState = { todos: [] };
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <StateContext.Provider value={{ state, dispatch }}>
      {children}
    </StateContext.Provider>
  );
};

// Custom hook for using the state
const useStateContext = () => useContext(StateContext);

export { StateProvider, useStateContext };

import React, { createContext, useContext, useReducer } from 'react';

// Create a context

const StateContext = createContext();

// Define a reducer function

const reducer = (state, action) => {

switch (action.type) {

case 'ADD_TODO':

return { ...state, todos: [...state.todos, action.payload] };

default:

return state;

}

};

// Create a provider component

const StateProvider = ({ children }) => {

const initialState = { todos: [] };

const [state, dispatch] = useReducer(reducer, initialState);

return (

<StateContext.Provider value={{ state, dispatch }}>

{children}

</StateContext.Provider>

);

};

// Custom hook for using the state

const useStateContext = () => useContext(StateContext);

export { StateProvider, useStateContext };

then Create a new file named AddTodo.js in the src directory and add the following code:

import React from 'react';
import './App.css';
import { StateProvider } from './StateContext';
import TodoList from './TodoList';
import AddTodo from './AddTodo';

function App() {
  return (
    <div className="App">
      <h1>Todo List</h1>
      <StateProvider>
        <TodoList />
        <AddTodo />
      </StateProvider>
    </div>
  );
}

export default App;

import React from 'react';

import './App.css';

import { StateProvider } from './StateContext';

import TodoList from './TodoList';

import AddTodo from './AddTodo';

function App() {

return (

</StateProvider>

</div>

);

}

export default App;

then Create a new file named AddTodo.js in the src directory and add the following code:

import React, { useState } from 'react';
import { useStateContext } from './StateContext';

const AddTodo = () => {
  const { state, dispatch } = useStateContext();
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo) {
      dispatch({ type: 'ADD_TODO', payload: newTodo });
      setNewTodo('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
    </div>
  );
};

export default AddTodo;

import React, { useState } from 'react';

import { useStateContext } from './StateContext';

const AddTodo = () => {

const { state, dispatch } = useStateContext();

const [newTodo, setNewTodo] = useState('');

const handleAddTodo = () => {

if (newTodo) {

dispatch({ type: 'ADD_TODO', payload: newTodo });

setNewTodo('');

}

};

return (

<div>

<input

type="text"

value={newTodo}

onChange={(e) => setNewTodo(e.target.value)}

</div>

);

};

export default AddTodo;

and finally, Replace the code of src/App.js with the following code:

import React from 'react';
import './App.css';
import { StateProvider } from './StateContext';
import TodoList from './TodoList';
import AddTodo from './AddTodo';

function App() {
  return (
    <div className="App">
      <h1>Todo List</h1>
      <StateProvider>
        <TodoList />
        <AddTodo />
      </StateProvider>
    </div>
  );
}

export default App;

import React from 'react';

import './App.css';

import { StateProvider } from './StateContext';

import TodoList from './TodoList';

import AddTodo from './AddTodo';

function App() {

return (

</StateProvider>

</div>

);

}

export default App;

Start the development server by using:

npm start

npm start

Upon launching the application, the user is greeted with a page displaying the title “Todo List.” The TodoList component, connected to the shared state via the useStateContext hook, presents a list of todo items fetched from the application’s state. Each item is rendered as an unordered list element with its corresponding content. The AddTodo component, also connected to the shared state, offers an input field where users can enter new todo items. After inputting a todo and clicking the “Add Todo” button, the dispatch function from the shared state is used to update the state with the new item. The todo list dynamically updates, reflecting the changes in real-time as new items are added.

reactjs State Management

In this example, the StateProvider wraps the TodoList and AddTodo components, making the state accessible to both components using the useStateContext hook. This way, the components can read and update the shared state without needing to pass props down the component tree. The dispatch function is used to update the state in response to actions.

Conclusion

In the world of modern web development, ReactJS state management is a critical aspect of building interactive and responsive applications. As applications become more complex, the need for efficient state management becomes evident. ReactJS offers various solutions, from the popular Redux to the reactive Mobx and the built-in Context API with hooks.

Selecting the right state management solution depends on factors like the application’s complexity, the team’s familiarity with different technologies, and the desired level of predictability. Regardless of the chosen approach, effective state management is essential for creating maintainable, performant, and scalable applications that provide an exceptional user experience.