| preface |
|
xi | |
| acknowledgments |
|
xiii | |
| About this book |
|
xiv | |
| About the author |
|
xviii | |
| About the cover illustration |
|
|
|
|
3 | (24) |
|
|
|
3 | (9) |
|
Building a UI from components |
|
|
4 | (2) |
|
Synchronizing state and UI |
|
|
6 | (4) |
|
Understanding component types |
|
|
10 | (2) |
|
|
|
12 | (1) |
|
1.3 React Hooks can add state to function components |
|
|
13 | (8) |
|
Stateful function components: Less code, better organization |
|
|
14 | (3) |
|
Custom hooks: Easier code reuse |
|
|
17 | (1) |
|
Third-party hooks provide ready-made, well-tested functionality |
|
|
18 | (3) |
|
1.4 Better UX with Concurrent Mode and Suspense |
|
|
21 | (3) |
|
|
|
22 | (1) |
|
|
|
23 | (1) |
|
1.5 React's new publication channels |
|
|
24 | (1) |
|
1.6 Whom is this book for? |
|
|
25 | (1) |
|
|
|
25 | (2) |
|
2 Managing component state with the useState hook |
|
|
27 | (65) |
|
2.1 Setting up the bookings manager app |
|
|
28 | (10) |
|
Generating the app skeleton with create-react-app |
|
|
30 | (1) |
|
Editing the four key files |
|
|
31 | (5) |
|
Adding a database file for the application |
|
|
36 | (1) |
|
Creating page components and a UserPicker.js file |
|
|
37 | (1) |
|
2.2 Storing, using, and setting values with useState |
|
|
38 | (15) |
|
Assigning new values to variables doesn't update the UI |
|
|
39 | (3) |
|
Calling useState returns a value and an updater function |
|
|
42 | (4) |
|
Calling the updater function replaces the previous state value |
|
|
46 | (3) |
|
Passing a function to useState as the initial value |
|
|
49 | (1) |
|
Using the previous state when setting the new state |
|
|
50 | (3) |
|
2.3 Calling useState multiple times to work with multiple values |
|
|
53 | (7) |
|
Using a drop-down list to set state |
|
|
53 | (3) |
|
Using a check box to set state |
|
|
56 | (4) |
|
2.4 Reviewing some function component concepts |
|
|
60 | (6) |
|
Managing component state with the useReducer hook |
|
|
65 | (1) |
|
3.1 Updating multiple state values in response to a single event |
|
|
66 | (4) |
|
Taking users out of the movie with unpredictable state changes |
|
|
66 | (2) |
|
Keeping users in the movie with predictable state changes |
|
|
68 | (2) |
|
3.2 Managing more complicated state with useReducer |
|
|
70 | (9) |
|
Updating state using a reducer with a predefined set of actions |
|
|
71 | (2) |
|
Building a reducer for the BookablesList component |
|
|
73 | (3) |
|
Accessing component state and dispatching actions with useReducer |
|
|
76 | (3) |
|
3.3 Generating the initial state with a function |
|
|
79 | (7) |
|
Introducing the WeekPicker component |
|
|
81 | (1) |
|
Creating utility functions to work with dates and weeks |
|
|
82 | (1) |
|
Building the reducer to manage dates for the component |
|
|
83 | (1) |
|
Passing an initialization function to the useReducer hook |
|
|
84 | (1) |
|
Updating BookingsPage to use WeekPicker |
|
|
85 | (1) |
|
3.4 Reviewing some useReducer concepts |
|
|
86 | (6) |
|
4 Working with side effects |
|
|
92 | (26) |
|
4.1 Exploring the useEffect API with simple examples |
|
|
93 | (11) |
|
Running side effects after every render |
|
|
93 | (2) |
|
Running an effect only when a component mounts |
|
|
95 | (2) |
|
Cleaning up side effects by returning a function |
|
|
97 | (2) |
|
Controlling when an effect runs by specifying dependencies |
|
|
99 | (4) |
|
Summarizing the ways to call the useEffect hook |
|
|
103 | (1) |
|
Calling useLayoutEffect to run an effect before the browser repaints |
|
|
103 | (1) |
|
|
|
104 | (5) |
|
Creating the new db.json file |
|
|
104 | (1) |
|
|
|
105 | (1) |
|
Fetching data within a useEffect hook |
|
|
106 | (2) |
|
Working with async and await |
|
|
108 | (1) |
|
4.3 Fetching data for the BookablesList component |
|
|
109 | (9) |
|
Examining the data-loading process |
|
|
110 | (1) |
|
Updating the reducer to manage loading and error states |
|
|
111 | (2) |
|
Creating a helper function to load data |
|
|
113 | (1) |
|
|
|
114 | (4) |
|
5 Managing component state with the useRef hook |
|
|
118 | (16) |
|
5.1 Updating state without causing a re-render |
|
|
119 | (3) |
|
Comparing useState and useRef when updating state values |
|
|
119 | (2) |
|
|
|
121 | (1) |
|
5.2 Storing timer IDs with a ref |
|
|
122 | (3) |
|
5.3 Keeping references to DOM elements |
|
|
125 | (9) |
|
Setting focus on an element in response to an event |
|
|
126 | (3) |
|
Managing a text box via a ref |
|
|
129 | (5) |
|
6 Managing application state |
|
|
134 | (30) |
|
6.1 Passing shared state to child components |
|
|
135 | (5) |
|
Passing state from a parent by setting props on the children |
|
|
136 | (1) |
|
Receiving state from a parent as a prop |
|
|
136 | (2) |
|
Receiving an updater function from a parent as a prop |
|
|
138 | (2) |
|
6.2 Breaking components into smaller pieces |
|
|
140 | (6) |
|
Seeing components as part of a bigger app |
|
|
141 | (1) |
|
Organizing multiple components within a page's UI |
|
|
142 | (1) |
|
Creating a BookableDetails component |
|
|
143 | (3) |
|
6.3 Sharing the state and dispatch function from useReducer |
|
|
146 | (5) |
|
Managing state in the BookablesView component |
|
|
147 | (1) |
|
Removing an action from the reducer |
|
|
148 | (1) |
|
Receiving state and dispatch in the BookablesList component |
|
|
148 | (3) |
|
6.4 Sharing the state value and updater function from useState |
|
|
151 | (8) |
|
Managing the selected bookable in the BookablesView component |
|
|
152 | (1) |
|
Receiving the bookable and updater function in BookablesList |
|
|
153 | (6) |
|
6.5 Passing functions to useCallback to avoid redefining them |
|
|
159 | (5) |
|
Depending on functions we pass in as props |
|
|
159 | (2) |
|
Maintaining function identity with the useCallback hook |
|
|
161 | (3) |
|
7 Managing performance with useMemo |
|
|
164 | (30) |
|
7.1 Breaking the cook's heart by calling, "O, shortcake!" |
|
|
165 | (5) |
|
Generating anagrams with an expensive algorithm |
|
|
166 | (3) |
|
Avoiding redundant function calls |
|
|
169 | (1) |
|
7.2 Memoizing expensive function calls with useMemo |
|
|
170 | (1) |
|
7.3 Organizing the components on the Bookings page |
|
|
171 | (5) |
|
Managing the selected bookable with useState |
|
|
173 | (1) |
|
Managing the selected week and booking with useReducer and useState |
|
|
173 | (3) |
|
7.4 Efficiently building the bookings grid with useMemo |
|
|
176 | (18) |
|
Generating a grid of sessions and dates |
|
|
177 | (3) |
|
Generating a lookup for bookings |
|
|
180 | (2) |
|
Providing a getBookings data-loading function |
|
|
182 | (1) |
|
Creating the BookingsGrid component and calling useMemo |
|
|
182 | (4) |
|
Coping with racing responses when fetching data in useEffect |
|
|
186 | (8) |
|
8 Managing state with the Context API |
|
|
194 | (24) |
|
8.1 Needing state from higher up the component tree |
|
|
195 | (11) |
|
Displaying a call-to-action message when the page first loads |
|
|
196 | (2) |
|
Displaying booking information when a visitor selects a booking |
|
|
198 | (1) |
|
Displaying an edit button for a user's bookings: The problem |
|
|
199 | (1) |
|
Displaying an edit button for a user's bookings: The solution |
|
|
200 | (6) |
|
8.2 Working with custom providers and multiple contexts |
|
|
206 | (12) |
|
Setting an object as the context provider's value |
|
|
206 | (1) |
|
Moving the state to a custom provider |
|
|
207 | (6) |
|
Working with multiple contexts |
|
|
213 | (3) |
|
Specifying a default value for a context |
|
|
216 | (2) |
|
9 Creating your own hooks |
|
|
218 | (27) |
|
9.1 Extracting functionality into custom hooks |
|
|
220 | (7) |
|
Recognizing functionality that could be shared |
|
|
223 | (1) |
|
Defining custom hooks outside your components |
|
|
224 | (1) |
|
Calling custom hooks from custom hooks |
|
|
225 | (2) |
|
9.2 Following the Rules of Hooks |
|
|
227 | (2) |
|
Call hooks only at the top level |
|
|
228 | (1) |
|
Call hooks only from React functions |
|
|
228 | (1) |
|
Using an ESLint plugin for the rules of hooks |
|
|
229 | (1) |
|
9.3 Extracting further examples of custom hooks |
|
|
229 | (4) |
|
Accessing window dimensions with a useWindowSize hook |
|
|
229 | (2) |
|
Getting and setting values with a useLocalStorage hook |
|
|
231 | (2) |
|
9.4 Consuming a context value with a custom hook |
|
|
233 | (2) |
|
9.5 Encapsulating data fetching with a custom hook |
|
|
235 | (10) |
|
Creating the useFetch hook |
|
|
236 | (1) |
|
Using the data, status, and error values the useFetch hook returns |
|
|
237 | (1) |
|
Creating a more specialized data-fetching hook: useBookings |
|
|
238 | (7) |
|
10 Using third-party hooks |
|
|
245 | (36) |
|
10.1 Accessing state in the URL with React Router |
|
|
246 | (10) |
|
Setting up routes to enable nesting |
|
|
248 | (1) |
|
Adding nested routes to the Bookables page |
|
|
249 | (1) |
|
Accessing URL parameters with the useParams hook |
|
|
250 | (2) |
|
Navigating with the useNavigate hook |
|
|
252 | (4) |
|
10.2 Getting and setting query string search parameters |
|
|
256 | (10) |
|
Getting search parameters from the query string |
|
|
258 | (4) |
|
|
|
262 | (4) |
|
10.3 Streamlining data-fetching with React Query |
|
|
266 | (15) |
|
|
|
267 | (2) |
|
Giving components access to a React Query client |
|
|
269 | (1) |
|
Fetching data with useQuery |
|
|
270 | (3) |
|
Accessing data in the query cache |
|
|
273 | (3) |
|
Updating server state with useMutation |
|
|
276 | (5) |
|
|
|
281 | (62) |
|
11 Code splitting with Suspense |
|
|
283 | (22) |
|
11.1 Importing code dynamically with the import function |
|
|
284 | (4) |
|
Setting up a web page to load JavaScript when a button is clicked |
|
|
284 | (1) |
|
Using default and named exports |
|
|
285 | (1) |
|
Using static imports to load JavaScript |
|
|
286 | (1) |
|
Calling the import function to dynamically load JavaScript |
|
|
287 | (1) |
|
11.2 Importing components dynamically with lazy and Suspense |
|
|
288 | (10) |
|
Converting a component to a lazy component with the lazy function |
|
|
289 | (3) |
|
Specifying fallback content with the Suspense component |
|
|
292 | (3) |
|
Understanding how lazy and Suspense work together |
|
|
295 | (1) |
|
Code splitting an app on its routes |
|
|
296 | (2) |
|
11.3 Catching errors with error boundaries |
|
|
298 | (7) |
|
Checking out the error boundary example in the React docs |
|
|
299 | (1) |
|
Creating our own error boundary |
|
|
300 | (3) |
|
|
|
303 | (2) |
|
12 Integrating data fetching with Suspense |
|
|
305 | (22) |
|
12.1 Data fetching with Suspense |
|
|
306 | (11) |
|
Upgrading promises to include their status |
|
|
308 | (1) |
|
Using the promise status to integrate with Suspense |
|
|
309 | (1) |
|
Fetching data as early as possible |
|
|
310 | (1) |
|
|
|
311 | (3) |
|
|
|
314 | (1) |
|
|
|
315 | (2) |
|
12.2 Using Suspense and error boundaries with React Query |
|
|
317 | (2) |
|
12.3 Loading images with Suspense |
|
|
319 | (8) |
|
Using React Query and Suspense to provide an image-loading fallback |
|
|
320 | (3) |
|
Prefetching images and data with React Query |
|
|
323 | (4) |
|
13 Experimenting with useTransition, useDeferredValue, *S and SuspenseList |
|
|
327 | (16) |
|
13.1 Making smoother transitions between states |
|
|
328 | (8) |
|
Avoiding receded states with useTransition |
|
|
329 | (2) |
|
Giving users feedback with isPending |
|
|
331 | (1) |
|
Integrating transitions with common components |
|
|
332 | (2) |
|
Holding on to old values with useDeferredValue |
|
|
334 | (2) |
|
13.2 Using SuspenseList to manage multiple fallbacks |
|
|
336 | (4) |
|
Showing data from multiple sources |
|
|
337 | (1) |
|
Controlling multiple fallbacks with SuspenseList |
|
|
338 | (2) |
|
13.3 Concurrent Mode and the future |
|
|
340 | (3) |
| index |
|
343 | |
