Learn React Hooks: Unlock scalable state, performance, and clean code with Hooks, Context, Suspense, and Form Actions. 2 Ed

Cover
Copyright
Foreword
Contributors
Table of Contents
Preface
Part 1: Introduction to Hooks
Chapter 1: Introducing React and React Hooks
Technical requirements
Principles of React
Motivation to use React Hooks
Confusing classes
Wrapper hell
Hooks to the rescue!
Setting up the development environment
Installing VS Code and extensions
Setting up a project with Vite
Alternatives to Vite
Setting up ESLint and Prettier to enforce best practices and code style
Installing the necessary dependencies
Configuring Prettier
Configuring the Prettier extension
Creating a Prettier ignore file
Configuring ESLint
Adding a new script to run our linter
Getting started with React Hooks
Starting with a class component
Using Hooks instead
Comparing the solutions
Class component
Function component with a Hook
Advantages of Hooks
Migrating to Hooks
The Hooks mindset
Rules of Hooks
Summary
Questions
Further reading
Chapter 2: Using the State Hook
Technical requirements
Reimplementing the State Hook
Resolving issues with our simple Hook implementation
Using a global variable
Defining multiple Hooks
Adding support for multiple Hooks
Can we define conditional Hooks?
Comparing our reimplementation to real Hooks
Potential alternative Hook APIs
Named Hooks
Hook factories
Other alternatives
Solving common problems with Hooks
Solving conditional Hooks
Always defining the Hook
Splitting up components
Solving Hooks in loops
Using an array
Splitting up components
Summary
Questions
Further reading
Chapter 3: Writing Your First Application with React Hooks
Technical requirements
Structuring React projects
Folder structure
Defining the features
Coming up with an initial structure
Component structure
Implementing static components
Implementing the user-related static components
The Login component
The Register component
The Logout component
The UserBar component
Implementing posts
The Post component
The CreatePost component
The PostList component
Putting the app together
Implementing stateful components with Hooks
Adding Hooks for the user features
Adjusting UserBar
Adding validation
Passing the user to CreatePost
Adding Hooks for the post features
Adjusting the App component
Adjusting the CreatePost component
Summary
Questions
Further reading
Part 2: Using Hooks With Real-World Examples
Chapter 4: Using the Reducer and Effect Hooks
Technical requirements
Reducer Hooks versus State Hooks
Limitations of the State Hook
Reducers
Actions
Defining reducers
The Reducer Hook
Using Reducer Hooks
Turning a State Hook into a Reducer Hook
Defining actions
Implementing the reducer
Defining the Reducer Hook
Using Effect Hooks
Remember componentDidMount and componentDidUpdate?
From life cycle methods to Effect Hooks
Triggering an effect only when certain props change
Triggering an effect only on mount
Cleaning up effects
Implementing an Effect Hook in our blog app
Summary
Questions
Further reading
Chapter 5: Implementing React Contexts
Technical requirements
Introducing React Context
Passing down props
Implementing themes via context
Defining the context
Quick detour – absolute imports
Defining the consumer
Using Hooks to consume a context
Defining the provider
Nesting providers
Alternatives to contexts
Using context for global state
Defining the context
Defining the context provider
Refactoring the app to use UserContext
Summary
Questions
Further reading
Chapter 6: Using Hooks and React Suspense for Data Fetching
Technical requirements
Setting up a simple backend server
Creating the db.json file
Installing the json-server tool
Configuring the package.json scripts
Configuring a proxy
Requesting resources using an Effect and a State/Reducer Hook
Fetching posts from the server
Quick detour: The async/await construct
Creating new posts on the server
Using TanStack Query to request resources and make changes
Setting up the library
Fetching posts using a Query Hook
Creating posts using a Mutation Hook
Introducing React Suspense and Error Boundaries
Setting up a Suspense Boundary
Setting up an Error Boundary
Summary
Questions
Further reading
Chapter 7: Using Hooks for Handling Forms
Technical requirements
Handling form submission with the Action State Hook
Introducing the Action State Hook
Using the Action State Hook
Simulating blocking UI
Implementing a (purposefully slow) Comment component
Implementing a CommentList component
Implementing the CommentSection component
Testing out the simulated blocking UI
Avoiding blocking UI with the Transition Hook
Using the Transition Hook
Testing out the non-blocking Transition
Using the Optimistic Hook to implement optimistic updates
Implementing optimistic comment creation
Summary
Questions
Further reading
Chapter 8: Using Hooks for Routing
Technical requirements
Introducing React Router
Setting up React Router
Creating a new route and using the Param Hook
Linking to routes using the <Link> component
Defining a navigation bar using <NavLink>
Programmatically navigating using the Navigation Hook
Summary
Questions
Further reading
Chapter 9: Advanced Hooks Provided by React
Technical requirements
Overview of built-in React Hooks
useState
useEffect
useContext
useReducer
useActionState
useFormStatus
useOptimistic
useTransition
Using utility Hooks
useRef
Auto-focusing an input field using a Ref Hook
Changing state within a ref
Using refs to persist mutable values across re-renders
Passing refs as props
Creating ref contents only once
useImperativeHandle
useId
useSyncExternalStore
useDebugValue
Using Hooks for performance optimizations
useDeferredValue
Implementing a search without deferred values
Introducing deferred values
useMemo
useCallback
Using Hooks for advanced effects
useLayoutEffect
useInsertionEffect
Summary
Questions
Further reading
Chapter 10: Using Community Hooks
Technical requirements
Using Hooks to manage application state
useLocalStorage
useHistoryState
Debouncing with Hooks
Debouncing changes in the post editor
Difference between debounced and deferred values
Learning about various utility Hooks
useCopyToClipboard
useHover
Finding more community Hooks
Summary
Questions
Further reading
Part 3: Refactoring and Migrating Existing Code
Chapter 11: Rules of Hooks
Using Hooks
Order of Hooks
Names of Hooks
Enforcing the rules of Hooks
Summary
Questions
Further reading
Chapter 12: Building Your Own Hooks
Technical requirements
Creating a custom Theme Hook
Creating the custom Theme Hook
Using the custom Theme Hook
Creating a custom User Hook
Creating the custom User Hook
Using the custom User Hook
Creating custom API Hooks
Extracting custom API Hooks
Using custom API Hooks
Creating a Debounced History State Hook
Creating the Debounced History State Hook
Using the Debounced History State Hook
Testing custom Hooks
Setting up Vitest and the React Testing Library
Testing a simple Hook
Creating the Counter Hook
Creating unit tests for the Counter Hook
Testing the Theme Hook
Testing the User Hook
Testing asynchronous Hooks
Running all tests
Summary
Questions
Further reading
Chapter 13: Migrating from React Class Components
Technical requirements
Handling state with React class components
Designing the app structure
Initializing the project
Defining the app structure
Defining the components
Defining the Header component
Defining the AddTodo component
Defining the TodoList component
Defining the TodoItem component
Defining the TodoFilter component
Starting the app
Implementing dynamic code
Defining a mock API
Defining the StateContext
Making the App component dynamic
Making the AddTodo component dynamic
Making the TodoList component dynamic
Making the TodoItem component dynamic
Making the TodoFilter component dynamic
Starting the app
Migrating from React class components
Migrating the TodoItem component
Migrating the TodoList component
Migrating the TodoFilter component
Migrating the AddTodo component
Migrating the state management and App component
Defining the actions
Defining the reducers
Migrating the App component
Trade-offs of React class components vs React Hooks
Summary
Questions
Further reading
Other Books You May Enjoy
Index

