React Hooks in Action: With Suspense and Concurrent Mode

by John Larsen

Overview

React Hooks in Action teaches you to write fast and reusable React components using Hooks.

Summary
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 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
Get started with React Hooks and you’ll soon have code that’s better organized and easier to maintain. React Hooks are targeted JavaScript functions that let you reuse and share functionality across components. Use them to split components into smaller functions, manage state and side effects, and access React features without classes—all without having to rearrange your component hierarchy.

About the book
React Hooks in Action teaches you to write fast and reusable React components using Hooks. You’ll start by learning to create component code with Hooks. Next, you’ll implement a resource booking application that demonstrates managing local state, application state, and side effects like fetching data. Code samples and illustrations make learning Hooks easy.

What's inside

    Build function components that access React features
    Manage local, shared, and application state
    Explore built-in, custom, and third-party hooks
    Load, update, and cache data with React Query
    Improve page and data loading with code-splitting and React Suspense

About the reader
For beginning to intermediate React developers.

About the author
John Larsen has been a teacher and web developer for over 20 years, creating apps for education and helping students learn to code. He is the author of Get Programming with JavaScript.

Table of Contents

PART 1

1 React is evolving

2 Managing component state with useState hook

3 Managing component state with useReducer hook

4 Working with side effects

5 Managing component state with useRef hook

6 Managing application state

7 Managing performance with useMemo

8 Managing state with the Context API

9 Creating your own hooks

10 Using third party hooks

PART 2

11 Code splitting with Suspense

12 Integrating data-fetching with Suspense

13 Experimenting with useTransition, useDeferredValue and SuspenseList

Product Details

ISBN-13:	9781638350767
Publisher:	Manning
Publication date:	03/15/2021
Sold by:	SIMON & SCHUSTER
Format:	eBook
Pages:	376
File size:	13 MB
Note:	This product may take a few minutes to download.

About the Author

John Larsen has been a teacher and web developer for over 20 years, creating apps for education and helping students learn to code. He is the author of Get Programming with JavaScript.
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.

Table of Contents

Preface xi

Acknowledgments xiii

About this book xiv

About the author xviii

About the cover illustration xix

Part 1 1

1 React is evolving 3

1.1 What is React? 3

Building a UI from components 4

Synchronizing state and UI 6

Understanding component types 10

1.2 What's new in React? 12

1.3 React Hooks can add state to function components 13

Stateful function components: Less code, better organization 14

Custom hooks: Easier code reuse 17

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

1.4 Better UX with Concurrent Mode and Suspense 21

Concurrent Mode 22

Suspense 23

1.5 React's new publication channels 24

1.6 Whom is this book for? 25

1.7 Getting started 25

2 Managing component state with the useState hook 27

2.1 Setting up the bookings manager app 28

Generating the app skeleton with create-react-app 30

Editing the four key files 31

Adding a database file for the application 36

Creating page components and a UserPicker.js file 37

2.2 Storing, using, and setting values with useState 38

Assigning new values to variables doesn't update the UI 39

Calling useState returns a value and- art updater function 42

Calling the updater function replaces the previous slate value 46

Passing a function to useState as the initial value 49

Using the previous state token setting the new state 50

2.3 Calling useState multiple times to work with multiple values 53

Using a drop-down list to set state 53

Using a check box to set state 56

2.4 Reviewing some function component concepts 60

3 Managing component state with the useReducer hook 65

3.1 Updating multiple state values in response to a single event 66

Taking users out of the movie with unpredictable state changes 66

Keeping users in the movie with predictable state changes 68

3.2 Managing more complicated state with useReducer 70

Updating state using a reducer with a predefined set of actions 71

Building a reducer for the BookablesList component 73

Accessing component state and dispatching actions with useReducer 76

3.3 Generating the initial state with a function 79

Introducing the WeekPicker component 81

Creating utility functions to work with dates and weeks 82

Building the reducer to manage dates for the component 83

Passing an initialization function to the useReducer hook 84

Updating BookingsPage to use WeekPicker 85

3.4 Reviewing some useReducer concepts 86

4 Working with side effects 92

4.1 Exploring the useEffect API with simple examples 93

Running side effects after every render 93

Running an effect only when a component mounts 95

Cleaning up side effects by returning a function 97

Controlling when an effect runs by specifying dependencies 99

Summarizing the ways to call the useEffect hook 103

Calling useLayoutEffect to run an effect-before the browser repaints 103

4.2 Fetching data 104

Creating the new db.json file 104

Setting up a JSON server 105

Fetching data within a useEffect hook 106

Working with async and await 108

4.3 Fetching data for the BookablesList component 109

Examining the data-loading process 110

Updating the reducer to manage loading and error states 111

Creating a helper function to load data 113

Loading the bookables 114

5 Managing component state with the useRef hook 118

5.1 Updating state without causing a re-render 119

Comparing useState and useRef when updating state values 119

Calling useRef 121

5.2 Storing timer IDs with a ref 122

5.3 Keeping references to DOM elements 125

