Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Learn React Hooks
  • Toc
  • feedback
Learn React Hooks

Learn React Hooks

By : Bugl
3.4 (8)
close
Learn React Hooks

Learn React Hooks

3.4 (8)
By: 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)
close
close
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Section 1: Introduction to Hooks
Section 1: Introduction to Hooks
2
Introducing React and React Hooks
Introducing React and React Hooks
Technical requirements
Principles of React
Motivation for using React Hooks
Getting started with React Hooks
Overview of various Hooks
Summary
Questions
Further reading
3
Using the State Hook
Using the State Hook
Technical requirements
Reimplementing the useState function
Problems with our simple Hook implementation
Comparing our reimplementation with real Hooks
Alternative Hook APIs
Solving common problems with Hooks
Solving problems with conditional Hooks
Summary
Questions
Further reading
4
Writing Your First Application with React Hooks
Writing Your First Application with React Hooks
Technical requirements
Structuring React projects
Implementing static components
Implementing stateful components with Hooks
Summary
Questions
Further reading
5
Section 2: Understanding Hooks in Depth
Section 2: Understanding Hooks in Depth
6
Using the Reducer and Effect Hooks
Using the Reducer and Effect Hooks
Technical requirements
Reducer Hooks versus State Hooks
Implementing Reducer Hooks
Using Effect Hooks
Summary
Questions
Further reading
7
Implementing React Context
Implementing React Context
Technical requirements
Introducing React context
Implementing themes
Using context for global state
Summary
Questions
Further reading
8
Implementing Requests and React Suspense
Implementing Requests and React Suspense
Technical requirements
Requesting resources with Hooks
Preventing unnecessary re-rendering with React.memo
Implementing lazy loading with React Suspense
Summary
Questions
Further reading
9
Using Hooks for Routing
Using Hooks for Routing
Technical requirements
Creating multiple pages
Implementing routing
Using routing Hooks
Summary
Questions
Further reading
10
Using Community Hooks
Using Community Hooks
Technical requirements
Exploring the input handling Hook
React life cycles with Hooks
Various useful Hooks
Responsive design with Hooks
Undo/Redo with Hooks
Finding other Hooks
Summary
Questions
Further reading
11
Rules of Hooks
Rules of Hooks
Technical requirements
Calling Hooks
Order of Hooks
Names of Hooks
Enforcing the rules of Hooks
Dealing with useEffect dependencies
Summary
Questions
Further reading
12
Building Your Own Hooks
chevron up
Building Your Own Hooks
Technical requirements
Extracting custom Hooks
Using our custom Hooks
Interactions between Hooks
Testing Hooks
Exploring the React Hooks API
Summary
Questions
Further reading
13
Section 3: Integration and Migration
Section 3: Integration and Migration
14
Migrating from React Class Components
Migrating from React Class Components
Technical requirements
Handling state with class components
Migrating from React class components
Trade-offs of class components
Summary
Questions
Further reading
15
Redux and Hooks
Redux and Hooks
Technical requirements
What is Redux?
Handling state with Redux
Using Redux with Hooks
Migrating a Redux application
Trade-offs of Redux
Summary
Questions
Further reading
16
MobX and Hooks
MobX and Hooks
Technical requirements
What is MobX?
Handling state with MobX
Using MobX with Hooks
Migrating a MobX application
The trade-offs of MobX
Summary
Questions
Further reading
17
Assessments
Assessments
Answers to questions
18
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Questions

To recap what we have learned in this chapter, try answering the following questions:

  1. How can we extract a custom Hook from existing code?
  2. What is the advantage of creating API Hooks?
  3. When should we extract functionality into a custom Hook?
  4. How do we use custom Hooks?
  5. When should we create local Hooks?
  6. Which interactions between Hooks are possible?
  7. Which library can we use to test Hooks?
  8. How can we test Hook actions?
  9. How can we test contexts?
  10. How can we test asynchronous code?

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 9
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete