Scalable React projects tend to contain code bases with numerous components making up the primary application. Good data management and communication between these individual components is pivotal for cleaner code, and improved data sharing between components. <\/p>\n\n\n\n
Global state management was created as a means to centralize and manage data in an application, making it easily mutable and available to all components in the application. Finding and implementing a suitable means to handle global state management is an integral part of an application. <\/p>\n\n\n\n
In this article, we will give you a deep dive on the terms state and state management in React, and discuss the best choices for managing global state in a React application. We will also cover different methods of managing global state in a React application without the use of any 3rd party library or packages.<\/p>\n\n\n\n
In JavaScript applications, state refers to all data the application needs in order to operate. State can be stored in any data type, including arrays, booleans, strings, or numbers.<\/p>\n\n\n\n
Within React apps, global state is a JavaScript object that stores data used by React to render components with dynamic content based on user action. Applications can include this global state for both functional and class components.<\/p>\n\n\n\n
State can be transferred across components in React apps in different ways depending on the state management technique used.<\/p>\n\n\n\n
State management is a method of controlling communication between different parts of state and their usage, including React components.<\/p>\n\n\n\n
Except for extremely simple applications, components need to communicate with each other. For example, in an e-commerce application, a cart component needs to communicate to the site header component to show how many items are currently in the cart.<\/p>\n\n\n\n
Components are used in the development of React apps, and these components often manage state on their own because a state object can be included directly in React components. <\/p>\n\n\n\n
When present, the component’s state is considered “encapsulated data” and contains the properties that are persistent across component renderings. This is effective for applications with few components, but as the application grows, it becomes difficult to control the complexity of shared state between components.<\/p>\n\n\n\n
When state management is implemented:<\/p>\n\n\n\n
Global state management is useful in virtually every type of app, but some examples of where it may be particularly critical include:<\/p>\n\n\n\n
There are multiple ways we can manage global state in React applications. Let\u2019s take a look at the basic approaches to managing state:<\/p>\n\n\n\n
useState<\/code> and useReducer<\/code>)<\/li>\n\n\n\n- React’s Context API<\/li>\n\n\n\n
- State Management Libraries (e.g. Redux and Recoil)<\/li>\n<\/ul>\n\n\n\n
Each state management technique is used to build React applications of different scales, ranging from small-scale to large-scale applications. <\/p>\n\n\n\n
For example, relying on React Hooks like useState<\/code> and useReducer<\/code> for global state, although encouraged<\/a> by the React Docs, only really works well for small and simple React applications. <\/p>\n\n\n\nAs the number of features and the size of the application increases, we begin to increasingly rely on \u201cprop drilling<\/strong><\/a>\u201d to pass state between components and it becomes hard to manage the application state with only hooks.<\/p>\n\n\n\nThis is where the Context API<\/a> or state management libraries can come in. <\/p>\n\n\n\nBut we’re getting ahead of ourselves; let’s start by taking a look at React’s useState<\/code> and useReducer<\/code> hooks.<\/p>\n\n\n\nReact Hooks<\/h2>\n\n\n\n
According to the React Docs<\/a>, \u201cHooks are functions that let you \u2018hook into\u2019 React state and lifecycle features from function components.\u201d<\/p>\n\n\n\nThe useState<\/code> hook, for example, is useful for setting and updating a React component’s state and the useReducer<\/code> hook lets you manage the local state of complex components with a reducer.<\/p>\n\n\n\nLet\u2019s dive in and see how we can use these hooks to manage the application state in our React application.<\/p>\n\n\n\n
useState hook<\/h3>\n\n\n\n
With useState<\/code> you can set a value of state within a component.<\/p>\n\n\nconst<\/span> [state, setState] = useState(initialState);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nuseState<\/code> is a function that takes in the initial state (initialState<\/code> in the code above) as an argument. <\/p>\n\n\n\nReact will preserve this state between re-renders. useState<\/code> returns two things that we can obtain by <\/em>destructuring<\/em><\/a>: the current<\/em> state value<\/strong> and a function that lets you update it<\/strong>. <\/p>\n\n\n\nYou can call this function setState<\/code> function in order to update the state<\/code> to a new value.<\/p>\n\n\n\nConsider this example:<\/p>\n\n\n
import<\/span> { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> \".\/styles.css\"<\/span>;\n\n\nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n const<\/span> [count, setCount] = useState(0<\/span>)\n return<\/span> (\n <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n <h1<\/span>><\/span> State management 101 <\/h1<\/span>><\/span>\n <button<\/span> onClick<\/span>={()<\/span> =><\/span> setCount(count + 1)}>Clicked me {count} times<\/button<\/span>><\/span>\n <\/div<\/span>><\/span><\/span>\n );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nIn the simple code example above you can see how the state is updated when we call the setCount<\/code> function by clicking on the button.<\/p>\n\n\n\nNow, let\u2019s use a bit more practical of an example. We\u2019ll take a look at hooks in this Books component – .\/src\/Books.js<\/code>:<\/p>\n\n\n\/\/ .\/src\/Books.js<\/span>\n\nimport<\/span> React, { useState } from<\/span> \"react\"<\/span>;\n\/\/ array of book objects<\/span>\nconst<\/span> books = [\n {\n title<\/span>: \"Harry Potter and the Deathly Hallows\"<\/span>,\n price<\/span>: \"5.00\"<\/span>,\n rating<\/span>: \"5.0\"<\/span>\n },\n {\n title<\/span>: \"Harry Potter and the Goblet of Fire\"<\/span>,\n price<\/span>: \"5.00\"<\/span>,\n rating<\/span>: \"4.8\"<\/span>\n }\n];\nexport<\/span> function<\/span> Books<\/span>(<\/span>) <\/span>{\n \/\/ create state variables with initial values<\/span>\n const<\/span> [savedBooks, setSavedBooks] = useState([]);\n const<\/span> [totalPrice, setTotalPrice] = useState(0<\/span>);\n return<\/span> (\n <div<\/span>><\/span>\n <header<\/span>><\/span>\n <p<\/span>><\/span> No. of Books: {savedBooks.length} <\/p<\/span>><\/span>\n <p<\/span>><\/span> Total price: ${totalPrice} <\/p<\/span>><\/span>\n <\/header<\/span>><\/span>\n <ul<\/span> className<\/span>=\"Books\"<\/span>><\/span>\n {books.map((book) => {\n return (\n <li<\/span> className<\/span>=\"book\"<\/span> key<\/span>={book.name}<\/span>><\/span>\n <header<\/span>><\/span>\n <h3<\/span>><\/span> {book.title} <\/h3<\/span>><\/span>\n <p<\/span>><\/span>Rating: {book.rating} <\/p<\/span>><\/span>\n <p<\/span>><\/span> ${book.price} <\/p<\/span>><\/span>\n <\/header<\/span>><\/span>\n <button<\/span>><\/span> Add <\/button<\/span>><\/span>\n <button<\/span>><\/span> Remove <\/button<\/span>><\/span>\n <\/li<\/span>><\/span>\n );\n })}\n <\/ul<\/span>><\/span>\n <\/div<\/span>><\/span><\/span>\n );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThen in .\/src\/App.js:<\/code><\/p>\n\n\n\/\/.\/src\/App.js<\/span>\n\nimport<\/span> { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> { Books } from<\/span> \".\/Books\"<\/span>;\nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n return<\/span> (\n <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n <Books<\/span> \/><\/span>\n <\/div<\/span>><\/span><\/span>\n );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nIn the Books<\/code> component, we imported the useState<\/code> Hook from React. Then we initialized two states of data: savedBooks<\/code> and totalPrice<\/code>.<\/p>\n\n\n\nWith hooks, we can have multiple and independent state objects by just calling the useState<\/code> function and providing an initial value for the state.<\/p>\n\n\n\nLet’s see how we can update the value of the state: <\/p>\n\n\n\n
To do that, we’ll create a function that will update our state with some data. First, we’ll create a function that will add a book from the books<\/code> array<\/a> to our savedBooks<\/code> array and set the price.<\/p>\n\n\n\/\/ .\/src\/Books.js<\/span>\n\nimport<\/span> React, { useState } from<\/span> \"react\"<\/span>;\n\/\/ array of book objects<\/span>\nconst<\/span> books = [\n {\n id<\/span>: \"001\"<\/span>,\n title<\/span>: \"Harry Potter and the Deathly Hallows\"<\/span>,\n price<\/span>: