Goals<\/strong><\/h2>\n\n\n\nIn this article, we will discuss the terms state and state management. We will also talk about different state management methods; using Redux, Recoil, and Context API.<\/p>\n\n\n\n
What is State and State Management<\/strong><\/h2>\n\n\n\nState in JavaScript applications simply refers to all data generated through user actions. It is a plain JavaScript object that holds information used by React to render components in which its content is dynamic depending on the resultant action of users. React applications, whether functional or class components can have stated. In react applications, data can be passed between components through a method called “Prop-drilling”. This is when data is passed continuously from parents to descendants. But as the application gets larger, the need for a global state to hold and share states arises.
In large applications such as e-commerce sites, when users interact with a certain component changes are effected into components in the application. For instance:<\/p>\n\n\n\n
- Adding a shopping item to a cart requires the resulting data to be passed from the shopping component to the cart component.<\/li>
- Add purchased product to user purchase history<\/li>
- Checkout of items in the cart<\/li>
- In complex apps, these changes can be difficult to track, therefore the need for a structure to handle data flow and manage communication between our app\u2019s components. State management is a definite structure for managing communication and sharing of states in our application.<\/li>
- State management libraries provide us with tools to create and manage updates of these structures. Over the years, different state management libraries have been developed. Knowing what state management libraries to use is crucial to the development of an application. In this tutorial, we will be looking at some state management libraries and how they can be used.<\/li><\/ul>\n\n\n\n
Hooks<\/strong><\/h2>\n\n\n\nThere are many methods of managing state in React applications. You can opt for class-based state management, React Hooks or third-party libraries like Redux<\/a> or Recoil. In this section, we’ll talk about how we can manage state using Hooks which is encouraged<\/a> by the React Docs.<\/p>\n\n\n\nAccording to the React Docs<\/a>, Hooks are basically functions that let you access state and other React features without using a class component. So no single object holds all the state of the component. This allows you to split state into chunks that can be independently updated.<\/p>\n\n\n\nIn this section, we’ll be looking at a few of the most important Hooks used to manage state. We’ll talk about setting state using the useState and useReducer Hooks.<\/p>\n\n\n\n
The useState Hook<\/strong>
The useState Hook is useful for setting and updating state, similar to this.state in a a class component. With useState you can set the value without referencing the current state.<\/p>\n\n\n\nconst<\/strong> [state, setState] = useState(initialState);<\/code><\/p>\n\n\n\nuseState<\/code> is a function that takes in the initial state (initialState in the code above) as an argument. It returns an array of two items which we obtain and assign their values to any variable name we choose using destructuring.
The first item ( state ) from the returned array is a variable containing the state which you can use in your component.
The second item from the array is a function ( setState<\/code> ) that will update the state.<\/p>\n\n\n\nLet’s have a look at this Hook in action with this example Movies component.<\/p>\n\n\n\n
<>import React, { useState } from \"react\";\n\n\/\/ array of movie objects\nconst movies = [\n {\n title: \"Black Widow\",\n price: \"12.00\",\n rating: \"4.0\"\n },\n {\n title: \"Justice Leage - Snyder Cut\",\n price: \"10.00\",\n rating: \"4.9\"\n }\n];\n\nexport default function Movies() {\n \/\/ create state variables with initial values\n const [bookedMovies, setBookedMovies] = useState([]);\n const [totalPrice, setTotalPrice] = useState(0);\n\n \/\/ functions to set the state\n const add = () => {\n \/\/ set state for bookedMovies\n setBookedMovies([movies[0]]);\n \/\/ set state for totalPrice\n setTotalPrice(movies[0].price);\n };\n\n \/\/ reset state values\n const remove = () => {\n \/\/ reset values\n setBookedMovies([]);\n setTotalPrice(0);\n };\n\n return (\n <div>\n <header>\n <p> No. of movies: {bookedMovies.length} <\/p>\n <p> Total price: ${totalPrice} <\/p>\n <\/header>\n\n <ul className=\"movies\">\n {movies.map((movie) => {\n return (\n <li className=\"movie\" key={movie.name}>\n <header>\n <h3> {movie.title} <\/h3>\n <p> ${movie.price} <\/p>\n <\/header>\n\n <button onClick={add}> Add <\/button>\n <button onClick={remove}> Remove <\/button>\n <\/li>\n );\n })}\n <\/ul>\n <\/div>\n );\n}\n<\/code><\/pre>\n\n\n\n<>\/\/ BeforeUnloadEvent(()=>{\n\/\/ alert('before now')\n\/\/ })\n<\/code><\/pre>\n\n\n\nHere, we imported the useState<\/code> Hook from React. Then we initialized two independent states of data: bookedMovies<\/code> and totalPrice<\/code>.<\/p>\n\n\n\nThis is a huge advantage of useState<\/code> hooks over class-based state management, which provides only a single state object. With Hooks, we can have multiple and independent state objects by just calling the useState<\/code> function, provide an initial state or value and assign the items of the array to new variables.<\/p>\n\n\n\nLet’s see how we can set the value of our state. Here, we’ll create a function that will allow users to update our state with some predefined data. First we’ll create a function that will add a new movie to our bookedMovies<\/code> array and set the price.<\/p>\n\n\n\n<>...\n\nexport default function Movies() {\n \/\/ create state variables with initial values\n const [bookedMovies, setBookedMovies] = useState([]);\n const [totalPrice, setTotalPrice] = useState(0);\n\n \/\/ functions to set the state\n const add = () => {\n \/\/ set state for bookedMovies\n setBookedMovies([movies[0]]);\n \/\/ set state for totalPrice\n setTotalPrice(movies[0].price);\n };\n\n \/\/ reset state values\n const remove = () => {\n \/\/ reset values\n setBookedMovies([]);\n setTotalPrice(0);\n };\n\n return (\n <div>\n <header>\n <p> No. of movies: {bookedMovies.length} <\/p>\n <p> Total price: ${totalPrice} <\/p>\n <\/header>\n\n <ul className=\"movies\">\n {movies.map((movie) => {\n return (\n <li className=\"movie\" key={movie.name}>\n <header>\n <h3> {movie.title} <\/h3>\n <p> ${movie.price} <\/p>\n <\/header>\n\n <button onClick={add}> Add <\/button>\n <button onClick={remove}> Remove <\/button>\n <\/li>\n );\n })}\n <\/ul>\n <\/div>\n );\n}<\/code><\/pre>\n\n\n\nEdit on CodeSandbox<\/a><\/p>\n\n\n\nIn the code above, we created two functions, add()<\/code> and remove. The add()<\/code> function uses the function setBookedMovies<\/code> to set the value of bookedMovies<\/code> and `setTotalPrice` to set the value of totalPrice.<\/code><\/p>\n\n\n\nWe’re calling this add()<\/code> function using the onClick<\/code> event listener on the Add button.
Once the button is clicked, bookedMovies<\/code> is assigned the value of the first movie in the movies list ( “Black Widow” ) and totalPrice<\/code> now contains the price of the first movie ( 12.00 ).
On the other hand, the remove()<\/code> function sets bookedMovies<\/code> and totalPrice<\/code> to an empty array and 0 respectively.<\/p>\n\n\n\nGreat! We’ve seen how we can set and update state data with useState.<\/code> But we’re using static, hard-coded values. In real-world applications, you may need to use the previous state to set the new state instead of overwriting it. Let’s see how we can update the state using the current state with the useReducer<\/code> hook.<\/p>\n\n\n\nThe useReducer Hook<\/strong>
So far we’ve been updating our state and overwriting the previous state with static values. However, in a real application, you’ll want to be able to update the booked movies with the previous items in place.<\/p>\n\n\n\nWith useReducer<\/code> we’ll be able to update the state based on the previous state. This Hook is designed to update the state based on the current state like the Array Reduce method.<\/p>\n\n\n\nFirst, we’ll create a bookedMoviesReducer<\/code> function which takes in two arguments, state, and action.state<\/code> is the current state and action is an object containing two properties, the movie object and the type of action to be performed on the state – “add” or “remove”.<\/p>\n\n\n\n<>...\n\nfunction bookedMoviesReducer(state, action) {\n\n \/\/ get the movie object and the type of action by destructuring\n const { movie, type } = action\n\n \/\/ if \"add\"\n \/\/ return an array of the previous state and the movie object\n if (type === \"add\") return [...state, movie]\n\n \/\/ if \"remove\"\n \/\/ remove the movie object in the previous state\n \/\/ that matches the title of the current movie object\n if (type === \"remove\") {\n const movieIndex = state.findIndex( x => x.title === movie.title)\n\n \/\/ if no match, return the previous state\n if(movieIndex < 0 ) return state \n\n \/\/ avoid mutating the original state, create a copy\n const stateUpdate = [...state]\n\n \/\/ then splice it out from the array\n stateUpdate.splice(movieIndex, 1)\n return stateUpdate\n }\n return state\n}\n\n...\n\nexport default function Movie(){\n ...\n}<\/code><\/pre>\n\n\n\nThen, we have a totalPriceReducer<\/code> function which takes the same arguments as the bookedMoviesReducer<\/code> but just adds and subtracts the value of the previous state to and from the new one respectively.<\/p>\n\n\n\n<>... \n\nfunction totalPriceReducer(state, action) {\n const{ price, type } = action\n if (type === \"add\") return state + price\n\n \/\/ return the value when the type of action was not \"add\"\n \/\/ subract the new movie price from the previous state\n return (state - price) < 0 ? 0 : ( state - price )\n}\n\n...\n\nexport default function Movie(){\n ...\n}<\/code><\/pre>\n\n\n\nNote the ternary operator in the return statement above. This resets the calculation to 0 if state – price is ever lesser than 0 (negative).<\/p>\n\n\n\n
Now that we have our refactored functions, let’s use them in useReducer<\/code><\/p>\n\n\n\n<>import React, { useReducer } from 'react';\n\n...\n\nexport default function Movies() {\n \/\/ replace useState with useReducer and pass two arguments\n \/\/ the first argument is the reducer function\n \/\/ the second function is the initialState\n const [bookedMovies, setBookedMovies] = useReducer(bookedMoviesReducer, []);\n const [totalPrice, setTotalPrice] = useReducer(totalPriceReducer, 0);\n\n \/\/ function to add items and price\n const add = (movie) => {\n \/\/ pass an object containing the movie and type of action, \"add\"\n setBookedMovies({ movie, type: \"add\" });\n setTotalPrice({ price: movie.price, type: \"add\" });\n };\n\n \/\/ function to remove items and price\n const remove = (movie) => {\n setBookedMovies({ movie, type: \"remove\" });\n setTotalPrice({ price: movie.price, type: \"remove\" });\n };\n\n return (\n ...\n )\n}\n...<\/code><\/pre>\n\n\n\nNow that we’ve edited our add()<\/code> and remove()<\/code> function to take a movie argument, we can pass in the movie as the argument in our onClick<\/code> listener in our template.<\/p>\n\n\n\n<>...\n\n{movies.map((movie) => {\n return (\n <li className=\"movie\" key={movie.name}>\n <header>\n <h3> {movie.title} <\/h3>\n <p> ${movie.price} <\/p>\n <\/header>\n\n <button onClick={() => add(movie)}> Add <\/button>\n <button onClick={() => remove(movie)}> Remove <\/button>\n <\/li>\n );\n})}\n...<\/code><\/pre>\n\n\n\nEdit on CodeSandbox<\/a><\/p>\n\n\n\nNow if we click on the Add button, it runs the add()<\/code> function which takes movie as an argument which is in turn passed into the setBookedMovies and setTotalPrice<\/code> functions. Each of these functions are returned from their respective useReducer<\/code> functions.<\/p>\n\n\n\n<>const [ bookedMovies, setBookedMovies ] = useReducer(bookedMoviesReducer, []);\nconst [ totalPrice, setTotalPrice ] = useReducer(totalPriceReducer, 0);<\/code><\/pre>\n\n\n\nEach function takes an object as an argument.
For setBookedMovies<\/code>, it takes this object – {movie, type: \"add\"}<\/code> as an argument, while, setTotalPrice<\/code> takes this object – {price: movie.price, type: \"add\"}<\/code> as an argument.<\/p>\n\n\n\nThese objects are then passed into their respective reducer functions to update the state. setBookedMovies<\/code> for example passes its object into bookedMoviesReducer<\/code>.<\/p>\n\n\n\nThis reducer function adds this new data to the previous state without overwriting it.
You can check out the CodeSandbox above to see this in action.
Next, we’ll see how we can manage state across multiple components using Hooks, Props, and the Context API.<\/p>\n\n\n\n
Context API<\/strong><\/h2>\n\n\n\nReact Context API<\/a> was an experimental feature of React that became available to use for production in version 16.3.0<\/a> of React.<\/p>\n\n\n\nAccording to the docs, Context provides a way to pass data through and between components in your app’s component tree without having to manually pass props down through multiple component levels.<\/p>\n\n\n\n
This manual passing of props is often referred to as prop drilling<\/strong>.
With Context, you can set up a “global” state for a tree of React components. This state can now be accessible from any component without having to pass it through intermediate components.<\/p>\n\n\n\nTo illustrate how we can share state between components using Context API, we’ll break the app in the example above into two sub-components:<\/p>\n\n\n\n
BookedMovies<\/code> – This would contain the total number of booked movies and the total price<\/li>Movies<\/code> – This renders a list of all available movies, their details, and then add<\/strong> and remove<\/strong> buttons for adding and removing the movie from the booked list.<\/li><\/ul>\n\n\n\nCurrently, all our pieces of state, the movies including bookedMovies and totalPrice which we set using Hooks are all in one component – App.js.
For our state to be accessible to our child components, we can pass it down the data using props.
This implies that we have to lift the state up<\/strong> to the topmost component of our component tree and pass it down to the component that needs to access the state. Now, this can be two or more levels down the component tree which takes us back to prop drilling.<\/p>\n\n\n\nInstead of doing all that, we can initialize Context and set up a “global” state that can be accessed from any component on the tree.<\/p>\n\n\n\n
Initialize Context<\/strong>
To initialize context<\/a>, we can create a new file MoviesContext.js specifically for our Context, import createContext, and create our Context.<\/p>\n\n\n\n<>import React, {useReducer, createContext} from 'react';export const MovieContext = createContext();<\/code><\/pre>\n\n\n\nCreate Context Provider<\/strong>
Now that we’ve initialized Context, we can create a Context Provider. According to the docs, every Context object comes with a Provider component that allows components wrapped within it to subscribe to context changes.<\/p>\n\n\n\n<>import React, { useState, useReducer, createContext } from \"react\";\n\nconst moviesList = [\n ...\n];\n\nfunction bookedMoviesReducer(state, action) {\n ...\n};\n\nexport const MovieContext = createContext();\n\nexport const MovieProvider = (props) => {\n const [movies, setMovies] = useState(moviesList);\n const [bookedMovies, setBookedMovies] = useReducer(bookedMoviesReducer, []);\n\n return <MovieContext.Provider>{props.children}<\/MovieContext.Provider>;\n};<\/code><\/pre>\n\n\n\nHere, we’ve moved all our state and reducer functions into our Context file MoviesContext.js. Then in our MovieProvider function, we initialize the state using useState and useReducer Hooks.<\/p>\n\n\n\n
Finally, we’re returning the Provider component <MovieContext.Provider>.<\/code> props.children will allow us to render the components that will be nested within the provider.
Here’s our refactored App.js file with imported components and Context.<\/p>\n\n\n\n<>\/\/ .\/App.js\n\nimport React from \"react\";\nimport Movies from \".\/components\/Movies\";\nimport BookedMovies from \".\/components\/BookedMovies\";\nimport { MovieProvider } from \".\/moviesContext\";\n\nexport default function App() {\n return (\n <MovieProvider>\n <main>\n <Movies \/>\n <BookedMovies \/>\n <\/main>\n <\/MovieProvider>\n );\n}<\/code><\/pre>\n\n\n\nGreat. We’ve managed to create a provider and wrap our components with the provider in our app. We currently don’t have access to any of our state from the Context. Let’s see how we can consume or use the state.<\/p>\n\n\n\n
Consuming our state<\/strong>
The Provider component accepts a value prop<\/a> that can be accessed by components that are descendants of the Provider. We have to pass all our state into our app in our Context file MoviesContext.js<\/p>\n\n\n\n<>\/\/ .\/MoviesContext.js\n...\n return (\n <MovieContext.Provider\n value={{\n movies,\n setMovies,\n bookedMovies,\n setBookedMovies,\n }}\n >\n {props.children}\n <\/MovieContext.Provider>\n );\n...<\/code><\/pre>\n\n\n\nTo subscribe to these pieces of state in our components, we have to import MovieContext and consume it with the useContext Hook. Here’s how we can do that in our Movies component.<\/p>\n\n\n\n
<>\/\/ .\/components\/Movies.js\n\n\/\/ import the useContext Hook\nimport React, { useContext } from \"react\";\n\/\/ import the Context\nimport { MovieContext } from \"..\/moviesContext\";\n\nexport default function Movies() {\n const { movies, setBookedMovies } = useContext(MovieContext);\n \/\/ function to add items and price\n const add = (movie) => {\n \/\/ pass an object containing the movie and type of action, \"add\"\n setBookedMovies({ movie, type: \"add\" });\n };\n\n \/\/ function to remove items and price\n const remove = (movie) => {\n setBookedMovies({ movie, type: \"remove\" });\n };\n\n return (\n <ul className=\"movies\">\n {movies.map((movie) => {\n return (\n <li className=\"movie\" key={movie.name}>\n <header>\n <h3> {movie.title} <\/h3>\n <p> ${movie.price} <\/p>\n <\/header>\n\n <button onClick={() => add(movie)}> Add <\/button>\n <button onClick={() => remove(movie)}> Remove <\/button>\n <\/li>\n );\n })}\n <\/ul>\n );\n}<\/code><\/pre>\n\n\n\nNow we can access all our state from this component. We can also do the same thing for our BookedMovies component.<\/p>\n\n\n\n
<>\/\/ .\/components\/BookedMovies.js\n\nimport React, { useContext } from \"react\";\nimport { MovieContext } from \"..\/moviesContext\";\n\nfunction BookedMovies() {\n const {bookedMovies} = useContext(MovieContext);\n\n const getTotalPrice = (bookedMovies) => {\n const totalPrice = bookedMovies.reduce((totalCost, item) => totalCost + item.price, 0);\n return totalPrice\n }\n\n return (\n <header>\n <p> No. of movies: {bookedMovies.length} <\/p>\n <p> Total price: ${getTotalPrice(bookedMovies)} <\/p>\n <\/header>\n );\n}\n\nexport default BookedMovies;<\/code><\/pre>\n\n\n\nEdit on CodeSandbox<\/a><\/p>\n\n\n\nThere we go. We’ve managed to subscribe to bookedMovies<\/code> state from our Context in this component. Also, we’ve refactored the total price functionality and created a new function getTotalPrice<\/code> that will get the price from each movie on the bookedMovie<\/code> array and total it.<\/p>\n\n\n\nThat’s how we can manage state using the Context API and Hooks.
In the next sections, we’ll see how we can manage state using other popular libraries like Redux and Recoil.<\/p>\n\n\n\n
Redux<\/strong><\/h2>\n\n\n\nWhat is Redux?<\/strong>
Redux<\/a> as the doc implies is a container for Javascript apps. It allows us to manage our app state, track and manage changes as the app progresses. Redux allows React components to read data from a Redux store and dispatch actions to the store to update this data. Here is a diagrammatic representation of how Redux works:<\/p>\n\n\n\n![\"Content](\"https:\/\/lh3.googleusercontent.com\/Vjlw1JurwenOzgPybaiXmxPbEVvd12_v2a23axxoqbFiQaT5p1fpjssJf0oZORXzxwOOSloV8QT_ZivBb5F4XK7-Jv6UCX3AsGQn9O5LlmUaMCRRStNJZYh45tQrjgVQ8lUNLwAS\")
<\/figure>\n\n\n\nThe UI is updated based on the changes made to the state stored in the store thereby making it easier to continuously update as changes are made.
Redux provides a central store where our state resides. Each component in the application can then access the stored data without having to send it from one component to another.<\/p>\n\n\n\n
When should we use Redux?<\/strong><\/h2>\n\n\n\nYou can use Redux in your application when:<\/p>\n\n\n\n
- There are large amounts of states in the app that undergo frequent updates. It solves the problem of prop drilling between components and makes it easier to handle continuous mutations of states.<\/li>
- When a complex algorithm is required to handle updating of the app\u2019s states.<\/li>
- When a reasonable amount of data changes overtime. If the application has data that is constantly being updated, Redux can be used to manage this data and create a structure for it.<\/li>
- When state management is shared. Redux is suitable for cases where the application is shared over a codebase with different developers working on the same application.<\/li><\/ul>\n\n\n\n
How Does Redux Work?<\/strong><\/h2>\n\n\n\nRedux is made up of three primary components: Redux Store, Action, and Reducer.<\/p>\n\n\n\n
Redux Store: This<\/strong> is the brain of our state management structure. It manages the state and dispatches Action on managing the state of our application.<\/p>\n\n\n\nAction<\/strong>: refer to instructions sent that can be interpreted by Reducers. It stores information regarding the users\u2019 actions. The action contains a type and a payload. The type is simply a string with the action name while the payload contains the actual data passed by the action.<\/p>\n\n\n\nReducers:<\/strong> These are functions that read the instructions sent by the Action and update the store via the state according to the received instructions. They specify how the application’s state will change in response to the actions sent to the store.
Redux promotes good architectural structure in React apps along with UI management and optimizes performance for easy re-rendering of components when needed.
Redux core benefits include:<\/p>\n\n\n\n- Flexibility: Redux is simple to learn and implement. It does not require deep knowledge to make use of.<\/li>
- Maintainable: Redux is straightforward and easy to maintain and control operations on the stored state.<\/li>
- Scalability: Since Redux deals with a central store that contains the state that is shared by components, it makes it suitable for handling states when building complex applications.<\/li>
- Redux supports server-side rendering: The current state of an app can be sent to the server with the response to mutate the state.<\/li>
- Easy to debug: Since Redux is made up of three core parts: the Store, Actions, and Reducers. By logging the values of these parts it is easy to trace and fix errors if any occur.<\/li><\/ul>\n\n\n\n
We will now look at how to set up and use Redux in an app using a counter application as a case study.<\/p>\n\n\n\n
Redux Setup<\/strong><\/h2>\n\n\n\nTo set up Redux for use in our application, we will first need to install the package via CLI<\/p>\n\n\n\n
<>npm i redux react-redux<\/code><\/pre>\n\n\n\nOnce this is installed, we can create our action and reducer file; action.js, and reduce.js.
In the reduce.js file, we have:<\/p>\n\n\n\n
<>const reduce = (state = 0, action) => {\n switch (action.type) {\n case \"reset value\":\n return (state = 0);\n case \"increase value\":\n return state + 1;\n case \"decrese value\":\n return state - 1;\n default:\n return state;\n }\n};\nexport default reduce;<\/code><\/pre>\n\n\n\nAbove, we created our reducer file which takes state as value “0” then based on the value of action.type which is the name of the action makes changes to the value of the state. We have set up a conditional block to make different changes based on the type of action dispatched to the reducer. As defined, if the action type is “reset value”, state will be set to 0, if the action type is “increase value”, the value of state will be increased by one and vice-versa.<\/p>\n\n\n\n
Creating a Central Store<\/strong><\/h2>\n\n\n\nTo create the store, we will need to create a new file and import createstore from redux:<\/p>\n\n\n\n
import { createStore } from \"redux\";<\/code><\/p>\n\n\n\nWe also need to import our reducer into the file. After which we will import Provider from Redux. The Provider is responsible for connecting the central state to our application. We will need to wrap the components that will use the Redux state within the provider, preferably in the root.<\/p>\n\n\n\n
<>import reduce from \".\/reduce\"\nimport { Provider } from \"react-redux\";<\/code><\/pre>\n\n\n\nThen to create the store:<\/p>\n\n\n\n
<>const store = createStore(\n reduce,\n);\nReactDOM.render(\n <React.StrictMode>\n <Provider store={store}>\n <App \/>\n <\/Provider>\n <\/React.StrictMode>,\n document.getElementById(\"root\")\n);<\/code><\/pre>\n\n\n\nWe will have to define our actions and export them in our action.js<\/code> file:<\/p>\n\n\n\n<>export const increment = () => {\n return {\n type: \"increment value\",\n };\n};\n\nexport const decrement = () => {\n return {\n type: \"decrement value\",\n };\n};\n\nexport const reset = () => {\n return {\n type: \"reset value\",\n };\n};<\/code><\/pre>\n\n\n\nDispatch Actions<\/strong><\/h2>\n\n\n\nTo dispatch the actions increment value, reset value and decrement value we need to import the actions and use the useDispatch hook provided by react-redux to dispatch our actions.<\/p>\n\n\n\n
<>import { useDispatch } from \"react-redux\";<\/code><\/pre>\n\n\n\nThen, back in our App.js file, we can create buttons with functionalities to perform the actions we defined:<\/p>\n\n\n\n
<>import { useSelector, useDispatch } from \"react-redux\";\nimport {\n decrement,\n increment,\n reset,\n} from \".\/action\";\n\nfunction App() {\n const counter = useSelector((state) => state.counter);\n const dispatch = useDispatch();\n\n return (\n <div className=\"App\">\n <p>Counter to demonstrate redux<\/p>\n <h3>{counter}<\/h3>\n <button onClick={() => dispatch(increment())}>Increment<\/button>\n <button onClick={() => dispatch(reset())}>Reset<\/button>\n <button onClick={() => dispatch(decrement())}>Decrement<\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\n\n\n\nHere, we have used the useDispatch hook to assign the actions to three different buttons. The value of the counter is based on the current value of the state.<\/p>\n\n\n\n
Recoil<\/strong><\/h2>\n\n\n\nWhat is Recoil?<\/strong>
Recoil<\/a> is a new state management library that is open-sourced by Facebook. Recoil also provides a solution to the problem of Global state in applications. Recoil is made up of two major parts: Atom and Selector. Atom is simply a function that lets us store states. It is a shared-state architecture where different components can connect to it to get values from the stored state. On the other hand, a Selector is similar to Atom except that it allows us to have a derived state. The value of a Selector can be derived from the Atom or another Selector.<\/p>\n\n\n\nRecoil Setup<\/strong><\/h2>\n\n\n\nTo demonstrate how to use Recoil in an application we will use an example similar to the counter we created in Redux above. To install Recoil, run the following command in your CLI:<\/p>\n\n\n\n
npm install recoil<\/code><\/p>\n\n\n\nThen we can import it into our app and define our state:<\/p>\n\n\n\n
<>\/\/atom.js\nimport { atom } from \"recoil\";\nconst counter = atom({\n key: \"counter\",\n default: 0\n});\n\nexport default counterAtom;<\/code><\/pre>\n\n\n\nAbove, the counter is our state. It has a key of “counter” and a default value of 0. In Recoil, components that use recoil state need to be wrapped in RecoilRoot. We will add this to our root component:<\/p>\n\n\n\n
<>\/\/index.js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { RecoilRoot } from \"recoil\";\nimport App from \".\/App\";\n\nReactDOM.render(\n <RecoilRoot>\n <App \/>\n <\/RecoilRoot>,\n document.getElementById(\"root\")\n);<\/code><\/pre>\n\n\n\nIn Recoil, we can use the useRecoilState()<\/code> hook to read the value of a recoil state. Now we will create buttons with the functionality to mutate the state stored in atom.js<\/code>:<\/p>\n\n\n\n<>\/\/ App.js\nimport React from \"react\";\nimport { useRecoilState } from \"recoil\";\nimport counter from \".\/atom\";\n\nconst App = () => {\n const [count, setCount] = useRecoilState(counter);\n\n return (\n <div>\n <div>\n <button onClick={() => setCount(count + 1)}>Increment<\/button>\n <span>{count}<\/span>\n <button onClick={() => setCount(count - 1)}>Decrement<\/button>\n <button onClick={() => setCount(0)}>Reset<\/button>\n <\/div>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\n\n\n\nHere, we read in the value of our state from atom.js using useRecoilState. We set up three buttons to increase the value of our count, decrement it and reset it.<\/p>\n\n\n\n
Benefits of Using Recoil<\/strong><\/h2>\n\n\n\n- Recoil is a simple way to implement state management. It can be incorporated in applications with simple architectures. Apart from Atom and Selector, there isn’t much to it, making it easier to understand.<\/li>
- It has a React-like approach as its application is similar to the useState React-hook thereby making it simpler to work within React applications.<\/li><\/ul>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\nSo far we’ve seen how we can manage state in our React applications using various methods and libraries.
Ranging from Hooks and Context API for small to medium projects and Redux and Recoil for medium to large projects.
Still, there are a ton of state libraries to choose from in the React ecosystem and beyond. Most of them are designed and developed around a certain concept and towards a particular use case.<\/p>\n\n\n\n
Let’s highlight some of these state management libraries:<\/p>\n\n\n\n
- XState<\/a> – Which is a library built on a concept called state machines<\/a>. State machines allow you to set a run or perform a specific action for a specific or defined state. A very simple example of a state machine can be seen in a switch case statement<\/li><\/ul>\n\n\n\n
<>switch (state) {\n case state === 'light':\n \/\/ enable light theme\n break;\n case state === 'dark':\n \/\/ enable light theme\n break;\n default:\n \/\/ handle error\n}<\/code><\/pre>\n\n\n\n- You can learn more about XState and state machines from this article<\/a>, the docs<\/a>, or watching this course<\/a>.<\/li>
- Mobx –<\/a> It is a stage-management library that is unopinionated, not platform-specific, which means it can be used outside react. It follows the transparent application of functional reactive programming (TFRP). Unlike some libraries like Redux, MobX allows multiple Stores. You can get started with MobX<\/a> quite easily as it doesn’t have a steep learning curve.<\/li>
- Valtio<\/a> – A simple lightweight proxy-based state management library that provides a mutation-style API<\/li>
- Jotai<\/a> – A Primitive and flexible state management for React which provides a minimalistic API. It supports TypeScript and is optimized for computed values and asynchronous actions to state.<\/li>
- Zustand<\/a> – A small, fast, and scalable state-management solution. It’s specifically focused on module state. This library is based on Hooks and is un-opinionated.<\/li><\/ul>\n\n\n\n
The Future of State Management in React<\/strong><\/h3>\n\n\n\nCurrently, some of the approaches to state management that we’ve discussed so far come with some caveats.
For example, in large applications, we might have issues with excessive re-rendering with the Hooks + Context API method.
This is because when Context value changes, every component subscribes to that Context with useContext will re-render even if it doesn’t depend on the particular piece of state that was changed.<\/p>\n\n\n\n
React has useMemo<\/a> which is an available workaround for this re-rendering issue. It’s a built-in hook that allows you to memoize<\/a> expensive functions.<\/p>\n\n\n\nIn the near future, to fix this issue, the React team has been working on useSelectedContext feature that allows you to subscribe to only a selected part of the Context. You can check out the progress of this feature here<\/a>.<\/p>\n\n\n\nAlthough the new useSelectedContext is an in-house solution to this re-rendering problem, other third-party libraries can be used. useContextSelector<\/a> which is being used under the hood by Jotai<\/a> and Formik 3<\/a>, works similarly.<\/p>\n\n\n\n
State in JavaScript applications simply refers to all data generated through user actions. It is a plain JavaScript object that holds information used by React to render components in which its content is dynamic depending on the resultant action of users. React applications, whether functional or class components can have stated. In react applications, data can be passed between components through a method called “Prop-drilling”. This is when data is passed continuously from parents to descendants. But as the application gets larger, the need for a global state to hold and share states arises.
In large applications such as e-commerce sites, when users interact with a certain component changes are effected into components in the application. For instance:<\/p>\n\n\n\n
- Adding a shopping item to a cart requires the resulting data to be passed from the shopping component to the cart component.<\/li>
- Add purchased product to user purchase history<\/li>
- Checkout of items in the cart<\/li>
- In complex apps, these changes can be difficult to track, therefore the need for a structure to handle data flow and manage communication between our app\u2019s components. State management is a definite structure for managing communication and sharing of states in our application.<\/li>
- State management libraries provide us with tools to create and manage updates of these structures. Over the years, different state management libraries have been developed. Knowing what state management libraries to use is crucial to the development of an application. In this tutorial, we will be looking at some state management libraries and how they can be used.<\/li><\/ul>\n\n\n\n
Hooks<\/strong><\/h2>\n\n\n\n
There are many methods of managing state in React applications. You can opt for class-based state management, React Hooks or third-party libraries like Redux<\/a> or Recoil. In this section, we’ll talk about how we can manage state using Hooks which is encouraged<\/a> by the React Docs.<\/p>\n\n\n\n
According to the React Docs<\/a>, Hooks are basically functions that let you access state and other React features without using a class component. So no single object holds all the state of the component. This allows you to split state into chunks that can be independently updated.<\/p>\n\n\n\n
In this section, we’ll be looking at a few of the most important Hooks used to manage state. We’ll talk about setting state using the useState and useReducer Hooks.<\/p>\n\n\n\n
The useState Hook<\/strong>
The useState Hook is useful for setting and updating state, similar to this.state in a a class component. With useState you can set the value without referencing the current state.<\/p>\n\n\n\nconst<\/strong> [state, setState] = useState(initialState);<\/code><\/p>\n\n\n\nuseState<\/code> is a function that takes in the initial state (initialState in the code above) as an argument. It returns an array of two items which we obtain and assign their values to any variable name we choose using destructuring.
The first item ( state ) from the returned array is a variable containing the state which you can use in your component.
The second item from the array is a function (setState<\/code> ) that will update the state.<\/p>\n\n\n\nLet’s have a look at this Hook in action with this example Movies component.<\/p>\n\n\n\n
<>
import React, { useState } from \"react\";\n\n\/\/ array of movie objects\nconst movies = [\n {\n title: \"Black Widow\",\n price: \"12.00\",\n rating: \"4.0\"\n },\n {\n title: \"Justice Leage - Snyder Cut\",\n price: \"10.00\",\n rating: \"4.9\"\n }\n];\n\nexport default function Movies() {\n \/\/ create state variables with initial values\n const [bookedMovies, setBookedMovies] = useState([]);\n const [totalPrice, setTotalPrice] = useState(0);\n\n \/\/ functions to set the state\n const add = () => {\n \/\/ set state for bookedMovies\n setBookedMovies([movies[0]]);\n \/\/ set state for totalPrice\n setTotalPrice(movies[0].price);\n };\n\n \/\/ reset state values\n const remove = () => {\n \/\/ reset values\n setBookedMovies([]);\n setTotalPrice(0);\n };\n\n return (\n <div>\n <header>\n <p> No. of movies: {bookedMovies.length} <\/p>\n <p> Total price: ${totalPrice} <\/p>\n <\/header>\n\n <ul className=\"movies\">\n {movies.map((movie) => {\n return (\n <li className=\"movie\" key={movie.name}>\n <header>\n <h3> {movie.title} <\/h3>\n <p> ${movie.price} <\/p>\n <\/header>\n\n <button onClick={add}> Add <\/button>\n <button onClick={remove}> Remove <\/button>\n <\/li>\n );\n })}\n <\/ul>\n <\/div>\n );\n}\n<\/code><\/pre>\n\n\n\n<>
\/\/ BeforeUnloadEvent(()=>{\n\/\/ alert('before now')\n\/\/ })\n<\/code><\/pre>\n\n\n\nHere, we imported the
useState<\/code> Hook from React. Then we initialized two independent states of data:bookedMovies<\/code> andtotalPrice<\/code>.<\/p>\n\n\n\nThis is a huge advantage of
useState<\/code> hooks over class-based state management, which provides only a single state object. With Hooks, we can have multiple and independent state objects by just calling theuseState<\/code> function, provide an initial state or value and assign the items of the array to new variables.<\/p>\n\n\n\nLet’s see how we can set the value of our state. Here, we’ll create a function that will allow users to update our state with some predefined data. First we’ll create a function that will add a new movie to our
bookedMovies<\/code> array and set the price.<\/p>\n\n\n\n<>
...\n\nexport default function Movies() {\n \/\/ create state variables with initial values\n const [bookedMovies, setBookedMovies] = useState([]);\n const [totalPrice, setTotalPrice] = useState(0);\n\n \/\/ functions to set the state\n const add = () => {\n \/\/ set state for bookedMovies\n setBookedMovies([movies[0]]);\n \/\/ set state for totalPrice\n setTotalPrice(movies[0].price);\n };\n\n \/\/ reset state values\n const remove = () => {\n \/\/ reset values\n setBookedMovies([]);\n setTotalPrice(0);\n };\n\n return (\n <div>\n <header>\n <p> No. of movies: {bookedMovies.length} <\/p>\n <p> Total price: ${totalPrice} <\/p>\n <\/header>\n\n <ul className=\"movies\">\n {movies.map((movie) => {\n return (\n <li className=\"movie\" key={movie.name}>\n <header>\n <h3> {movie.title} <\/h3>\n <p> ${movie.price} <\/p>\n <\/header>\n\n <button onClick={add}> Add <\/button>\n <button onClick={remove}> Remove <\/button>\n <\/li>\n );\n })}\n <\/ul>\n <\/div>\n );\n}<\/code><\/pre>\n\n\n\nEdit on CodeSandbox<\/a><\/p>\n\n\n\n
In the code above, we created two functions,
add()<\/code> and remove. Theadd()<\/code> function uses the functionsetBookedMovies<\/code> to set the value ofbookedMovies<\/code> and `setTotalPrice` to set the value oftotalPrice.<\/code><\/p>\n\n\n\nWe’re calling this
add()<\/code> function using theonClick<\/code> event listener on the Add button.
Once the button is clicked,bookedMovies<\/code> is assigned the value of the first movie in the movies list ( “Black Widow” ) andtotalPrice<\/code> now contains the price of the first movie ( 12.00 ).
On the other hand, theremove()<\/code> function setsbookedMovies<\/code> andtotalPrice<\/code> to an empty array and 0 respectively.<\/p>\n\n\n\nGreat! We’ve seen how we can set and update state data with
useState.<\/code> But we’re using static, hard-coded values. In real-world applications, you may need to use the previous state to set the new state instead of overwriting it. Let’s see how we can update the state using the current state with theuseReducer<\/code> hook.<\/p>\n\n\n\nThe useReducer Hook<\/strong>
So far we’ve been updating our state and overwriting the previous state with static values. However, in a real application, you’ll want to be able to update the booked movies with the previous items in place.<\/p>\n\n\n\nWith
useReducer<\/code> we’ll be able to update the state based on the previous state. This Hook is designed to update the state based on the current state like the Array Reduce method.<\/p>\n\n\n\nFirst, we’ll create a
bookedMoviesReducer<\/code> function which takes in two arguments, state, andaction.state<\/code> is the current state and action is an object containing two properties, the movie object and the type of action to be performed on the state – “add” or “remove”.<\/p>\n\n\n\n<>
...\n\nfunction bookedMoviesReducer(state, action) {\n\n \/\/ get the movie object and the type of action by destructuring\n const { movie, type } = action\n\n \/\/ if \"add\"\n \/\/ return an array of the previous state and the movie object\n if (type === \"add\") return [...state, movie]\n\n \/\/ if \"remove\"\n \/\/ remove the movie object in the previous state\n \/\/ that matches the title of the current movie object\n if (type === \"remove\") {\n const movieIndex = state.findIndex( x => x.title === movie.title)\n\n \/\/ if no match, return the previous state\n if(movieIndex < 0 ) return state \n\n \/\/ avoid mutating the original state, create a copy\n const stateUpdate = [...state]\n\n \/\/ then splice it out from the array\n stateUpdate.splice(movieIndex, 1)\n return stateUpdate\n }\n return state\n}\n\n...\n\nexport default function Movie(){\n ...\n}<\/code><\/pre>\n\n\n\nThen, we have a
totalPriceReducer<\/code> function which takes the same arguments as thebookedMoviesReducer<\/code> but just adds and subtracts the value of the previous state to and from the new one respectively.<\/p>\n\n\n\n<>
... \n\nfunction totalPriceReducer(state, action) {\n const{ price, type } = action\n if (type === \"add\") return state + price\n\n \/\/ return the value when the type of action was not \"add\"\n \/\/ subract the new movie price from the previous state\n return (state - price) < 0 ? 0 : ( state - price )\n}\n\n...\n\nexport default function Movie(){\n ...\n}<\/code><\/pre>\n\n\n\nNote the ternary operator in the return statement above. This resets the calculation to 0 if state – price is ever lesser than 0 (negative).<\/p>\n\n\n\n
Now that we have our refactored functions, let’s use them in
useReducer<\/code><\/p>\n\n\n\n<>
import React, { useReducer } from 'react';\n\n...\n\nexport default function Movies() {\n \/\/ replace useState with useReducer and pass two arguments\n \/\/ the first argument is the reducer function\n \/\/ the second function is the initialState\n const [bookedMovies, setBookedMovies] = useReducer(bookedMoviesReducer, []);\n const [totalPrice, setTotalPrice] = useReducer(totalPriceReducer, 0);\n\n \/\/ function to add items and price\n const add = (movie) => {\n \/\/ pass an object containing the movie and type of action, \"add\"\n setBookedMovies({ movie, type: \"add\" });\n setTotalPrice({ price: movie.price, type: \"add\" });\n };\n\n \/\/ function to remove items and price\n const remove = (movie) => {\n setBookedMovies({ movie, type: \"remove\" });\n setTotalPrice({ price: movie.price, type: \"remove\" });\n };\n\n return (\n ...\n )\n}\n...<\/code><\/pre>\n\n\n\nNow that we’ve edited our
add()<\/code> andremove()<\/code> function to take a movie argument, we can pass in the movie as the argument in ouronClick<\/code> listener in our template.<\/p>\n\n\n\n<>
...\n\n{movies.map((movie) => {\n return (\n <li className=\"movie\" key={movie.name}>\n <header>\n <h3> {movie.title} <\/h3>\n <p> ${movie.price} <\/p>\n <\/header>\n\n <button onClick={() => add(movie)}> Add <\/button>\n <button onClick={() => remove(movie)}> Remove <\/button>\n <\/li>\n );\n})}\n...<\/code><\/pre>\n\n\n\nEdit on CodeSandbox<\/a><\/p>\n\n\n\n
Now if we click on the Add button, it runs the
add()<\/code> function which takes movie as an argument which is in turn passed into the setBookedMovies andsetTotalPrice<\/code> functions. Each of these functions are returned from their respectiveuseReducer<\/code> functions.<\/p>\n\n\n\n<>
const [ bookedMovies, setBookedMovies ] = useReducer(bookedMoviesReducer, []);\nconst [ totalPrice, setTotalPrice ] = useReducer(totalPriceReducer, 0);<\/code><\/pre>\n\n\n\nEach function takes an object as an argument.
ForsetBookedMovies<\/code>, it takes this object –{movie, type: \"add\"}<\/code> as an argument, while,setTotalPrice<\/code> takes this object –{price: movie.price, type: \"add\"}<\/code> as an argument.<\/p>\n\n\n\nThese objects are then passed into their respective reducer functions to update the state.
setBookedMovies<\/code> for example passes its object intobookedMoviesReducer<\/code>.<\/p>\n\n\n\nThis reducer function adds this new data to the previous state without overwriting it.
You can check out the CodeSandbox above to see this in action.
Next, we’ll see how we can manage state across multiple components using Hooks, Props, and the Context API.<\/p>\n\n\n\nContext API<\/strong><\/h2>\n\n\n\n
React Context API<\/a> was an experimental feature of React that became available to use for production in version 16.3.0<\/a> of React.<\/p>\n\n\n\n
According to the docs, Context provides a way to pass data through and between components in your app’s component tree without having to manually pass props down through multiple component levels.<\/p>\n\n\n\n
This manual passing of props is often referred to as prop drilling<\/strong>.
With Context, you can set up a “global” state for a tree of React components. This state can now be accessible from any component without having to pass it through intermediate components.<\/p>\n\n\n\nTo illustrate how we can share state between components using Context API, we’ll break the app in the example above into two sub-components:<\/p>\n\n\n\n
BookedMovies<\/code> – This would contain the total number of booked movies and the total price<\/li>Movies<\/code> – This renders a list of all available movies, their details, and then add<\/strong> and remove<\/strong> buttons for adding and removing the movie from the booked list.<\/li><\/ul>\n\n\n\nCurrently, all our pieces of state, the movies including bookedMovies and totalPrice which we set using Hooks are all in one component – App.js.
For our state to be accessible to our child components, we can pass it down the data using props.
This implies that we have to lift the state up<\/strong> to the topmost component of our component tree and pass it down to the component that needs to access the state. Now, this can be two or more levels down the component tree which takes us back to prop drilling.<\/p>\n\n\n\nInstead of doing all that, we can initialize Context and set up a “global” state that can be accessed from any component on the tree.<\/p>\n\n\n\n
Initialize Context<\/strong>
To initialize context<\/a>, we can create a new file MoviesContext.js specifically for our Context, import createContext, and create our Context.<\/p>\n\n\n\n<>
import React, {useReducer, createContext} from 'react';export const MovieContext = createContext();<\/code><\/pre>\n\n\n\nCreate Context Provider<\/strong>
Now that we’ve initialized Context, we can create a Context Provider. According to the docs, every Context object comes with a Provider component that allows components wrapped within it to subscribe to context changes.<\/p>\n\n\n\n<>
import React, { useState, useReducer, createContext } from \"react\";\n\nconst moviesList = [\n ...\n];\n\nfunction bookedMoviesReducer(state, action) {\n ...\n};\n\nexport const MovieContext = createContext();\n\nexport const MovieProvider = (props) => {\n const [movies, setMovies] = useState(moviesList);\n const [bookedMovies, setBookedMovies] = useReducer(bookedMoviesReducer, []);\n\n return <MovieContext.Provider>{props.children}<\/MovieContext.Provider>;\n};<\/code><\/pre>\n\n\n\nHere, we’ve moved all our state and reducer functions into our Context file MoviesContext.js. Then in our MovieProvider function, we initialize the state using useState and useReducer Hooks.<\/p>\n\n\n\n
Finally, we’re returning the Provider component
<MovieContext.Provider>.<\/code> props.children will allow us to render the components that will be nested within the provider.
Here’s our refactored App.js file with imported components and Context.<\/p>\n\n\n\n<>
\/\/ .\/App.js\n\nimport React from \"react\";\nimport Movies from \".\/components\/Movies\";\nimport BookedMovies from \".\/components\/BookedMovies\";\nimport { MovieProvider } from \".\/moviesContext\";\n\nexport default function App() {\n return (\n <MovieProvider>\n <main>\n <Movies \/>\n <BookedMovies \/>\n <\/main>\n <\/MovieProvider>\n );\n}<\/code><\/pre>\n\n\n\nGreat. We’ve managed to create a provider and wrap our components with the provider in our app. We currently don’t have access to any of our state from the Context. Let’s see how we can consume or use the state.<\/p>\n\n\n\n
Consuming our state<\/strong>
The Provider component accepts a value prop<\/a> that can be accessed by components that are descendants of the Provider. We have to pass all our state into our app in our Context file MoviesContext.js<\/p>\n\n\n\n<>
\/\/ .\/MoviesContext.js\n...\n return (\n <MovieContext.Provider\n value={{\n movies,\n setMovies,\n bookedMovies,\n setBookedMovies,\n }}\n >\n {props.children}\n <\/MovieContext.Provider>\n );\n...<\/code><\/pre>\n\n\n\nTo subscribe to these pieces of state in our components, we have to import MovieContext and consume it with the useContext Hook. Here’s how we can do that in our Movies component.<\/p>\n\n\n\n
<>
\/\/ .\/components\/Movies.js\n\n\/\/ import the useContext Hook\nimport React, { useContext } from \"react\";\n\/\/ import the Context\nimport { MovieContext } from \"..\/moviesContext\";\n\nexport default function Movies() {\n const { movies, setBookedMovies } = useContext(MovieContext);\n \/\/ function to add items and price\n const add = (movie) => {\n \/\/ pass an object containing the movie and type of action, \"add\"\n setBookedMovies({ movie, type: \"add\" });\n };\n\n \/\/ function to remove items and price\n const remove = (movie) => {\n setBookedMovies({ movie, type: \"remove\" });\n };\n\n return (\n <ul className=\"movies\">\n {movies.map((movie) => {\n return (\n <li className=\"movie\" key={movie.name}>\n <header>\n <h3> {movie.title} <\/h3>\n <p> ${movie.price} <\/p>\n <\/header>\n\n <button onClick={() => add(movie)}> Add <\/button>\n <button onClick={() => remove(movie)}> Remove <\/button>\n <\/li>\n );\n })}\n <\/ul>\n );\n}<\/code><\/pre>\n\n\n\nNow we can access all our state from this component. We can also do the same thing for our BookedMovies component.<\/p>\n\n\n\n
<>
\/\/ .\/components\/BookedMovies.js\n\nimport React, { useContext } from \"react\";\nimport { MovieContext } from \"..\/moviesContext\";\n\nfunction BookedMovies() {\n const {bookedMovies} = useContext(MovieContext);\n\n const getTotalPrice = (bookedMovies) => {\n const totalPrice = bookedMovies.reduce((totalCost, item) => totalCost + item.price, 0);\n return totalPrice\n }\n\n return (\n <header>\n <p> No. of movies: {bookedMovies.length} <\/p>\n <p> Total price: ${getTotalPrice(bookedMovies)} <\/p>\n <\/header>\n );\n}\n\nexport default BookedMovies;<\/code><\/pre>\n\n\n\nEdit on CodeSandbox<\/a><\/p>\n\n\n\n
There we go. We’ve managed to subscribe to
bookedMovies<\/code> state from our Context in this component. Also, we’ve refactored the total price functionality and created a new functiongetTotalPrice<\/code> that will get the price from each movie on thebookedMovie<\/code> array and total it.<\/p>\n\n\n\nThat’s how we can manage state using the Context API and Hooks.
In the next sections, we’ll see how we can manage state using other popular libraries like Redux and Recoil.<\/p>\n\n\n\nRedux<\/strong><\/h2>\n\n\n\n
What is Redux?<\/strong>
Redux<\/a> as the doc implies is a container for Javascript apps. It allows us to manage our app state, track and manage changes as the app progresses. Redux allows React components to read data from a Redux store and dispatch actions to the store to update this data. Here is a diagrammatic representation of how Redux works:<\/p>\n\n\n\nThe UI is updated based on the changes made to the state stored in the store thereby making it easier to continuously update as changes are made.
Redux provides a central store where our state resides. Each component in the application can then access the stored data without having to send it from one component to another.<\/p>\n\n\n\nWhen should we use Redux?<\/strong><\/h2>\n\n\n\n
You can use Redux in your application when:<\/p>\n\n\n\n
- There are large amounts of states in the app that undergo frequent updates. It solves the problem of prop drilling between components and makes it easier to handle continuous mutations of states.<\/li>
- When a complex algorithm is required to handle updating of the app\u2019s states.<\/li>
- When a reasonable amount of data changes overtime. If the application has data that is constantly being updated, Redux can be used to manage this data and create a structure for it.<\/li>
- When state management is shared. Redux is suitable for cases where the application is shared over a codebase with different developers working on the same application.<\/li><\/ul>\n\n\n\n
How Does Redux Work?<\/strong><\/h2>\n\n\n\n
Redux is made up of three primary components: Redux Store, Action, and Reducer.<\/p>\n\n\n\n
Redux Store: This<\/strong> is the brain of our state management structure. It manages the state and dispatches Action on managing the state of our application.<\/p>\n\n\n\n
Action<\/strong>: refer to instructions sent that can be interpreted by Reducers. It stores information regarding the users\u2019 actions. The action contains a type and a payload. The type is simply a string with the action name while the payload contains the actual data passed by the action.<\/p>\n\n\n\n
Reducers:<\/strong> These are functions that read the instructions sent by the Action and update the store via the state according to the received instructions. They specify how the application’s state will change in response to the actions sent to the store.
Redux promotes good architectural structure in React apps along with UI management and optimizes performance for easy re-rendering of components when needed.
Redux core benefits include:<\/p>\n\n\n\n- Flexibility: Redux is simple to learn and implement. It does not require deep knowledge to make use of.<\/li>
- Maintainable: Redux is straightforward and easy to maintain and control operations on the stored state.<\/li>
- Scalability: Since Redux deals with a central store that contains the state that is shared by components, it makes it suitable for handling states when building complex applications.<\/li>
- Redux supports server-side rendering: The current state of an app can be sent to the server with the response to mutate the state.<\/li>
- Easy to debug: Since Redux is made up of three core parts: the Store, Actions, and Reducers. By logging the values of these parts it is easy to trace and fix errors if any occur.<\/li><\/ul>\n\n\n\n
We will now look at how to set up and use Redux in an app using a counter application as a case study.<\/p>\n\n\n\n
Redux Setup<\/strong><\/h2>\n\n\n\n
To set up Redux for use in our application, we will first need to install the package via CLI<\/p>\n\n\n\n
<>
npm i redux react-redux<\/code><\/pre>\n\n\n\nOnce this is installed, we can create our action and reducer file; action.js, and reduce.js.
In the reduce.js file, we have:<\/p>\n\n\n\n<>
const reduce = (state = 0, action) => {\n switch (action.type) {\n case \"reset value\":\n return (state = 0);\n case \"increase value\":\n return state + 1;\n case \"decrese value\":\n return state - 1;\n default:\n return state;\n }\n};\nexport default reduce;<\/code><\/pre>\n\n\n\nAbove, we created our reducer file which takes state as value “0” then based on the value of action.type which is the name of the action makes changes to the value of the state. We have set up a conditional block to make different changes based on the type of action dispatched to the reducer. As defined, if the action type is “reset value”, state will be set to 0, if the action type is “increase value”, the value of state will be increased by one and vice-versa.<\/p>\n\n\n\n
Creating a Central Store<\/strong><\/h2>\n\n\n\n
To create the store, we will need to create a new file and import createstore from redux:<\/p>\n\n\n\n
import { createStore } from \"redux\";<\/code><\/p>\n\n\n\nWe also need to import our reducer into the file. After which we will import Provider from Redux. The Provider is responsible for connecting the central state to our application. We will need to wrap the components that will use the Redux state within the provider, preferably in the root.<\/p>\n\n\n\n
<>
import reduce from \".\/reduce\"\nimport { Provider } from \"react-redux\";<\/code><\/pre>\n\n\n\nThen to create the store:<\/p>\n\n\n\n
<>
const store = createStore(\n reduce,\n);\nReactDOM.render(\n <React.StrictMode>\n <Provider store={store}>\n <App \/>\n <\/Provider>\n <\/React.StrictMode>,\n document.getElementById(\"root\")\n);<\/code><\/pre>\n\n\n\nWe will have to define our actions and export them in our
action.js<\/code> file:<\/p>\n\n\n\n<>
export const increment = () => {\n return {\n type: \"increment value\",\n };\n};\n\nexport const decrement = () => {\n return {\n type: \"decrement value\",\n };\n};\n\nexport const reset = () => {\n return {\n type: \"reset value\",\n };\n};<\/code><\/pre>\n\n\n\nDispatch Actions<\/strong><\/h2>\n\n\n\n
To dispatch the actions increment value, reset value and decrement value we need to import the actions and use the useDispatch hook provided by react-redux to dispatch our actions.<\/p>\n\n\n\n
<>
import { useDispatch } from \"react-redux\";<\/code><\/pre>\n\n\n\nThen, back in our App.js file, we can create buttons with functionalities to perform the actions we defined:<\/p>\n\n\n\n
<>
import { useSelector, useDispatch } from \"react-redux\";\nimport {\n decrement,\n increment,\n reset,\n} from \".\/action\";\n\nfunction App() {\n const counter = useSelector((state) => state.counter);\n const dispatch = useDispatch();\n\n return (\n <div className=\"App\">\n <p>Counter to demonstrate redux<\/p>\n <h3>{counter}<\/h3>\n <button onClick={() => dispatch(increment())}>Increment<\/button>\n <button onClick={() => dispatch(reset())}>Reset<\/button>\n <button onClick={() => dispatch(decrement())}>Decrement<\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\n\n\n\nHere, we have used the useDispatch hook to assign the actions to three different buttons. The value of the counter is based on the current value of the state.<\/p>\n\n\n\n
Recoil<\/strong><\/h2>\n\n\n\n
What is Recoil?<\/strong>
Recoil<\/a> is a new state management library that is open-sourced by Facebook. Recoil also provides a solution to the problem of Global state in applications. Recoil is made up of two major parts: Atom and Selector. Atom is simply a function that lets us store states. It is a shared-state architecture where different components can connect to it to get values from the stored state. On the other hand, a Selector is similar to Atom except that it allows us to have a derived state. The value of a Selector can be derived from the Atom or another Selector.<\/p>\n\n\n\nRecoil Setup<\/strong><\/h2>\n\n\n\n
To demonstrate how to use Recoil in an application we will use an example similar to the counter we created in Redux above. To install Recoil, run the following command in your CLI:<\/p>\n\n\n\n
npm install recoil<\/code><\/p>\n\n\n\nThen we can import it into our app and define our state:<\/p>\n\n\n\n
<>
\/\/atom.js\nimport { atom } from \"recoil\";\nconst counter = atom({\n key: \"counter\",\n default: 0\n});\n\nexport default counterAtom;<\/code><\/pre>\n\n\n\nAbove, the counter is our state. It has a key of “counter” and a default value of 0. In Recoil, components that use recoil state need to be wrapped in RecoilRoot. We will add this to our root component:<\/p>\n\n\n\n
<>
\/\/index.js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { RecoilRoot } from \"recoil\";\nimport App from \".\/App\";\n\nReactDOM.render(\n <RecoilRoot>\n <App \/>\n <\/RecoilRoot>,\n document.getElementById(\"root\")\n);<\/code><\/pre>\n\n\n\nIn Recoil, we can use the
useRecoilState()<\/code> hook to read the value of a recoil state. Now we will create buttons with the functionality to mutate the state stored inatom.js<\/code>:<\/p>\n\n\n\n<>
\/\/ App.js\nimport React from \"react\";\nimport { useRecoilState } from \"recoil\";\nimport counter from \".\/atom\";\n\nconst App = () => {\n const [count, setCount] = useRecoilState(counter);\n\n return (\n <div>\n <div>\n <button onClick={() => setCount(count + 1)}>Increment<\/button>\n <span>{count}<\/span>\n <button onClick={() => setCount(count - 1)}>Decrement<\/button>\n <button onClick={() => setCount(0)}>Reset<\/button>\n <\/div>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\n\n\n\nHere, we read in the value of our state from atom.js using useRecoilState. We set up three buttons to increase the value of our count, decrement it and reset it.<\/p>\n\n\n\n
Benefits of Using Recoil<\/strong><\/h2>\n\n\n\n
- Recoil is a simple way to implement state management. It can be incorporated in applications with simple architectures. Apart from Atom and Selector, there isn’t much to it, making it easier to understand.<\/li>
- It has a React-like approach as its application is similar to the useState React-hook thereby making it simpler to work within React applications.<\/li><\/ul>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
So far we’ve seen how we can manage state in our React applications using various methods and libraries.
Ranging from Hooks and Context API for small to medium projects and Redux and Recoil for medium to large projects.
Still, there are a ton of state libraries to choose from in the React ecosystem and beyond. Most of them are designed and developed around a certain concept and towards a particular use case.<\/p>\n\n\n\nLet’s highlight some of these state management libraries:<\/p>\n\n\n\n
- XState<\/a> – Which is a library built on a concept called state machines<\/a>. State machines allow you to set a run or perform a specific action for a specific or defined state. A very simple example of a state machine can be seen in a switch case statement<\/li><\/ul>\n\n\n\n
<>
switch (state) {\n case state === 'light':\n \/\/ enable light theme\n break;\n case state === 'dark':\n \/\/ enable light theme\n break;\n default:\n \/\/ handle error\n}<\/code><\/pre>\n\n\n\n- You can learn more about XState and state machines from this article<\/a>, the docs<\/a>, or watching this course<\/a>.<\/li>
- Mobx –<\/a> It is a stage-management library that is unopinionated, not platform-specific, which means it can be used outside react. It follows the transparent application of functional reactive programming (TFRP). Unlike some libraries like Redux, MobX allows multiple Stores. You can get started with MobX<\/a> quite easily as it doesn’t have a steep learning curve.<\/li>
- Valtio<\/a> – A simple lightweight proxy-based state management library that provides a mutation-style API<\/li>
- Jotai<\/a> – A Primitive and flexible state management for React which provides a minimalistic API. It supports TypeScript and is optimized for computed values and asynchronous actions to state.<\/li>
- Zustand<\/a> – A small, fast, and scalable state-management solution. It’s specifically focused on module state. This library is based on Hooks and is un-opinionated.<\/li><\/ul>\n\n\n\n
The Future of State Management in React<\/strong><\/h3>\n\n\n\n
Currently, some of the approaches to state management that we’ve discussed so far come with some caveats.
For example, in large applications, we might have issues with excessive re-rendering with the Hooks + Context API method.
This is because when Context value changes, every component subscribes to that Context with useContext will re-render even if it doesn’t depend on the particular piece of state that was changed.<\/p>\n\n\n\nReact has useMemo<\/a> which is an available workaround for this re-rendering issue. It’s a built-in hook that allows you to memoize<\/a> expensive functions.<\/p>\n\n\n\n
In the near future, to fix this issue, the React team has been working on useSelectedContext feature that allows you to subscribe to only a selected part of the Context. You can check out the progress of this feature here<\/a>.<\/p>\n\n\n\n
Although the new useSelectedContext is an in-house solution to this re-rendering problem, other third-party libraries can be used. useContextSelector<\/a> which is being used under the hood by Jotai<\/a> and Formik 3<\/a>, works similarly.<\/p>\n\n\n\n
- Mobx –<\/a> It is a stage-management library that is unopinionated, not platform-specific, which means it can be used outside react. It follows the transparent application of functional reactive programming (TFRP). Unlike some libraries like Redux, MobX allows multiple Stores. You can get started with MobX<\/a> quite easily as it doesn’t have a steep learning curve.<\/li>
- You can learn more about XState and state machines from this article<\/a>, the docs<\/a>, or watching this course<\/a>.<\/li>
- XState<\/a> – Which is a library built on a concept called state machines<\/a>. State machines allow you to set a run or perform a specific action for a specific or defined state. A very simple example of a state machine can be seen in a switch case statement<\/li><\/ul>\n\n\n\n