Micro State Management with React Hooks

Daishi Kato

• Publisher: Packt Publishing
• Year: 2022
• ISBN:
  9781801810043
• Edition: 1
• Topic: Informatica
• Subtopic: Sviluppo web

Explore global state management and select the best library for your applicationKey Features• Understand the essential concepts and features of micro state management• Discover solutions to common problems faced while implementing micro state management• Explore the different libraries, their coding style, and the optimum approach to rendering optimizationBook DescriptionState management is one of the most complex concepts in React. Traditionally, developers have used monolithic state management solutions. Thanks to React Hooks, micro state management is something tuned for moving your application from a monolith to a microservice.This book provides a hands-on approach to the implementation of micro state management that will have you up and running and productive in no time. You'll learn basic patterns for state management in React and understand how to overcome the challenges encountered when you need to make the state global. Later chapters will show you how slicing a state into pieces is the way to overcome limitations. Using hooks, you'll see how you can easily reuse logic and have several solutions for specific domains, such as form state and server cache state. Finally, you'll explore how to use libraries such as Zustand, Jotai, and Valtio to organize state and manage development efficiently.By the end of this React book, you'll have learned how to choose the right global state management solution for your app requirement.What you will learn• Understand micro state management and how you can deal with global state• Build libraries using micro state management along with React Hooks• Discover how micro approaches are easy using React Hooks• Understand the difference between component state and module state• Explore several approaches for implementing a global state• Become well-versed with concrete examples and libraries such as Zustand, Jotai, and ValtioWho this book is forIf you're a React developer dealing with complex global state management solutions and want to learn how to choose the best alternative based on your requirements, this book is for you. Basic knowledge of JavaScript programming, React Hooks and TypeScript is assumed.

Part 1: React Hooks and Micro State Management

In this part, we introduce the concept of micro-state management, which gained attention with React hooks. We also cover the technical aspects of the useState and useReducer hooks to get ready for the next part.

This part comprises the following chapter:

• Chapter 1, What Is Micro State Management with React Hooks?

Chapter 1: What Is Micro State Management with React Hooks?

State management is one of the most important topics in developing React apps. Traditionally, state management in React was something monolithic, providing a general framework for state management, and with developers creating purpose-specific solutions within the framework.

The situation changed after React hooks landed. We now have primitive hooks for state management that are reusable and can be used as building blocks to create richer functionalities. This allows us to make state management lightweight or, in other words, micro. Micro state management is more purpose-oriented and used with specific coding patterns, whereas monolithic state management is more general.

In this book, we will explore various patterns of state management with React hooks. Our focus is on global states, in which multiple components can share a state. React hooks already provide good functionality for local states—that is, states within a single component or a small tree of components. Global states are a hard topic in React because React hooks are missing the capability to directly provide global states; it's instead left to the community and ecosystem to deal with them. We will also explore some existing libraries for micro state management, each of which has different purposes and patterns; in this book, we will discuss Zustand, Jotai, Valtio, and React Tracked.

Important Note

This book focuses on a global state and doesn't discuss "general" state management, which is a separate topic. One of the most popular state management libraries is Redux (https://redux.js.org), which uses a one-way data model for state management. Another popular library is XState (https://xstate.js.org), which is an implementation of statecharts, a visual representation of complex states. Both provide sophisticated methods to manage states, which are out of the scope of this book. On the other hand, such libraries also have a capability for a global state. For example, React Redux (https://react-redux.js.org) is a library to bind React and Redux for a global state, which is in the scope of this book. To keep the focus of the book only on a global state, we don't specifically discuss React Redux, which is tied to Redux.

In this chapter, we will define what micro state management is, discuss how React hooks allow micro state management, and why global states are challenging. We will also recap the basic usage of two hooks for state management and compare their similarity and differences.

In this chapter, we will cover the following topics:

• Understanding micro state management
• Working with hooks
• Exploring global states
• Working with useState
• Using useReducer
• Exploring the similarities and differences between useState and useReducer

Technical requirements

To run code snippets, you need a React environment—for example, Create React App (https://create-react-app.dev) or CodeSandbox (https://codesandbox.io).

You are expected to have basic knowledge of React and React hooks. More precisely, you should already be familiar with the official React documentation, which you can find here: https://reactjs.org/docs/getting-started.html.

We don't use class components and it's not necessary to learn them unless you need to learn some existing code with class components.

The code in this chapter is available on GitHub at https://github.com/PacktPublishing/Micro-State-Management-with-React-Hooks/tree/main/chapter_01.

Understanding micro state management

What is micro state m...