Cover image for React Hooks in Action

React Hooks in Action

Release Date: 2021/04/01
ISBN: 9781617297632
Topic:
0%
22
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

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.

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