10 Using third-party hooks

 

This chapter covers

  • Making the most of third-party hooks
  • Accessing state in the URL with React Router’s useParams and useSearchParams hooks
  • Switching to a new route with React Router’s useNavigate hook
  • Efficiently fetching and caching data with React Query’s useQuery hook
  • Updating data on the server with React Query’s useMutation hook

Chapter 9 introduced custom hooks as a way to extract functionality from components, making the functionality reusable and simplifying the components. Custom hooks provide a simple, readable way to access all kinds of functionality from a function component, whether that’s simple tasks like changing the document title or managing a state value with local storage, or increasingly complex tasks like fetching data or working with an application state manager. Many existing libraries have been quick to provide hooks to allow function components to make the most of the libraries’ features, and this chapter tries some out to improve the bookings example app.

10.1 Accessing state in the URL with React Router

10.1.1 Setting up routes to enable nesting

10.1.2 Adding nested routes to the Bookables page

10.1.3 Accessing URL parameters with the useParams hook

10.1.4 Navigating with the useNavigate hook

10.2 Getting and setting query string search parameters

10.2.1 Getting search parameters from the query string

10.2.2 Setting the query string

10.3 Streamlining data-fetching with React Query

10.3.1 Introducing React Query

10.3.2 Giving components access to a React Query client

10.3.3 Fetching data with useQuery

10.3.4 Accessing data in the query cache

10.3.5 Updating server state with useMutation

Summary