React Hooks in Action
With Suspense and Concurrent Mode
John Larsen
  • MEAP began February 2020
  • Publication in Spring 2021 (estimated)
  • ISBN 9781617297632
  • 370 pages (estimated)
  • printed in black & white

This book will not only show you how to use hooks but how they work to help you understand how to use then correctly and create your own!

Ryan Huber
Build stylish, slick, and speedy-to-load user interfaces in React without writing custom classes. React Hooks are a new category of functions that help you to manage state, lifecycle and side effects within functional components. React Hooks in Action teaches you to use pre-built hooks like useState, useReducer and useEffect, and to build your own hooks. Your code will be more reusable, require less boilerplate, and you’ll instantly be a more effective React developer.

About the Technology

React Hooks promise to make React programmers even more productive. Hooks are a collection of pre-built and custom functions that give you a simpler API for working with key React functionalities. Hooks cleanly encapsulate side effects, make it easier to reuse components between projects, and result in less code overall. These new features represent a fundamental evolution in how the React library functions, so even experienced React developers will want to get up to speed with Hooks.

About the book

React Hooks in Action shows you how to use Hooks to make your codebase simpler and more reusable, and your applications faster and more responsive. You’ll build a resource booking example application chapter by chapter, learning how to develop components with local, shared, and application states. You’ll discover different approaches to data fetching, including using Concurrent Mode and Suspense to improve user experience, and explore third party hooks in the evolving React ecosystem.
Table of Contents detailed table of contents

Part 1: The React Roadmap

1 React is evolving

1.1 What is React?

1.1.1 Building a UI from components

1.1.2 React synchronizes state and UI

1.1.3 Component Types

1.2 What’s new in React?

1.3 React hooks can add state to function components

1.3.1 Stateful function components: less code, better organization

1.3.2 Custom hooks: easier code reuse

1.3.3 Third party hooks provide ready-made, well-tested functionality

1.4 Better UX with Concurrent Mode and Suspense

1.4.1 Concurrent Mode

1.4.2 Suspense

1.5 React’s new publication channels

1.6 Who is this book for?

1.7 Getting started

1.8 Summary

2 Making Your Code Shorter and Simpler

Part 2: React Hooks

3 Managing component state with the useState hook

3.1 Setting up the bookings manager app

3.1.1 Generating the app skeleton with create-react-app

3.1.2 Editing the four key files

3.1.3 Adding a database file for the application

3.1.4 Creating page components and a UserPicker.js file

3.2 Storing, using and setting values with useState

3.2.1 Assigning new values to variables doesn’t update the UI

3.2.2 Calling useState returns a value and an updater function

3.2.3 Calling the updater function replaces the previous state value

3.2.4 Passing a function to useState as the initial value

3.2.5 Using the previous state when setting the new state

3.3 Calling useState multiple times to work with multiple values

3.3.1 Using a drop-down list to set state

3.3.2 Using a checkbox to set state

3.4 Reviewing some function component concepts

3.5 Summary

4 Managing component state with the useReducer hook

4.1 Updating multiple state values in response to a single event

4.1.1 Taking users out of the movie with unpredictable state changes

4.1.2 Keeping users in the movie with predictable state changes

4.2 Managing more complicated state with useReducer

4.2.1 Updating state using a reducer with a pre-defined set of actions

4.2.2 Building a reducer for the BookablesList component

4.2.3 Accessing component state and dispatching actions with useReducer

4.3 Generating the initial state with a function

4.3.1 Introducing the WeekPicker component

4.3.2 Creating utility functions to work with dates and weeks

4.3.3 Building the reducer to manage dates for the component

4.3.4 Passing an initialization function to the useReducer hook

4.3.5 Updating BookingsPage to use WeekPicker

4.4 Reviewing some useReducer concepts

4.5 Summary

5 Working with side effects

5.1 Exploring the useEffect API with simple examples

5.1.1 Running side effects after every render

5.1.2 Running an effect only when a component mounts

5.1.3 Cleaning up side effects by returning a function

5.1.4 Controlling when an effect runs by specifying dependencies

