React Hooks in Action: With Suspense and Concurrent Mode

376 Pages·2021·25.194 MB·English

by  John Larsen

With Suspense and Concurrent Mode
John Larsen
M A N N I N G
React Hooks
in Action
WITH SUSPENSE AND CONCURRENT MODE
JOHN LARSEN
MANNING
SHELTER ISLAND
For online information and ordering of this and other Manning books, please visit
www.manning.com. The publisher offers discounts on this book when ordered in quantity.
For more information, please contact
Special Sales Department
Manning Publications Co.
20 Baldwin Road
PO Box 761
Shelter Island, NY 11964
Email: [e-mail]
©2021 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in
any form or by means electronic, mechanical, photocopying, or otherwise, without prior written
permission of the publisher.
Many of the designations used by manufacturers and sellers to distinguish their products are
claimed as trademarks. Where those designations appear in the book, and Manning Publications
was aware of a trademark claim, the designations have been printed in initial caps or all caps.
Recognizing the importance of preserving what has been written, it is Manning’s policy to have
the books we publish printed on acid-free paper, and we exert our best efforts to that end.
Recognizing also our responsibility to conserve the resources of our planet, Manning books
are printed on paper that is at least 15 percent recycled and processed without the use of
elemental chlorine.
Development editor: Helen Stergius
Technical development editor: John Guthrie
Manning Publications Co. Review editor: Aleksandar Dragosavljevic´
20 Baldwin Road Production editor: Deirdre S. Hiam
PO Box 761 Copy editor: Sharon Wilkey
Shelter Island, NY 11964 Proofreader: Keri Hales
Technical proofreader: Clive Harber
Typesetter: Dennis Dalinnik
Cover designer: Marija Tudor
ISBN: 9781617297632
Printed in the United States of America
To Mum, for all the books. And to Dad, for all the gadgets.

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
v
vi CONTENTS
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 an updater function 42
Calling the updater function replaces the previous state value 46
Passing a function to useState as the initial value 49 ■ Using the
previous state when 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
CONTENTS vii
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 page’s UI 142 ■ Creating a
BookableDetails component 143
6.3 Sharing the state and dispatch function from
useReducer 146
Managing state in the BookablesView component 147 ■ Removing
an action from the reducer 148 ■ Receiving state and dispatch in
the BookablesList component 148
viii CONTENTS
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
CONTENTS ix
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