The Ultimate React State Management Handbook

As a React developer, understanding how to manage states effectively is key to building fully functional applications. How you handle data and execute its logic determines how efficient your applications will be. Therefore, in this tutorial, I will walk you through how to manage states effectively using various methods, such as the hook, the useReducer hook, Context API, Redux toolkit, and URLs. useState What is state management? A state is the current value within an application at a specific time. For example, when you save, delete, or update a file on your computer, you’re changing the state of that file. This concept is similar to React states; you can modify their values at any point within the application. Therefore, managing states in React means handling the different actions that modify their value within an application. So, how exactly do we manage states in React? It’s important to understand that in React, state management is about efficiently handling the current state of the application, and each state is bonded to a specific component. How to manage states using the React useState hook The useState hook in React is the easiest way to manage states. It enables us to create and change state variables within our components. For example, consider a Cart component. It needs two states: one for the current item being added to the Cart and another for the Cart itself. The Cart state can be an array, and the item can be an object containing the product’s price, name, and quantity, depending on the application requirements. Creating and managing states using the React useState hook The code snippet above shows how to create a state using the useState hook. const [state, setState] = useState( ) The useState hook returns an array with two elements. The first value within the array represents the state name, and it holds the current value of the state. The second value is a function that enables us to update the state’s value. Any state declared within your application must have a default value depending on its data type. It can be a string, number, object, array, or even a null value. const [stringState, setState] = useState(""); const [objectState, setState] = useState({}); const [objectState, setState] = useState([]); const [state, setState] = useState(null); Updating states with the useState hook In the previous section, you learned how to declare states using the React useState hook. Here, I will walk you through how to update them. Consider the code snippet below: import { useState } from "react";

const App = () => { const [name, setName] = useState("David"); const changeName = () => setName("Ankur"); return ( {name}

Change Name ); }; export default App; From the code snippet above, I created a name state using the hook and set its default value to “David.” useState The function changeName updates the name state to “Ankur” when the user clicks the button. This is a simple illustration of how you can hook to manage your states. useState Before we proceed, take a look at another example. Suppose we have a page that displays a counter that allows us to increase and decrease its value when we click on the buttons. import {useState} from 'react'

const increaseCounter = () => { dispatch({ type: "increase" }); };

const decreaseCounter = () => { dispatch({ type: "decrease" }); };

return ( {state.counter} Decrease Increase );

}; From the code snippet above, you need to declare the hook, as shown below. The hook accepts two arguments, the reducer function and the state object, and returns an array containing the state and the dispatch function. useReducer useReducer const [state, dispatch] = useReducer(reducer, { counter: 0 }); Next, you need to create the reducer function to execute the increase and decrease actions. The hook achieves this using a switch statement that checks the type of action to be performed and executes that action. useReducer const reducer = (state, action) => { switch (action.type) { case "increase": return { counter: state.counter + 1 }; case "decrease": return { counter: state.counter - 1 }; default: return state; } }; Execute the dispatch function to trigger the reducer based on the action you want to perform. const increaseCounter = () => { dispatch({ type: "increase" }); };

//👇🏻 reducer functions const reducer = (state, action) => { switch (action.type) { case ACTIONS.addTodo: return { ...state, todos: [ ...state.todos, { id: Math.random(), todo: action.payload.todo }, ], }; case ACTIONS.createTodo: return { ...state, todoInput: action.payload.input }; case ACTIONS.deleteTodo: const updatedTodos = state.todos.filter( (todo) => todo.id !== action.payload.id ); return { ...state, todos: updatedTodos }; default: return state; } }; The addTodo action adds the newly created todo item to the todos array. The createTodo action updates the state of the todo input, and the deleteTodo action removes a selected todo item from the todos array using its ID. Return the user interface for the application from the . App component import { useReducer } from "react";

const App = () => { const ACTIONS = { addTodo: "addTodo", deleteTodo: "deleteTodo", createTodo: "createTodo", };

const [state, dispatch] = useReducer(reducer, { todos: [ { id: Math.random(), todo: "Hello todo" }, { id: Math.random(), todo: "People good?" }, ], todoInput: "", });

return ( Todo List {state.todos.map((td) => ( {td.todo}

handleDeleteTodo(td.id)}>Delete ))}

handleInputChange(e)} /> Add Todo ); };