React Hooks allow you to easily encapsulate, reuse, and refactor logic with the same level of simplicity that components bring to user interface organization.

In this second edition, React expert and author of many popular React books, Daniel Bugl guides you through the full spectrum of React Hooks, and teaches you how to handle forms, routing, and data fetching in modern React development. This edition is fully updated to React 19, with a revamped structure, expanded real-world use cases, and coverage of all newly introduced Hooks.

Starting with the fundamentals, you'll gain a deep understanding of how Hooks work under the hood and how to apply Hooks patterns efficiently. The chapters guide you through using State, Reducer, and Effect Hooks to manage application state, side effects, and complex logic for building your first Hook-based app. You'll utilize Suspense and Context APIs for streamlined data fetching and state management, master Form Actions for handling submissions, and implement routing with Hooks. You’ll also create custom Hooks for advanced functionality and write tests for reliability. Finally, you’ll learn how to refactor an existing app with class components into modern Hooks architecture.

By the end of this React book, you'll be well-equipped to use React Hooks to modernize and optimize your React projects.

What you will learn

• Master and apply new React 19 Hooks, such as useActionState, useFormStatus, useOptimistic, and others

• Use React Hooks and Context to manage state in your web applications

• Efficiently fetch, update, and cache data using TanStack Query and Suspense

• Manage user input and form submission using Form Actions with Hooks

• Discover how to implement routing in your apps using React Router and Hooks

• Create and test your own Hooks to encapsulate, reuse, and refactor logic in your apps

Who this book is for

This book is ideal for React developers looking to modernize their applications using React Hooks, Context, and Suspense. Beginners and experienced developers alike will gain a solid understanding of Hooks and their internal workings. If you're familiar with React and JavaScript, this book will help you upskill by teaching you best practices, performance optimization, and scalable application building. No prior experience with Hooks is required—this book covers everything from fundamentals to advanced patterns.