Book Image

Learn React Hooks

By : Daniel Bugl
Book Image

Learn React Hooks

By: Daniel Bugl

Overview of this book

React Hooks revolutionize how you manage state and effects in your web applications. They enable you to build simple and concise React.js applications, along with helping you avoid using wrapper components in your applications, making it easy to refactor code. This React book starts by introducing you to React Hooks. You will then get to grips with building a complex UI in React while keeping the code simple and extensible. Next, you will quickly move on to building your first applications with React Hooks. In the next few chapters, the book delves into various Hooks, including the State and Effect Hooks. After covering State Hooks and understanding how to use them, you will focus on the capabilities of Effect Hooks for adding advanced functionality to React apps. You will later explore the Suspense and Context APIs and how they can be used with Hooks. Toward the concluding chapters, you will learn how to integrate Redux and MobX with React Hooks. Finally, the book will help you develop the skill of migrating your existing React class components, and Redux and MobX web applications to Hooks. By the end of this book, you will be well-versed in building your own custom Hooks and effectively refactoring your React applications.
Table of Contents (19 chapters)
Free Chapter
Section 1: Introduction to Hooks
Section 2: Understanding Hooks in Depth
Section 3: Integration and Migration

What this book covers

Chapter 1, Introducing React and React Hooks, covers the fundamental principles of React and React Hooks, what they are and why to use them. We then learn about the functionality of Hooks by introducing the State Hook as an alternative to React state in class components. Finally, we introduce the kinds of Hooks React provides and introduce a couple of Hooks that we are going to learn about throughout the book.

Chapter 2, Using the State Hook, explains how Hooks work in depth by reimplementing the useState Hook. By doing so, we find out that there are certain limitations of Hooks. We are then going to compare our reimplementation of a Hook with real Hooks. Furthermore, we introduce alternative Hook APIs and discuss the problems they have. Finally, we learn how to solve common problems with Hooks, such as conditional Hooks and Hooks in loops.

Chapter 3, Writing Your First Application with React Hooks, takes what we learned from the first two chapters and puts it into practice by developing a blog application using React Hooks, specifically the State Hook. In this chapter, we also learn how to structure React projects in a way that scales well.

Chapter 4, Using the Reducer and Effect Hooks, moves on from learning about the simple State Hook and using it in practice. We are going to learn about the other two main Hooks predefined by the React library: the Reducer and Effect Hooks. We first learn when we should use a Reducer Hook instead of a State Hook. Then we learn how to turn our existing State Hook into a Reducer Hook to get an idea of the concept. Finally, we learn how to use Effect Hooks for more advanced functionality.

Chapter 5, Implementing React Context, explains React context and how it can be used in our application. Then we implement React context in our blog application to provide theming functionality and global state using Context Hooks.

Chapter 6, Implementing Requests and React Suspense, covers requesting resources from a server with Hooks using an Effect Hook and a State or Reducer Hook. Then we learn how to use React.memo to prevent unnecessary component re-renders. Finally, we learn about React Suspense, which can be used to defer rendering until a condition is met, also called lazy loading.

Chapter 7, Using Hooks for Routing, explains how to use Hooks to implement routing in our blog application. We learn about Navi, a routing library for React that makes use of Hooks and Suspense. We start by implementing pages in our application, then define routes, and finally move on to implementing routing Hooks.

Chapter 8, Using Community Hooks, explains that the React community has already developed various libraries that make use of Hooks. In this chapter, we learn about implementing various Hooks from the community, as well as where to find more of them. We first learn about the input handling Hook. Next, we learn how to replace React life cycle methods with Hooks. Then, we learn about various useful Hooks and responsive design with Hooks. Furthermore, we learn how to implement undo/redo functionality using Hooks. Finally, we learn where to find other Hooks provided by the community.

Chapter 9, Rules of Hooks, covers the rules of Hooks. Having a grasp on the rules of Hooks is very important for building our own Hooks, which we are going to do in the next chapter. We also learn about the limitations of Hooks in depth and discover what we need to watch out for. Finally, we learn how to enforce the rules of Hooks using a linter.

Chapter 10, Building Your Own Hooks, moves on from the basic concepts of Hooks. We are now going to build our own Hooks. We start by extracting a custom Hook from an existing function of our blog application, and then we learn how to use our custom Hook. Next, we learn about passing information between Hooks. Finally, we learn about the React Hooks API and additional Hooks we can use to build our own Hooks. At the end of this chapter, our application will be fully powered by Hooks!

Chapter 11, Migrating from React Class Components, covers state handling with React class components. We start by implementing a simple ToDo application with class components. Then, we learn how to migrate an existing project using class components to a Hook-based implementation. Finally, we learn about the trade-offs of using class components versus Hooks and a strategy to efficiently migrate existing projects.

Chapter 12, Redux and Hooks, explains state handling with Redux. We start by migrating our existing ToDo application to Redux, and then we learn how to use Redux with Hooks. Furthermore, we learn how to migrate an existing Redux application to Hooks. Finally, we learn about the trade-offs of using Redux.

Chapter 13, MobX and Hooks, covers state handling with MobX. We start by migrating our existing ToDo application to MobX. Then we learn how to use MobX with Hooks. Furthermore, we learn how to migrate an existing MobX application to Hooks. Finally, we learn about the trade-offs of using MobX.