export default App; Finally, create the function that handles input changes and two more for adding and deleting items from the to-do list. //👇🏻 handles input change const handleInputChange = (e) => { dispatch({ type: ACTIONS.createTodo, payload: { input: e.target.value } }); }; //👇🏻 handles add todo const handleAddInput = (e) => { e.preventDefault(); //👇🏻 ensures the user's input is not empty if (state.todoInput.trim()) { dispatch({ type: ACTIONS.addTodo, payload: { todo: state.todoInput } }); dispatch({ type: ACTIONS.createTodo, payload: { input: "" } }); } }; //👇🏻 handles delete todo const handleDeleteTodo = (id) => { dispatch({ type: ACTIONS.deleteTodo, payload: { id } }); }; The handleInputChange function updates the todoInput state with the user’s input. The handleAddInput function adds the user’s todo to the list and resets the input field to empty after the user enters a new todo. The handleDeleteTodo function accepts a selected todo ID and removes it from the todo list. How to manage states using the Context API is a state management technique that enables us to manage states within our application by passing props from a parent component into its child components. React Context API For instance, when a user signs into your application, you need to customize the user’s experience within the application by displaying the user name on a few pages. Without Context API, you may have to pass the username as a prop into every page or parent component until it gets to the exact component where the username is needed. The process of passing states as props through multiple parent components until they get to the deeply nested component where it is needed is called Prop drilling. This process makes your code harder to maintain and understand because parent components that do not need the props have to accept it and pass it to the deeply nested components. Using Context API helps solve this issue because it allows you to declare the shared state within a context and wraps your entire application, allowing React components to access the context directly without passing the value from one component level to another. To demonstrate how it works, let’s add a login page to the todo list application. This page will save the username in a context, allowing us to access its value within other pages of the application. First, consider that we have two components: a Login component and a Todo component in our application. After logging into the application, the username is displayed at the top of the Todo page. Therefore, we will save the username within the context and access it from the context within the Todo page. Before we proceed, React provides two methods to enable us to use the Context API: createContext and useContext. Their names explain exactly what they are used for. Next, you need to create the AppContext.js file that stores the current user’s name. import { createContext, useState } from "react";

//👇🏻 creates the context export const AppContext = createContext();

//👇🏻 provides the stored value into other components export const AppProvider = (props) => { const [username, setUsername] = useState("");

const updateUsername = (value) => { setUsername(value); };

return ( {props.children} ); }; The code snippet creates the username state within the Context and makes it available to all components within the application through the AppContext.Provider component. Wrap the entire application with the AppProvider component to grant access to its values for all other components. import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; import { AppProvider } from "./context/AppContext.jsx";

ReactDOM.createRoot(document.getElementById("root")).render( ); Create the login form that updates the username stored within the app context. import { useContext } from "react"; import { useNavigate } from "react-router-dom"; import { AppContext } from "../context/AppContext";

const Login = () => { //👇🏻 uses the App Context const [username, updateUsername] = useContext(AppContext); const navigate = useNavigate();

const handleNameChange = (e) => { updateUsername(e.target.value); }; const handleSignin = (e) => { e.preventDefault(); //👇🏻 navigates to the Todos component navigate("/todos"); };

return ( Sign in to your application Username handleNameChange(e)} /> Sign in ); };

export default Login; The code snippet above accepts the username and updates its value within the context. Finally, display the username within the Todos component. import { useContext } from "react"; import { AppContext } from "../context/AppContext";

const Todos = () => { const [username, setUsername] = useContext(AppContext);

//...other state management functions

return ( Todo List {username}

{state.todos.map((td) => ( {td.todo}

handleDeleteTodo(td.id)}>Delete ))}

handleInputChange(e)} className='inputField' /> Add Todo ); }; The code snippet above gets the username from the context and displays it on the page. How to manage states using Redux Toolkit in React is another alternative to the React Context API that allows us to manage states, and its functionality is similar to the useReducer hook in React. Redux Toolkit With Redux Toolkit, you can create a store within your application that all your components can communicate with, similar to how components access context in the React Context API. Redux Toolkit also allows you to create a slice for your states, providing a simplified way of writing the reducers and actions for that state. Before you can use Redux Toolkit, you need to install the and packages. React Redux Redux Toolkit npm install react-redux @reduxjs/toolkit To illustrate how Redux Toolkit works, let’s modify the login page to use Redux Toolkit for storing and updating the username. First, create a redux folder containing the username slice, as shown below. // In redux/username.js import { createSlice } from "@reduxjs/toolkit";

const initialState = { value: "", };

export const usernameSlice = createSlice({ name: "username", initialState, reducers: { updateName: (state, action) => { state.value = action.payload; }, }, });

export const { updateName } = usernameSlice.actions;

export default usernameSlice.reducer; From the code snippet, the `createSlice` function accepts the state name, its initial value, and all the reducer functions related to the state in an object. Ensure you export the reducers at the end of the file. Create a store/store.js within your application containing the entire Redux states. import { configureStore } from "@reduxjs/toolkit"; import userNameReducer from "../redux/username";

