Global state management

Up to this point, we have been using React to build our applications. However, we have been using local state to manage the data. This is not a problem for small applications, but as the application grows, it becomes harder to manage the state. This is where global state management comes in.

When we have multiple components that need to access the same state, global state managers allow us to create a single source of truth for our application.

There are multiple libraries that allow us to manage the state of our application. The most popular ones are:

Redux has been the most popular choice for a long time, but recently other libraries have been gaining popularity. Zustand is a fantastic alternative to Redux when we don't want to write all the boilerplate that Redux requires. Jotai is a new library gaining popularity and allows for more atomic state management if your application requires it.

Generally, Redux and Zustand are the best options for state management. Redux is an excellent choice if our application also requires complex API calls by pairing it with RTK Query.

Some may argue that another alternative is to use React Context. This is a valid option but only in some scenarios. A Context depends on a local state of React. This means that if we want to mutate the Context, we would be re-rendering the whole component tree under the Context. This is fine if we only read data and make very few changes to the state.

Another problem that global state management (and React Context) solves is the problem of prop drilling. If we have a component 5 levels deep in the component tree and want to pass some data to it, we would have to pass it through all the components in between.

If you made multiple components in the previous excercise, you might have experienced this.

Exercise 2 - To Do List with global state management

We will reimplement the previous exercise using global state management (either Redux or Zustand).

Valuable resources to solve this exercise:

To complete this exercise, the following must be made:

  1. Implement a form that allows the user to create a new task.
  2. Implement a list that shows all the tasks.
  3. Implement a button that allows the user to mark a task as completed.
  4. Implement a button that allows the user to delete a task.
  5. For all actions (create, delete, mark as completed), the list must be updated in the client using redux|zustand.
  6. Maintain the same UI as the previous exercise.

Exercise 2.1 - Let's improve the UI even more

Some users are very picky with their UI. They either want it on light mode or dark mode. Let's add a button that allows the user to change the application's theme by changing a state using the React Context.

To complete this exercise, the following must be made:

  1. Implement a button that allows the user to change the application's theme.
  2. The state is accessed using the React Context.
  3. The button must change the theme of the application.
  4. The theme must be persisted in the local storage.

Valuable resources to solve this exercise: