Micro State Management with React Hooks E-Book

Daishi Kato

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 233

Veröffentlichungsjahr: 2022

Beschreibung

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.

Leseprobe

Micro State Management with React Hooks

Explore custom hooks libraries like Zustand, Jotai, and Valtio to manage global states

Daishi Kato

BIRMINGHAM—MUMBAI

Micro State Management with React Hooks

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Aaron Tanna

Senior Editor: Hayden Edwards

Content Development Editor: Rashi Dubey

Technical Editor: Saurabh Kadave

Copy Editor: Safis Editing

Project Coordinator: Rashika Ba

Proofreader: Safis Editing

Indexer: Pratik Shirodkar

Production Designer: Vijay Kamble

Marketing Coordinator: Anamika Singh

First published: January 2022

Production reference: 2150722

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80181-237-5

www.packt.com

For those who love coding.

– Daishi Kato

Contributors

About the author

Daishi Kato is a software engineer who is passionate about open source software. He has been a researcher of peer-to-peer networks and web technologies for decades. His interest is in engineering, and he has been working with start-ups for the last 5 years. He has been actively involved in open source software since the 90s, and his latest work focuses on developing various libraries with JavaScript and React.

I want to thank the people who have been close to me and supported me, especially my family, my co-workers, and contributors to my open source projects.

About the reviewer

Nalin Savara has worked on applications, games, web apps, and solutions since 1996. His work has spanned various platforms (PC/Mac, mobile, and web) and numerous technologies, including React.

He founded Darksun Tech and has contributed dozens of articles and book reviews to PCWorld India. He co-authored the book Algorithm Analysis and Design, which is used as a textbook by the Westwood Colleges (US) course on computer games programming.

Earlier in his career, Nalin was the lead architect of India's first 3D open-terrain game engine, and part of the team that developed Rightserve, Asia's first targeted banner advertising service. He also steered one of India's first cloud tutoring start-ups as its interim CTO.

Table of Contents

Preface

Part 1: React Hooks and Micro State Management

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

Technical requirements

Understanding micro state management

Working with hooks

Suspense for Data Fetching and Concurrent Rendering

Exploring global states

Working with useState

Updating the state value with a value

Updating the state value with a function

Lazy initialization

Using useReducer

Typical usage

Bailout

Primitive value

Lazy initialization (init)

Exploring the similarities and differences between useState and useReducer

Implementing useState with useReducer

Implementing useReducer with useState

Using the init function

Using inline reducers

Summary

Part 2: Basic Approaches to the Global State

Chapter 2: Using Local and Global States

Technical requirements

Understanding when to use local states

Functions and arguments

React components and props

Understanding useState for local states

Limitation of local states

Effectively using local states

Lifting state up

Lift content up

Using global states

What is a global state?

When to use global states

Summary

Chapter 3: Sharing Component State with Context

Technical requirements

Exploring useState and useContext

Using useState without useContext

Using useContext with a static value

Using useState with useContext

Understanding Context

How Context propagation works

Limitations when using Context for objects

Creating a Context for a global state

Creating small state pieces

Creating one state with useReducer and propagating with multiple Contexts

Best practices for using Context

Creating custom hooks and provider components

Factory pattern with a custom hook

Avoiding provider nesting with reduceRight

Summary

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

Summary

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

Summary

Part 3: Library Implementations and Their Uses

Chapter 6: Introducing Global State Libraries

Technical requirements

Working with global state management issues

Using the data-centric and component-centric approaches

Understanding the data-centric approach

Understanding the component-centric approach

Exploring the exceptions of both approaches

Optimizing re-renders

Using a selector function

Detecting property access

Using atoms

Summary

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

Summary

Chapter 8: Use Case Scenario 2 – Jotai

Technical requirements

Understanding Jotai

Syntax simplicity

Dynamic atom creation

Exploring render optimization

Understanding how Jotai works to store atom values

Adding an array structure

Using the different features of Jotai

Defining the write function of atoms

Using action atoms

Understanding the onMount option of atoms

Introducing the jotai/utils bundle

Understanding library usage

Introduction to more advanced features

Summary

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

Summary

Chapter 10: Use Case Scenario 4 – React Tracked

Technical requirements

Understanding React Tracked

Using React Tracked with useState and useReducer

Using React Tracked with useState

Using React Tracked with useReducer

Using React Tracked with React Redux

Future prospects

Summary

Chapter 11: Similarities and Differences between Three Global State Libraries

Technical requirements

Differences between Zustand and Redux

Example with Redux and Zustand

Comparing examples of Redux and Zustand

Understanding when to use Jotai and Recoil

Example with Recoil and Jotai

Comparing examples of Recoil and Jotai

Using Valtio and MobX

Example involving MobX and Valtio

Comparing examples of MobX and Valtio

Comparing Zustand, Jotai, and Valtio

Summary

Other Books You May Enjoy

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?