book

React Hooks in Action

by John Larsen

April 2021

Intermediate to advanced

376 pages

9h 53m

English

Manning Publications

Read now

Unlock full access

prefaceacknowledgmentsabout this bookWho should read this bookHow this book is organized: A roadmapAbout the codeliveBook discussion forumOther online resourcesabout the authorabout the cover illustration
1.1 What is React?1.1.1 Building a UI from components1.1.2 Synchronizing state and UI1.1.3 Understanding component types1.2 What’s new in React?1.3 React Hooks can add state to function components1.3.1 Stateful function components: Less code, better organization1.3.2 Custom hooks: Easier code reuse1.3.3 Third-party hooks provide ready-made, well-tested functionality1.4 Better UX with Concurrent Mode and Suspense1.4.1 Concurrent Mode1.4.2 Suspense1.5 React’s new publication channels1.6 Whom is this book for?1.7 Getting startedSummary
2.1 Setting up the bookings manager app2.1.1 Generating the app skeleton with create-react-app2.1.2 Editing the four key files2.1.3 Adding a database file for the application2.1.4 Creating page components and a UserPicker.js file2.2 Storing, using, and setting values with useState2.2.1 Assigning new values to variables doesn’t update the UI2.2.2 Calling useState returns a value and an updater function2.2.3 Calling the updater function replaces the previous state value2.2.4 Passing a function to useState as the initial value2.2.5 Using the previous state when setting the new state2.3 Calling useState multiple times to work with multiple values2.3.1 Using a drop-down list to set state2.3.2 Using a check box to set state2.4 Reviewing some function component conceptsSummary
3.1 Updating multiple state values in response to a single event3.1.1 Taking users out of the movie with unpredictable state changes3.1.2 Keeping users in the movie with predictable state changes3.2 Managing more complicated state with useReducer3.2.1 Updating state using a reducer with a predefined set of actions3.2.2 Building a reducer for the BookablesList component3.2.3 Accessing component state and dispatching actions with useReducer3.3 Generating the initial state with a function3.3.1 Introducing the WeekPicker component3.3.2 Creating utility functions to work with dates and weeks3.3.3 Building the reducer to manage dates for the component3.3.4 Passing an initialization function to the useReducer hook3.3.5 Updating BookingsPage to use WeekPicker3.4 Reviewing some useReducer conceptsSummary
4.1 Exploring the useEffect API with simple examples4.1.1 Running side effects after every render4.1.2 Running an effect only when a component mounts4.1.3 Cleaning up side effects by returning a function4.1.4 Controlling when an effect runs by specifying dependencies4.1.5 Summarizing the ways to call the useEffect hook4.1.6 Calling useLayoutEffect to run an effect before the browser repaints4.2 Fetching data4.2.1 Creating the new db.json file4.2.2 Setting up a JSON server4.2.3 Fetching data within a useEffect hook4.2.4 Working with async and await4.3 Fetching data for the BookablesList component4.3.1 Examining the data-loading process4.3.2 Updating the reducer to manage loading and error states4.3.3 Creating a helper function to load data4.3.4 Loading the bookablesSummary

