Book Image

Designing React Hooks the Right Way

By : Fang Jin
Book Image

Designing React Hooks the Right Way

By: Fang Jin

Overview of this book

React hook creates a unique solution for using states in function components to orchestrate UI communication. They provide you with an easy interface to write custom data management solutions with low development and maintenance costs. Understanding how Hooks are designed enables you to use them more effectively, and this book helps you to do just that. This book starts with a custom-crafted solution to reveal why Hooks are needed in the first place. You will learn about the React engine and discover how each built-in Hook can manage a persistent value by hooking into it. You will walk through the design and implementation of each hook with code so that you gain a solid understanding. Finally, you'll get to grips with each Hook's pitfalls and find out how to effectively overcome them. By the end of this React book, you'll have gained the confidence to build and write Hooks for developing functional and efficient web applications at scale.

Related Content you might be interested in

Current Title:

Small book image
Designing React Hooks the Right Way
Fang Jin
Jan, 2022 | 278 pages
Small book image
Micro State Management with React Hooks
Daishi Kato
Feb, 2022 | 254 pages
Small book image
React Interview Guide
Sudheer Jonna | Andrew Baisden
Nov, 2023 | 346 pages
Small book image
Learn React Hooks
Daniel Bugl
Oct, 2019 | 426 pages
Table of Contents (12 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the color images
Conventions used
Get in touch
Share Your Thoughts
1
Chapter 1: Introducing the Function Component
Chapter 1: Introducing the Function Component
History of UI components
Building an app with components
Introducing the function component
Writing a function component
Example of a function component
Summary
Questions and answers
Appendix
Free Chapter
2
Chapter 2: Crafting States in Functions
Chapter 2: Crafting States in Functions
Technical requirements
Crafting a state in a function component
Applying states to single-page application
How states work with UI
Summary
Questions and answers
3
Chapter 3: Hooking into React
Chapter 3: Hooking into React
Creating a good state solution
Introducing a React Hook
What is a Hook?
Summary
Questions and answers
Appendix
4
Chapter 4: Use State to Jumpstart Components
Chapter 4: Use State to Jumpstart Components
State in React
useState design
Dispatching states
Test driving the useState hook
useState examples
Summary
Questions and answers
Appendix
5
Chapter 5: Use Effect to Handle Side Effects
Chapter 5: Use Effect to Handle Side Effects
What is a side effect?
Understanding useEffect design
Creating effects
Test driving the useEffect hook
useEffect examples
Summary
Questions and answers
Appendix
6
Chapter 6: Use Memo to Boost Performance
Chapter 6: Use Memo to Boost Performance
Performance degradation
Understanding the useMemo design
Reusing a last assignment
Test-Driving useMemo
useMemo examples
Summary
Questions
Appendix
7
Chapter 7: Use Context to Cover an Area
Chapter 7: Use Context to Cover an Area
What is an area update?
Introducing the React context
Understanding the useContext design
Test driving useContext
useContext examples
Summary
Questions and answers
Appendix
8
Chapter 8: Use Ref to Hide Stuff
Chapter 8: Use Ref to Hide Stuff
Accessing DOM elements
Understanding useRef design
State without an update
Test driving useRef
useRef examples
Summary
Questions and answers
Appendix
9
Chapter 9: Use Custom Hooks to Reuse Logic
Chapter 9: Use Custom Hooks to Reuse Logic
Reviewing React hooks
useToggle
useWindow
useAsync
useDebounced
useClickOutside
useCurrent
useProxy
Summary
Questions and answers
10
Chapter 10: Building a Website with React
Chapter 10: Building a Website with React
Exploring functions of React
Embracing JavaScript ES6
Adopting CSS-in-JS approach
Going from HTML to JSX
Summary
Questions and answers
Why subscribe?
11
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you

useAsync

Hooks used in this custom hook: useState, useEffect, useRef, and useMemo

One hook everyone wants to get their hands dirty with is useAsync, which is used to fetch an async resource as we introduced in Chapter 5, Use Effect to Handle Side Effects. See Figure 9.3:

Figure 9.3 – useAsync hook

As simple as it sounds, everyone comes with different requirements and implementations for their projects. Here are a few features that we would like to have:

  • Support a loading indicator.
  • Can execute on demand.
  • Support error handling.
  • Can cancel async call.
  • Can cache async data.

The feature list can go on and on. In this book, I will provide a basic version that supports the first two items.

At any point, the call should be aware of the loading state, and when the resource is resolved, the data should be available to use. Also, we'd like to keep a handle on the execute function in case we want to fetch the resource...

Previous Section
End of Section 5
Next Section