book

React Hooks in Action

Name: React Hooks in Action
Author: John Larsen
ISBN: 9781617297632

by John Larsen

April 2021

Intermediate to advanced

376 pages

9h 53m

English

Manning Publications

Read now

Unlock full access

React Hooks in Action
Copyright
dedication
contents
front matter
prefaceacknowledgmentsabout this bookWho should read this bookHow this book is organized: A roadmapAbout the codeliveBook discussion forumOther online resourcesabout the authorabout the cover illustration
Part 1
1 React is evolving
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 Managing component state with the useState hook
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 Managing component state with the useReducer hook
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 Working with side effects
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 Managing component state with the useRef hook
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 Managing application state
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 Managing performance with useMemo
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 Managing state with the Context API
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 Creating your own hooks
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 Using third-party hooks
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
Part 2
11 Code splitting with Suspense
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 Integrating data fetching with Suspense
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 Experimenting with useTransition, useDeferredValue, and SuspenseList
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
index

Content preview from React Hooks in Action

11 Code splitting with Suspense

This chapter covers

Importing code dynamically with the import function
Loading components when they’re needed with React.lazy
Specifying fallback UI declaratively with Suspense components
Understanding how lazy and Suspense work together
Specifying error fallback UI declaratively with error boundaries

It’s common for app users to interact with some components more than others. In the bookings app, for example, users often visit the Bookings page without switching to the Bookables or Users pages, and on the Bookables page they may never bring up the New or Edit forms. To manage the amount of code loaded by the browser at any one time, we can use a technique called code splitting; rather than loading all of ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781617297632Publisher Support Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

React Hooks in Action

by John Larsen

11 Code splitting with Suspense

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.