export const store = configureStore({ reducer: { username: userNameReducer, }, }); Finally, make the store available to all components by wrapping your entire application with the Provider component from React Redux. import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import { Provider } from "react-redux" import { store } from './store/store.js' import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render( , ) Interacting with the Redux Toolkit Redux Toolkit provides two hooks that enable us to interact with the states. They are the useSelector and useDipatch hook. The useSelector hook enables us to select a particular state declared within Redux, and the useDispatch hook enables us to trigger different reducer functions. Select the username state and update its value when the user logs into the application. import { useNavigate } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; import { updateName } from "../redux/username";

const Login = () => { //selects the username Redux state const username = useSelector((state) => state.username.value); //initializes the useDispatch hook const dispatch = useDispatch(); const navigate = useNavigate();

const handleNameChange = (e) => { //updates the username state dispatch(updateName(e.target.value)); }; const handleSignin = (e) => { e.preventDefault(); navigate("/todos"); };

return ( Sign in to your application Username handleNameChange(e)} className='inputField' /> Sign in ); }; The code snippet above selects the username value from the Redux state and updates it using the useDispatch hook when users enter their username. //selects the username value const username = useSelector((state) => state.username.value); const dispatch = useDispatch(); const handleNameChange = (e) => { // updates the username state dispatch(updateName(e.target.value)); }; How to use URLs to store states in React This method is quite uncommon but very useful in cases where you want to persist or bookmark states within your application. For example, when you want your users to share a page’s URL, and when other users visit the page, they should see the same user interface. Suppose you are building an e-commerce website, and a user selects a variant of the product that they would love to share with a friend. How do you ensure that once the friend visits the page, they get the same view? The URL state management method is the best solution. It modifies the page URL based on the data provided by the user. To demonstrate how it works, let’s add a search functionality to the to-do list application. Before we proceed, you need to install the package. React Router npm install react-router-dom The React Router package provides the useSearchParams hook that enables us to modify and store data within a page’s URL. import { useSearchParams } from "react-router-dom";

const TodoList = () => { const [searchParams, setSearchParams] = useSearchParams({ search: "" });

const filterText = searchParams.get("search");

return {/**--App UI--**/} ; }; The code snippet above adds a `search` query parameter to the page’s URL, and it becomes something like this: http://localhost:5173/todos?search=team+hangout Next, add a filter form field to the Todo list page to enable users to filter the todos via its name. The user’s input also gets added to the page’s URL as the input field is updated. const TodoList = () => { //...other state functions return ( Todo List {username} {/*--filter todo form--*/} Filter Todo handleFilter(e)} />

{state.todos.map((td) => ( {td.todo}

handleDeleteTodo(td.id)}>Delete ))}

handleInputChange(e)} /> Add Todo ); }; Create the handleFilter function that filters the todos, updates the page’s URL, and returns only the todos that match the user’s input. const handleFilter = (e) => { const filteredResult = state.todos.filter((item) => item.todo.toLowerCase().startsWith(e.target.value.toLowerCase()) ); setSearchParams( (prev) => { prev.set("search", e.target.value); return prev; }, { replace: true } ); if (filteredResult.length !== 0) { dispatch({ type: ACTIONS.setTodo, payload: { todos: filteredResult } }); } }; In conclusion, the hook provides a simple way for you to manage states effectively and provides a better user experience for your users. useSearchParams Conclusion and Key Takeaways So far, you have learned how to manage states using the useState and the useReducer hooks, the React Context API, the Redux Toolkit, and a page’s URL. Here are a few things to note: Use the useState hook for simple state management. Use useReducer when you have numerous states within a component or for states with complex transitions. Use the React Context API or Redux Toolkit for applications where multiple components require or modify a shared state. Use the URL method to store states, especially when you need to keep states even after a page refresh. Thank you for reading. If you like this blog and want to read more about ReactJS and JavaScript, start reading some of my recent articles. Why Learn React The Good Parts of React Common JavaScript Questions I Used to Ask in Interview A Simple and Effective way to Learn & Practice JavaScript. How to Learn ReactJS in 2024 Modern JavaScript A Guide on How to Create a Project with Vite How to Use React Hooks How to Use and Validate Forms in React Learn React – A Guide to the Key Concepts A Complete Guide on FreeCodeCamp Now it’s time to take the next step by subscribing to my and following me on . newsletter Twitter A newsletter on Career, Business, Writing and Life Advice for Engineers Also published . here

The Ultimate React State Management Handbook

Too Long; Didn't Read

Ankur Tyagi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The Ultimate React State Management Handbook

Too Long; Didn't Read

Ankur Tyagi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES