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, and 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

React Hooks promise to make React programmers even more productive. Hooks are a collection of pre-built and custom functions that give you a simpler API for working with key React functionalities. Hooks cleanly encapsulate side effects, make it easier to reuse components between projects, and result in less code overall. These new features represent a fundamental evolution in how the React library functions, so even experienced React developers will want to get up to speed with Hooks.

About the book

React Hooks in Action shows you how to use Hooks to make your codebase simpler and more reusable, and your applications faster and more responsive. You’ll build a resource booking example application chapter by chapter, learning how to develop components with local, shared, and application states. You’ll discover different approaches to data fetching, including using Concurrent Mode and Suspense to improve user experience, and explore third party hooks in the evolving React ecosystem.

Part 1: The React Roadmap

1 React is evolving

1.1 What is React?

1.1.1 Building a UI from components

1.1.2 React synchronizes state and UI

1.1.3 Component Types

1.2 What’s new in React?

1.3 React hooks can add state to function components

1.3.1 Stateful function components: less code, better organization

1.3.2 Custom hooks: easier code reuse

1.3.3 Third party hooks provide ready-made, well-tested functionality

1.4 Better UX with Concurrent Mode and Suspense

1.4.1 Concurrent Mode

1.4.2 Suspense

1.5 React’s new publication channels

1.6 Who is this book for?

1.7 Getting started

1.8 Summary

2 Making your code shorter and simpler

Part 2: React Hooks

3 Managing component state with the useState hook

3.1 A bookings manager: setting up the App

3.1.1 Generating the app skeleton with create-react-app

3.1.2 Editing the four key files

3.1.3 Adding a database file for the application

3.1.4 Creating a components folder and a Bookables.js file

3.2 Storing, using and setting values with useState

3.2.1 Assigning new values to variables doesn’t update the UI

3.2.2 Calling useState returns a value and an updater function

3.2.3 Calling the updater function replaces the previous state value

3.2.4 Passing a function to useState as the initial value

3.2.5 Using the previous state when setting the new state

3.3 Calling useState multiple times to work with multiple values

3.3.1 Using a drop-down list to set state

3.3.2 Using a checkbox to set state

3.4 Reviewing some function component concepts

3.5 Summary

4 Managing component state with the useReducer hook

4.1 Updating multiple state values in response to a single event

4.1.1 Taking users out of the movie with unpredictable state changes

4.1.2 Keeping users in the movie with predictable state changes

4.2 Managing more complicated state with useReducer

4.2.1 Updating state using a reducer with a pre-defined set of actions

4.2.2 Building a reducer for the Bookables component

4.2.3 Accessing component state and dispatching actions with useReducer

4.3 Generating the initial state with a function

4.3.1 Introducing the WeekPicker component

4.3.2 Creating utility functions to work with dates and weeks

4.3.3 Building the reducer to manage dates for the component

4.3.4 Passing an initialization function to the useReducer hook

4.3.5 Updating App to use WeekPicker

4.4 Reviewing some useReducer concepts

4.5 Summary

5 Working with side effects

5.1 Exploring the useEffect API with simple examples

5.1.1 Running side effects after every render

5.1.2 Running an effect only when a component mounts

5.1.3 Cleaning up side effects by returning a function

5.1.4 Controlling when an effect runs by specifying dependencies

5.1.5 Summarizing the ways to call the useEffect hook

5.2 Fetching data

5.2.1 Adding some new data to the db.json file

5.2.2 Setting up a JSON server

5.2.3 Fetching data within a useEffect hook

5.2.4 Working with async and await

5.3 Fetching data for the Bookables component

5.3.1 Examining the data-loading process

5.3.2 Updating the reducer to manage loading and error states

5.3.3 Creating a helper function to load data

5.3.4 Loading the bookables

5.4 Summary

6 Managing component state with the useRef hook

7 Sharing state with child components

8 Improving performance

9 Managing application state with the Context API

10 Encapsulating code with custom hooks

11 Third-party hooks

Part 3: Suspense and Concurrent Mode

12 Managing the user experience with Suspense

13 Managing the user experience with Concurrent Mode

Part 4: Example App

14 Example App - introducing GraphQL and Apollo Hooks (or react-query)

Appendixes

Appendix A: The classic React approach - a comparison

What's inside

Create a Redux store and interact with it via Hooks
Use code-splitting to improve the responsiveness of your apps
Build functional components that can update their own state
Manage component side effects
Use the React Suspense API to improve the user experience of page and data loading

About the reader

For front-end web developers experienced with React.

About the author

John Larsen is the author of Get Programming with JavaScript. He was a mathematics and computing teacher for 25 years. He has an MA in mathematics and an MSc in information technology, and an ongoing interest in educational research. A web developer since 2000, he uses JavaScript end-to-end for server-side and client-side programming.

placing your order...

Don't refresh or navigate away from the page.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.

4 of 14 chapters available