5.1 Updating state without causing a re-render5.1.1 Comparing useState and useRef when updating state values5.1.2 Calling useRef5.2 Storing timer IDs with a ref5.3 Keeping references to DOM elements5.3.1 Setting focus on an element in response to an event5.3.2 Managing a text box via a refSummary
6.1 Passing shared state to child components6.1.1 Passing state from a parent by setting props on the children6.1.2 Receiving state from a parent as a prop6.1.3 Receiving an updater function from a parent as a prop6.2 Breaking components into smaller pieces6.2.1 Seeing components as part of a bigger app6.2.2 Organizing multiple components within a page’s UI6.2.3 Creating a BookableDetails component6.3 Sharing the state and dispatch function from useReducer6.3.1 Managing state in the BookablesView component6.3.2 Removing an action from the reducer6.3.3 Receiving state and dispatch in the BookablesList component6.4 Sharing the state value and updater function from useState6.4.1 Managing the selected bookable in the BookablesView component6.4.2 Receiving the bookable and updater function in BookablesList6.5 Passing functions to useCallback to avoid redefining them6.5.1 Depending on functions we pass in as props6.5.2 Maintaining function identity with the useCallback hookSummary
7.1 Breaking the cook’s heart by calling, “O, shortcake!”7.1.1 Generating anagrams with an expensive algorithm7.1.2 Avoiding redundant function calls7.2 Memoizing expensive function calls with useMemo7.3 Organizing the components on the Bookings page7.3.1 Managing the selected bookable with useState7.3.2 Managing the selected week and booking with useReducer and useState7.4 Efficiently building the bookings grid with useMemo7.4.1 Generating a grid of sessions and dates7.4.2 Generating a lookup for bookings7.4.3 Providing a getBookings data-loading function7.4.4 Creating the BookingsGrid component and calling useMemo7.4.5 Coping with racing responses when fetching data in useEffectSummary
8.1 Needing state from higher up the component tree8.1.1 Displaying a call-to-action message when the page first loads8.1.2 Displaying booking information when a visitor selects a booking8.1.3 Displaying an edit button for a user’s bookings: The problem8.1.4 Displaying an edit button for a user’s bookings: The solution8.2 Working with custom providers and multiple contexts8.2.1 Setting an object as the context provider’s value8.2.2 Moving the state to a custom provider8.2.3 Working with multiple contexts8.2.4 Specifying a default value for a contextSummary
9.1 Extracting functionality into custom hooks9.1.1 Recognizing functionality that could be shared9.1.2 Defining custom hooks outside your components9.1.3 Calling custom hooks from custom hooks9.2 Following the Rules of Hooks9.2.1 Call hooks only at the top level9.2.2 Call hooks only from React functions9.2.3 Using an ESLint plugin for the rules of hooks9.3 Extracting further examples of custom hooks9.3.1 Accessing window dimensions with a useWindowSize hook9.3.2 Getting and setting values with a useLocalStorage hook9.4 Consuming a context value with a custom hook9.5 Encapsulating data fetching with a custom hook9.5.1 Creating the useFetch hook9.5.2 Using the data, status, and error values the useFetch hook returns9.5.3 Creating a more specialized data-fetching hook: useBookingsSummary
10.1 Accessing state in the URL with React Router10.1.1 Setting up routes to enable nesting10.1.2 Adding nested routes to the Bookables page10.1.3 Accessing URL parameters with the useParams hook10.1.4 Navigating with the useNavigate hook10.2 Getting and setting query string search parameters10.2.1 Getting search parameters from the query string10.2.2 Setting the query string10.3 Streamlining data-fetching with React Query10.3.1 Introducing React Query10.3.2 Giving components access to a React Query client10.3.3 Fetching data with useQuery10.3.4 Accessing data in the query cache10.3.5 Updating server state with useMutationSummary
11.1 Importing code dynamically with the import function11.1.1 Setting up a web page to load JavaScript when a button is clicked11.1.2 Using default and named exports11.1.3 Using static imports to load JavaScript11.1.4 Calling the import function to dynamically load JavaScript11.2 Importing components dynamically with lazy and Suspense11.2.1 Converting a component to a lazy component with the lazy function11.2.2 Specifying fallback content with the Suspense component11.2.3 Understanding how lazy and Suspense work together11.2.4 Code splitting an app on its routes11.3 Catching errors with error boundaries11.3.1 Checking out the error boundary example in the React docs11.3.2 Creating our own error boundary11.3.3 Recovering from errorsSummary
12.1 Data fetching with Suspense12.1.1 Upgrading promises to include their status12.1.2 Using the promise status to integrate with Suspense12.1.3 Fetching data as early as possible12.1.4 Fetching new data12.1.5 Recovering from errors12.1.6 Checking the React docs12.2 Using Suspense and error boundaries with React Query12.3 Loading images with Suspense12.3.1 Using React Query and Suspense to provide an image-loading fallback12.3.2 Prefetching images and data with React QuerySummary
13.1 Making smoother transitions between states13.1.1 Avoiding receded states with useTransition13.1.2 Giving users feedback with isPending13.1.3 Integrating transitions with common components13.1.4 Holding on to old values with useDeferredValue13.2 Using SuspenseList to manage multiple fallbacks13.2.1 Showing data from multiple sources13.2.2 Controlling multiple fallbacks with SuspenseList13.3 Concurrent Mode and the futureSummary

Content preview from React Hooks in Action

13 Experimenting with useTransition, useDeferredValue, and SuspenseList

This chapter covers

Delaying UI updates with the useTransition hook
Flagging inconsistent state and UI with the isPending Boolean
Using old and new values simultaneously with the useDeferredValue hook
Managing multiple fallbacks with the SuspenseList component
Understanding the promise of Concurrent Mode

Concurrent Mode lets React work on multiple versions of our UI at once, showing older versions that are still fully interactive until newer versions are ready. This can mean that, for brief periods, the latest state doesn’t match the current UI in the browser and React gives us some hooks and components to manage the feedback we give to our users. The aim is to improve ...