Bugl / Schelkshorn Learn React Hooks

Unlock scalable state, performance, and clean code with Hooks, Context, Suspense, and Form Actions
2. Auflage 2025
ISBN: 978-1-83620-916-4
Verlag: De Gruyter
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Englisch, 372 Seiten

React Hooks allow you to easily encapsulate, reuse, and refactor logic with the same level of simplicity that components bring to user interface organization.
In this second edition, React expert and author of many popular React books, Daniel Bugl guides you through the full spectrum of React Hooks, and teaches you how to handle forms, routing, and data fetching in modern React development. This edition is fully updated to React 19, with a revamped structure, expanded real-world use cases, and coverage of all newly introduced Hooks.
Starting with the fundamentals, you'll gain a deep understanding of how Hooks work under the hood and how to apply Hooks patterns efficiently. The chapters guide you through using State, Reducer, and Effect Hooks to manage application state, side effects, and complex logic for building your first Hook-based app. You'll utilize Suspense and Context APIs for streamlined data fetching and state management, master Form Actions for handling submissions, and implement routing with Hooks. You'll also create custom Hooks for advanced functionality and write tests for reliability. Finally, you'll learn how to refactor an existing app with class components into modern Hooks architecture.
By the end of this React book, you'll be well-equipped to use React Hooks to modernize and optimize your React projects.

Autoren/Hrsg.

Bugl, Daniel

Schelkshorn, Georg

Fachgebiete

• Mathematik | Informatik EDV | Informatik EDV & Informatik Allgemein

Leseproben

1

Introducing React and React Hooks

React is a JavaScript library used to build efficient and extensible web applications. React was developed by Meta and is used in many large-scale web applications, such as Facebook, Instagram, Netflix, Shopify, Airbnb, Cloudflare, and the BBC.

In this book, we are going to learn how to build complex and efficient user interfaces with React, while keeping the code simple and extensible. Using the paradigm of React Hooks, we can greatly simplify dealing with state and effects in web applications, ensuring the potential for growing and extending the application later. We are also going to learn about React Context, React Suspense, and Form Actions, as well as how they can be used with Hooks. Finally, we are going to learn how to build our own Hooks and how to migrate existing applications from React class components to a React Hooks-based architecture.

In this first chapter, we are going to learn about the fundamental principles of React and React Hooks. We will start by learning what React and React Hooks are, and why we should use them. Then, we will move on to learn about the inner workings of Hooks. Finally, you will be introduced to the Hooks that are provided by React, and a couple of Hooks provided by the community – such as data fetching and routing Hooks. By learning the fundamentals of React and React Hooks, we will be better able to understand the concepts that will be introduced throughout this book.

In this chapter, we are going to cover the following main topics:

• Principles of React
• Motivation to use React Hooks
• Setting up the development environment
• Getting started with React Hooks

Technical requirements

A fairly recent version of Node.js should already be installed. The Node Package Manager () also needs to be installed (it should come with Node.js). For more information on how to install Node.js, please check out their official website: https://nodejs.org/.

We are going to use Visual Studio Code (VS Code) for the guides in this book, but everything should work similarly in any other editor. For more information on how to install VS Code, please refer to their official website: https://code.visualstudio.com.

In this book, we use the following versions:

• Node.js v22.14.0
• v10.9.2
• Visual Studio Code v1.97.2

The versions mentioned in the preceding list are the ones used in the book. While installing a newer version should not be an issue, please note that certain steps might work differently on a newer version. If you are having an issue with the code and steps provided in this book, please try using the mentioned versions.

You can find the code for this chapter on GitHub: https://github.com/PacktPublishing/Learn-React-Hooks-Second-Edition/tree/main/Chapter01.

It is highly recommended that you write the code on your own. Do not simply run the code examples that are provided with the book. It is important to write the code yourself to be able to learn and understand it properly. However, if you run into any issues, you can always refer to the code example.

Principles of React

Before we start learning how to set up a React project, let’s revisit the three fundamental principles of React. These principles allow us to easily write scalable web applications.

React is based on three fundamental principles:

• Declarative: Instead of telling React how to do things, we tell it what we want it to do. For example, if we change data, we don’t need to tell React which components need to be re-rendered. That would be complex and error-prone. Instead, we just tell React that data has changed and all components using this data will be efficiently updated and re-rendered for us. React takes care of the details so that we can focus on the tasks at hand to easily develop our web application.
• Component-based: React encapsulates components that manage their own state and views and then allows us to compose them in order to create complex user interfaces.
• Learn once, write anywhere: React does not make assumptions about your technology stack and tries to ensure that you can develop apps without rewriting existing code as much as possible.

React’s three fundamental principles make it easy to write code, encapsulate components, and share code across multiple platforms. Instead of reinventing the wheel, React always tries to make use of existing JavaScript features as much as possible. As a result, we are going to learn about software design patterns that will be applicable in many more cases than just designing user interfaces.

We just learned that React is component-based. In React, there are two types of components:

• Function components: JavaScript functions that take the props as an argument, and return the user interface (usually via JSX, which is an extension of the JavaScript syntax that allows us to write HTML-like markup directly within JavaScript code)
• Class components: JavaScript classes that provide a method, which returns the user interface (usually via JSX)

While function components are easier to define and understand, in the past, class components were needed to deal with state, contexts, and many more of React’s advanced features. However, with React Hooks, we can use most of React’s advanced features without needing a class component!

There are certain features of React that, at the time of writing, are not possible with function components and Hooks yet. For example, defining error boundaries still requires class components and the and lifecycle methods.

Motivation to use React Hooks

React always strives to make the developer experience as smooth as possible while ensuring to keep it performant enough, without the developer having to worry too much about how to optimize performance. However, throughout the years of using React, a couple of problems have been identified.

The code snippets in the following subsections are just intended to give you an understanding of why Hooks were needed, by giving examples of how developers previously dealt with certain problems in React. If you are not familiar with those old ways, do not worry, it’s not necessary to understand the old ways to follow along. In the upcoming sections, we are going to learn how to deal with these problems in a better way using React Hooks.

Let’s now take a look at these problems in the following subsections.

Confusing classes

In the past, we had to use class components with special functions called life cycle methods, such as , and special state-handling methods such as , to deal with state changes. React classes, and especially the context, are hard to read and understand for both developers and machines.

is a special keyword in JavaScript that always refers to the object that it belongs to:

• In a method, refers to the class object (instance of the class).
• In an event handler, refers to the element that received the event.
• In a function or standing alone, refers to the global object. For example, in a browser, the global object is the object.
• In strict mode, is in a function.
• Additionally, methods such as and can change the object that refers to, so it can refer to any object.

For developers, classes are hard, because always refers to different things, so sometimes (for example, in event handlers) we need to manually rebind it to the class object. For machines, classes are hard, because they do not know which methods in a class will be called and how will be modified, making it hard to optimize performance and remove unused code.

Additionally, classes sometimes require us to write code in multiple places at once. For example, if we want to fetch data when the component renders or props of a component change, we need to do this using two methods: once in , and once in .

To give an example, let’s define a class component that fetches data from an API:

1. First, we define a class component by extending the class:
2. Then, we define the life cycle method, where we pull data from an API: ...