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

Chapter 8: Use Ref to Hide Stuff

In the previous chapter, we learned how the React context is designed and how to use a useContext hook to make an update for an area. In this chapter, we will introduce another React entity, a ref. We will learn how to access a DOM element via a ref and walk through the design and source code behind the useRef hook. We will also describe how to work with a persistent value without dispatching an update. In the end, we'll apply refs to a couple of practical problems, such as clicking outside of the menu, avoiding memory leaks, setting up a mule, and locating the current value. And we'll also reveal two bonus topics in the Appendix section, the callback ref and forward ref.

We will cover the following topics in this chapter:

  • Accessing DOM elements
  • Understanding useRef design
  • State without an update
  • Test driving useRef
  • useRef examples
  • Questions and answers
  • Appendix
Previous Section
End of Section 1
Next Section