Book Image

Micro State Management with React Hooks

By : Daishi Kato

Book Image

Micro State Management with React Hooks

By: Daishi Kato

Overview of this book

State 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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Part 1: React Hooks and Micro State Management

Part 1: React Hooks and Micro State Management

Free Chapter

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

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

Technical requirements

Understanding micro state management

Working with hooks

Exploring global states

Working with useState

Using useReducer

Exploring the similarities and differences between useState and useReducer

Part 2: Basic Approaches to the Global State

Part 2: Basic Approaches to the Global State

Chapter 2: Using Local and Global States

Chapter 2: Using Local and Global States

Technical requirements

Understanding when to use local states

Effectively using local states

Using global states

Chapter 3: Sharing Component State with Context

Chapter 3: Sharing Component State with Context

Technical requirements

Exploring useState and useContext

Understanding Context

Creating a Context for a global state

Best practices for using Context

Chapter 4: Sharing Module State with Subscription

Chapter 4: Sharing Module State with Subscription

Technical requirements

Exploring the module state

Using a module state as a global state in React

Adding a basic Subscription

Working with a selector and useSubscription

Chapter 5: Sharing Component State with Context and Subscription

Chapter 5: Sharing Component State with Context and Subscription

Technical requirements

Exploring the limitations of module state

Understanding when to use Context

Implementing the Context and Subscription pattern

Part 3: Library Implementations and Their Uses

Part 3: Library Implementations and Their Uses

Chapter 6: Introducing Global State Libraries

Chapter 6: Introducing Global State Libraries

Technical requirements

Working with global state management issues

Using the data-centric and component-centric approaches

Optimizing re-renders

Chapter 7: Use Case Scenario 1 – Zustand

Chapter 7: Use Case Scenario 1 – Zustand

Technical requirements

Understanding module state and immutable state

Using React hooks to optimize re-renders

Working with read state and update state

Handling structured data

Pros and cons of this approach and library

Chapter 8: Use Case Scenario 2 – Jotai

Chapter 8: Use Case Scenario 2 – Jotai

Technical requirements

Understanding Jotai

Exploring render optimization

Understanding how Jotai works to store atom values

Adding an array structure

Using the different features of Jotai

Chapter 9: Use Case Scenario 3 – Valtio

Chapter 9: Use Case Scenario 3 – Valtio

Technical requirements

Exploring Valtio, another module state library

Utilizing proxies to detect mutations and create an immutable state

Using proxies to optimize re-renders

Creating small application code

The pros and cons of this approach

Chapter 10: Use Case Scenario 4 – React Tracked

Chapter 10: Use Case Scenario 4 – React Tracked

Technical requirements

Understanding React Tracked

Using React Tracked with useState and useReducer

Using React Tracked with React Redux

Future prospects

Chapter 11: Similarities and Differences between Three Global State Libraries

Chapter 11: Similarities and Differences between Three Global State Libraries

Technical requirements

Differences between Zustand and Redux

Understanding when to use Jotai and Recoil

Using Valtio and MobX

Comparing Zustand, Jotai, and Valtio

Other Books You May Enjoy

Other Books You May Enjoy

Packt is searching for authors like you

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

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