React Hooks in Action

React Hooks in Action

by John Larsen
Released April 2021
Publisher(s): Manning Publications
ISBN: 9781617297632

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Quotes
Discover React Hooks, and the future of developing apps with React. A great book.
- Arnaud Castelltort, University of Montpellier

This book covers everything that you need to know. A fantastic addition to your React arsenal.
- Clive Harber, Distorted Thinking Ltd.

Level up your React knowledge and take advantage of the newer features and best practices.
- Ryan Burrows, Remitly

An excellent introduction. Filled with knowledge nuggets and real-world use cases.
- Edin Kapić, isolution

Table of contents

  1. React Hooks in Action
  2. Copyright
  3. dedication
  4. contents
  5. front matter
    1. preface
    2. acknowledgments
    3. about this book
      1. Who should read this book
      2. How this book is organized: A roadmap
      3. About the code
      4. liveBook discussion forum
      5. Other online resources
    4. about the author
    5. about the cover illustration
  6. Part 1
  7. 1 React is evolving
    1. 1.1 What is React?
      1. 1.1.1 Building a UI from components
      2. 1.1.2 Synchronizing state and UI
      3. 1.1.3 Understanding component types
    2. 1.2 What’s new in React?
    3. 1.3 React Hooks can add state to function components
      1. 1.3.1 Stateful function components: Less code, better organization
      2. 1.3.2 Custom hooks: Easier code reuse
      3. 1.3.3 Third-party hooks provide ready-made, well-tested functionality
    4. 1.4 Better UX with Concurrent Mode and Suspense
      1. 1.4.1 Concurrent Mode
      2. 1.4.2 Suspense
    5. 1.5 React’s new publication channels
    6. 1.6 Whom is this book for?
    7. 1.7 Getting started
    8. Summary
  8. 2 Managing component state with the useState hook
    1. 2.1 Setting up the bookings manager app
      1. 2.1.1 Generating the app skeleton with create-react-app
      2. 2.1.2 Editing the four key files
      3. 2.1.3 Adding a database file for the application
      4. 2.1.4 Creating page components and a UserPicker.js file
    2. 2.2 Storing, using, and setting values with useState
      1. 2.2.1 Assigning new values to variables doesn’t update the UI
      2. 2.2.2 Calling useState returns a value and an updater function
      3. 2.2.3 Calling the updater function replaces the previous state value
      4. 2.2.4 Passing a function to useState as the initial value
      5. 2.2.5 Using the previous state when setting the new state
    3. 2.3 Calling useState multiple times to work with multiple values
      1. 2.3.1 Using a drop-down list to set state
      2. 2.3.2 Using a check box to set state
    4. 2.4 Reviewing some function component concepts
    5. Summary
  9. 3 Managing component state with the useReducer hook
    1. 3.1 Updating multiple state values in response to a single event
      1. 3.1.1 Taking users out of the movie with unpredictable state changes
      2. 3.1.2 Keeping users in the movie with predictable state changes
    2. 3.2 Managing more complicated state with useReducer
      1. 3.2.1 Updating state using a reducer with a predefined set of actions
      2. 3.2.2 Building a reducer for the BookablesList component
      3. 3.2.3 Accessing component state and dispatching actions with useReducer
    3. 3.3 Generating the initial state with a function
      1. 3.3.1 Introducing the WeekPicker component
      2. 3.3.2 Creating utility functions to work with dates and weeks
      3. 3.3.3 Building the reducer to manage dates for the component
      4. 3.3.4 Passing an initialization function to the useReducer hook
      5. 3.3.5 Updating BookingsPage to use WeekPicker
    4. 3.4 Reviewing some useReducer concepts
    5. Summary
  10. 4 Working with side effects
    1. 4.1 Exploring the useEffect API with simple examples
      1. 4.1.1 Running side effects after every render
      2. 4.1.2 Running an effect only when a component mounts
      3. 4.1.3 Cleaning up side effects by returning a function
      4. 4.1.4 Controlling when an effect runs by specifying dependencies
      5. 4.1.5 Summarizing the ways to call the useEffect hook
      6. 4.1.6 Calling useLayoutEffect to run an effect before the browser repaints
    2. 4.2 Fetching data
      1. 4.2.1 Creating the new db.json file
      2. 4.2.2 Setting up a JSON server
      3. 4.2.3 Fetching data within a useEffect hook
      4. 4.2.4 Working with async and await
    3. 4.3 Fetching data for the BookablesList component
      1. 4.3.1 Examining the data-loading process
      2. 4.3.2 Updating the reducer to manage loading and error states
      3. 4.3.3 Creating a helper function to load data
      4. 4.3.4 Loading the bookables
    4. Summary
  11. 5 Managing component state with the useRef hook
    1. 5.1 Updating state without causing a re-render
      1. 5.1.1 Comparing useState and useRef when updating state values
      2. 5.1.2 Calling useRef
    2. 5.2 Storing timer IDs with a ref
    3. 5.3 Keeping references to DOM elements
      1. 5.3.1 Setting focus on an element in response to an event
      2. 5.3.2 Managing a text box via a ref
    4. Summary
  12. 6 Managing application state
    1. 6.1 Passing shared state to child components
      1. 6.1.1 Passing state from a parent by setting props on the children
      2. 6.1.2 Receiving state from a parent as a prop
      3. 6.1.3 Receiving an updater function from a parent as a prop
    2. 6.2 Breaking components into smaller pieces
      1. 6.2.1 Seeing components as part of a bigger app
      2. 6.2.2 Organizing multiple components within a page’s UI
      3. 6.2.3 Creating a BookableDetails component
    3. 6.3 Sharing the state and dispatch function from useReducer
      1. 6.3.1 Managing state in the BookablesView component
      2. 6.3.2 Removing an action from the reducer
      3. 6.3.3 Receiving state and dispatch in the BookablesList component
    4. 6.4 Sharing the state value and updater function from useState
      1. 6.4.1 Managing the selected bookable in the BookablesView component
      2. 6.4.2 Receiving the bookable and updater function in BookablesList
    5. 6.5 Passing functions to useCallback to avoid redefining them
      1. 6.5.1 Depending on functions we pass in as props
      2. 6.5.2 Maintaining function identity with the useCallback hook
    6. Summary
  13. 7 Managing performance with useMemo
    1. 7.1 Breaking the cook’s heart by calling, “O, shortcake!”
      1. 7.1.1 Generating anagrams with an expensive algorithm
      2. 7.1.2 Avoiding redundant function calls
    2. 7.2 Memoizing expensive function calls with useMemo
    3. 7.3 Organizing the components on the Bookings page
      1. 7.3.1 Managing the selected bookable with useState
      2. 7.3.2 Managing the selected week and booking with useReducer and useState
    4. 7.4 Efficiently building the bookings grid with useMemo
      1. 7.4.1 Generating a grid of sessions and dates
      2. 7.4.2 Generating a lookup for bookings
      3. 7.4.3 Providing a getBookings data-loading function
      4. 7.4.4 Creating the BookingsGrid component and calling useMemo
      5. 7.4.5 Coping with racing responses when fetching data in useEffect
    5. Summary
  14. 8 Managing state with the Context API
    1. 8.1 Needing state from higher up the component tree
      1. 8.1.1 Displaying a call-to-action message when the page first loads
      2. 8.1.2 Displaying booking information when a visitor selects a booking
      3. 8.1.3 Displaying an edit button for a user’s bookings: The problem
      4. 8.1.4 Displaying an edit button for a user’s bookings: The solution
    2. 8.2 Working with custom providers and multiple contexts
      1. 8.2.1 Setting an object as the context provider’s value
      2. 8.2.2 Moving the state to a custom provider
      3. 8.2.3 Working with multiple contexts
      4. 8.2.4 Specifying a default value for a context
    3. Summary
  15. 9 Creating your own hooks
    1. 9.1 Extracting functionality into custom hooks
      1. 9.1.1 Recognizing functionality that could be shared
      2. 9.1.2 Defining custom hooks outside your components
      3. 9.1.3 Calling custom hooks from custom hooks
    2. 9.2 Following the Rules of Hooks
      1. 9.2.1 Call hooks only at the top level
      2. 9.2.2 Call hooks only from React functions
      3. 9.2.3 Using an ESLint plugin for the rules of hooks
    3. 9.3 Extracting further examples of custom hooks
      1. 9.3.1 Accessing window dimensions with a useWindowSize hook
      2. 9.3.2 Getting and setting values with a useLocalStorage hook
    4. 9.4 Consuming a context value with a custom hook
    5. 9.5 Encapsulating data fetching with a custom hook
      1. 9.5.1 Creating the useFetch hook
      2. 9.5.2 Using the data, status, and error values the useFetch hook returns
      3. 9.5.3 Creating a more specialized data-fetching hook: useBookings
    6. Summary
  16. 10 Using third-party hooks
    1. 10.1 Accessing state in the URL with React Router
      1. 10.1.1 Setting up routes to enable nesting
      2. 10.1.2 Adding nested routes to the Bookables page
      3. 10.1.3 Accessing URL parameters with the useParams hook
      4. 10.1.4 Navigating with the useNavigate hook
    2. 10.2 Getting and setting query string search parameters
      1. 10.2.1 Getting search parameters from the query string
      2. 10.2.2 Setting the query string
    3. 10.3 Streamlining data-fetching with React Query
      1. 10.3.1 Introducing React Query
      2. 10.3.2 Giving components access to a React Query client
      3. 10.3.3 Fetching data with useQuery
      4. 10.3.4 Accessing data in the query cache
      5. 10.3.5 Updating server state with useMutation
    4. Summary
  17. Part 2
  18. 11 Code splitting with Suspense
    1. 11.1 Importing code dynamically with the import function
      1. 11.1.1 Setting up a web page to load JavaScript when a button is clicked
      2. 11.1.2 Using default and named exports
      3. 11.1.3 Using static imports to load JavaScript
      4. 11.1.4 Calling the import function to dynamically load JavaScript
    2. 11.2 Importing components dynamically with lazy and Suspense
      1. 11.2.1 Converting a component to a lazy component with the lazy function
      2. 11.2.2 Specifying fallback content with the Suspense component
      3. 11.2.3 Understanding how lazy and Suspense work together
      4. 11.2.4 Code splitting an app on its routes
    3. 11.3 Catching errors with error boundaries
      1. 11.3.1 Checking out the error boundary example in the React docs
      2. 11.3.2 Creating our own error boundary
      3. 11.3.3 Recovering from errors
    4. Summary
  19. 12 Integrating data fetching with Suspense
    1. 12.1 Data fetching with Suspense
      1. 12.1.1 Upgrading promises to include their status
      2. 12.1.2 Using the promise status to integrate with Suspense
      3. 12.1.3 Fetching data as early as possible
      4. 12.1.4 Fetching new data
      5. 12.1.5 Recovering from errors
      6. 12.1.6 Checking the React docs
    2. 12.2 Using Suspense and error boundaries with React Query
    3. 12.3 Loading images with Suspense
      1. 12.3.1 Using React Query and Suspense to provide an image-loading fallback
      2. 12.3.2 Prefetching images and data with React Query
    4. Summary
  20. 13 Experimenting with useTransition, useDeferredValue, and SuspenseList
    1. 13.1 Making smoother transitions between states
      1. 13.1.1 Avoiding receded states with useTransition
      2. 13.1.2 Giving users feedback with isPending
      3. 13.1.3 Integrating transitions with common components
      4. 13.1.4 Holding on to old values with useDeferredValue
    2. 13.2 Using SuspenseList to manage multiple fallbacks
      1. 13.2.1 Showing data from multiple sources
      2. 13.2.2 Controlling multiple fallbacks with SuspenseList
    3. 13.3 Concurrent Mode and the future
    4. Summary
  21. index

Product information

  • Title: React Hooks in Action
  • Author(s): John Larsen
  • Release date: April 2021
  • Publisher(s): Manning Publications
  • ISBN: 9781617297632