5.1.5 Summarizing the ways to call the useEffect hook

5.2 Fetching data

5.2.1 Creating the new db.json file

5.2.2 Setting up a JSON server

5.2.3 Fetching data within a useEffect hook

5.2.4 Working with async and await

5.3 Fetching data for the BookablesList component

5.3.1 Examining the data-loading process

5.3.2 Updating the reducer to manage loading and error states

5.3.3 Creating a helper function to load data

5.3.4 Loading the bookables

5.4 Summary

6 Managing component state with the useRef hook

6.1 Updating state without causing a re-render

6.1.1 Comparing useState and useRef when updating state values

6.1.2 Calling useRef

6.2 Storing timer ids with a ref

6.2.1 Introducing Presentation Mode for the BookablesList component

6.2.2 Updating the reducer to include state for Presentation Mode

6.2.3 Updating the BookablesList component to use the latest reducer

6.2.4 Managing timers for Presentation Mode with the useRef hook

6.3 Keeping references to DOM elements

6.3.1 Setting focus on an element in response to an event

6.3.2 Managing a text box via a ref

6.4 Reviewing some useRef concepts

6.5 Summary

7 Managing application state

7.1 Passing shared state to child components

7.1.1 Passing state from a parent by setting props on the children

7.1.2 Receiving state from a parent as a prop

7.1.3 Receiving an updater function from a parent as a prop

7.2 Breaking components into smaller pieces

7.2.1 Seeing components as part of a bigger app

7.2.2 Organizing multiple components within a page’s UI

7.2.3 Creating a BookableDetails component

7.3 Sharing the state and dispatch function from useReducer

7.3.1 Managing state in the BookablesView component

7.3.2 Removing an action from the reducer

7.3.3 Receiving state and dispatch in the BookablesList component

7.4 Sharing the state value and updater function from useState

7.4.1 Managing the selected bookable in the BookablesView component

7.4.2 Receiving the bookable and updater function in BookablesList

7.5 Summary

8 Managing performance with useMemo

8.1 Breaking the Cook’s Heart by calling “O, shortcake!”

8.1.1 Generating anagrams with an expensive algorithm

8.1.2 Avoiding redundant function calls

8.2 Memoizing expensive function calls with useMemo

8.3 Organizing the components on the bookings page

8.3.1 Managing the selected bookable with useState

8.3.2 Managing the selected week and booking with useReducer and useState

8.4 Efficiently building the bookings grid with useMemo

8.4.1 Generating a grid of sessions and dates

8.4.2 Generating a lookup for bookings

8.4.3 Providing a getBookings data-loading function

8.4.4 Creating the BookingsGrid component and calling useMemo

8.4.5 Coping with racing responses when fetching data in useEffect

8.5 Summary

9 Managing application state with the Context API

10 Encapsulating code with custom hooks

11 Third-party hooks

Part 3: Suspense and Concurrent Mode

12 Managing the user experience with Suspense

13 Managing the user experience with Concurrent Mode

What's inside

  • Use React Query to load, update and cache data from a server
  • Use code-splitting to improve the responsiveness of your apps
  • Build functional components that can update their own state
  • Manage component side effects
  • Use the React Suspense API to improve the user experience of page and data loading

About the reader

For front-end web developers experienced with React.

About the author

John Larsen is the author of Get Programming with JavaScript. He was a mathematics and computing teacher for 25 years. He has an MA in mathematics and an MSc in information technology, and an ongoing interest in educational research. A web developer since 2000, he uses JavaScript end-to-end for server-side and client-side programming.

placing your order...

Don't refresh or navigate away from the page.
Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
print book $37.49 $49.99 pBook + eBook + liveBook
Additional shipping charges may apply
React Hooks in Action (print book) added to cart
continue shopping
go to cart

eBook $29.99 $39.99 3 formats + liveBook
React Hooks in Action (eBook) added to cart
continue shopping
go to cart

Prices displayed in rupees will be charged in USD when you check out.
customers also reading

This book 1-hop 2-hops 3-hops

FREE domestic shipping on three or more pBooks