Setting focus on an element in response to an event 126

Managing a text box via a ref 129

6 Managing application state 134

6.1 Passing shared state to child components 135

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

Receiving state from a parent as a prop 136

Receiving an updater function from a parent as a prop 138

6.2 Breaking components into smaller pieces 140

Seeing components as part- of a bigger app 141

Organizing multiple components within a pagers UI 142

Creating a BookableDetails component 143

6.3 Sharing the state and dispatch function from useReducer 146

Managing state in the Bookables View component 147

Removing an action from the reducer 148

Receiving state and dispatch in the BookablesList component 148

6.4 Sharing the state value and updater function from useState 151

Managing the selected bookable in the BookablesView component 152

Receiving the bookable and updater function in BookablesList 153

6.5 Passing functions to useCallback to avoid redefining them 159

Depending on functions we pass in as props 159

Maintaining function identity with the useCallback hook 161

7 Managing performance with useMemo 164

7.1 Breaking the cook's heart by calling, "O, shortcake!" 165

Generating anagrams with an expensive algorithm 166

Avoiding redundant function calls 169

7.2 Memoizing expensive function calls with useMemo 170

7.3 Organizing the components on the Bookings page 171

Managing the selected bookable with useState 173

Managing the selected week and booking with useReducer and useState 173

7.4 Efficiently building the bookings grid with useMemo 176

Generating a grid of sessions and dates 177

Generating a lookup for bookings 180

Providing a getBookings data-loading function 182

Creating the BookingsGrid component and calling useMemo 182

Coping with racing responses when fetching data in useEffect 186

8 Managing state with the Context API 194

8.1 Needing state from higher up the component tree 195

Displaying a call-to-action message when the page first loads 196

Displaying booking information when a visitor selects a booking 198

Displaying an edit button for a user's bookings: The problem 199

Displaying an edit button for a user's bookings: The solution 200

8.2 Working with custom providers and multiple contexts 206

Setting an object as the context provider's value 206

Moving the state to a custom provider 207

Working with multiple contexts 213

Specifying a default value for a context 216

9 Creating your own hooks 218

9.1 Extracting functionality into custom hooks 220

Recognizing functionality that could be shared 223

Defining custom hooks outside your components 224

Calling custom hooks from custom hooks 225

9.2 Following the Rules of Hooks 227

Call hooks only at the top level 228

Call hooks only from React functions 228

Using an ESLint plugin for the rules of hooks 229

9.3 Extracting further examples of custom hooks 229

Accessing window dimensions with a useWindowSize hook 229

Getting and setting values with a useLocalStorage hook 231

9.4 Consuming a context value with a custom hook 233

9.5 Encapsulating data fetching with a custom hook 235

Creating the useFetch hook 236

Using the data, status, and error values the usefetch hook returns 237

Creating a more specialized data-fetching hook: useBookings 238

10 Using third-party hooks 245

10.1 Accessing state in the URL with React Router 246

Setting up routes to enable nesting 248

Adding nested routes to the Bookables page 249

Accessing URL parameters with the useParams hook 250

Navigating with the useNavigate hook 252

10.2 Getting and setting query string search parameters 256

Getting search parameters from the query string 258

Setting the query string 262

10.3 Streamlining data-fetching with React Query 266

Introducing React Query 267

Giving components access to a React Query client 269

Fetching data with useQuery 270

Accessing data in the query cache 273

Updating server state with useMutation 276

Part 2 281

11 Code splitting with Suspense 283

11.1 Importing code dynamically with the import function 284

Setting up a web page to load JavaScript when a button is clicked 284

Using default and named exports 285

Using static imports to load JavaScript 286

Calling the import function to dynamically load JavaScript 287

11.2 Importing components dynamically with lazy and Suspense 288

Converting a component to a lazy component with the lazy function 289

Specifying fallback content with the Suspense component 292

Understanding how lazy and Suspense work together 295

Code splitting an app on its routes 296

11.3 Catching errors with error boundaries 298

Checking out the error boundary example in the React docs 299

Creating our own error boundary 300

Recovering from errors 303

12 Integrating data fetching with Suspense 305

12.1 Data fetching with Suspense 306

Upgrading promises to include their status 308

Using the promise status to integrate with Suspense 309

Fetching data as early as possible 310

Fetching new data 311

Recovering from errors 314

Checking the React docs 315

12.2 Using Suspense and error boundaries with React Query 317

12.3 Loading images with Suspense 319

Using React Query and Suspense to provide an image-loading fallback 320

Prefetching images and data with React Query 323

13 Experimenting with useTransition, useDeferredValue, and SuspenseList 327

13.1 Making smoother transitions between states 328

Avoiding receded states with useTransition 329

Giving users feedback with isPending 331

Integrating transitions with common components 332

Holding on to old values with useDeferredValue 334

13.2 Using SuspenseList to manage multiple fallbacks 336

Showing data from multiple sources 337

Controlling multiple fallbacks with SuspenseList 338

13.3 Concurrent Mode and the future 340

Index 343