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

Questions

Here are some questions and answers to refresh your knowledge:

  1. What is useMemo?

    A useMemo hook is an assignment statement where a new value is created when one of the dependencies changes. It can be used to minimize the creation of a value, so it behaves like that sometimes when an assignment is "skipped."

  2. What's the common usage of useMemo?

    It's mainly used as an optimization to avoid heavy operation on every render otherwise. If a certain evaluation is excessively used, thus blocking the UI, it is the right time to think about using useMemo to limit the usage to only relevant conditions. For instance, if typing isn't related to that task, we can take it out of the dependency list.

  3. How do you use useMemo for memorization?

    useMemo doesn't remember all past values and only remembers the last created value. So, the best usage of it is to use it as a special assignment replacement, instead of a caching mechanism.

Previous Section
End of Section 8
Next Section