Name: Designing React Hooks the Right Way
Author: Fang Jin

React hooks 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.

Designing React Hooks the Right Way

JavaScript makes your pages dance, move and interact. For a front-end developer, it’s a fundamental skill.

JavaScript

React

Preface

In this chapter, we will first start with a brief history of UI components developed over the past two decades and get to know how React uses UI components to put together an application. You will learn what a function component is, with an explanation of its props and the basic parent/child relationship. You will then get some tips on how to write a function component. At the end, you will see a practical function component example, Nav . The chapter also includes one bonus topic in the Appendix section: How many component types does React support?

Introducing the Function Component

In the previous chapter, we learned how to write function components in React . In this chapter, we will craft a special variable called a state in the function components. We will see what benefits a state can bring us, including requesting a new update, making a variable persistent, listening to a value change, as well as performing tasks upon the mount. We will also see an example of applying a state to a single-page application. In the end, we will look closely at what role the states play within the UI .

Crafting States in Functions

In the previous chapter, we learned to perform actions inside a function component with our crafted states. In this chapter, we will go through the challenges we face in creating a good state solution, and then see how React builds the solution with the underlying Hook. We will then introduce what a hook is and get to know it, as well as its calling order, and learn how to avoid running into conditional hook issues in real applications. The chapter also includes two bonus topics in the Appendix section, React Fiber and Current and WorkInProgress Scenes .

Hooking into React

In the previous chapter, we learned how React designs a hook infrastructure to provide the persistency of a function component. In this chapter, we will begin learning about the built-in hooks in React , starting with the useState hook. We will first explain how the concept of state is used in React , and then we will walk through the data structure and source code behind useState and describe some common use cases for changing states. We'll give useState a test drive, and at the end of the chapter, we'll provide two practical examples of applying useState to the Avatar and Tooltip components.

Use State to Jumpstart Components

In the previous chapter, we learned how useState is designed and how to use it to manage state changes in React . In this chapter, we will learn about using useEffect for managing side effects . We will first introduce what a side effect is, and then we will walk through the data structure and source code behind useEffect and provide various scenarios for invoking effects. We will also demonstrate a couple of pitfalls of using useEffect and discuss some ways to avoid them. At the end of this chapter, we'll use useEffect in two practical examples: Finding the window size and Fetching an API resource . The chapter also includes three bonus topics in the Appendix section: React side effects, Flushing the passive effects, and Is a dispatch async .

Use Effect to Handle Side Effects

In the previous chapter, we learned how the useEffect hook is designed and how to use it to manage a side effect in React . In this chapter, we will change to an optimization topic for reusing the last assignment. We will first introduce how we can run into performance degradation in a typical web application. Then, we will walk through the design and source code behind useMemo and describe various ways of reusing a value conditionally. We'll then apply the optimization technique to two common cases: clicking to search and debouncing the search. At the end, the chapter also includes two bonus topics in the Appendix section, Not a Classical Memorization and Skipping a Child Update .

Use Memo to Boost Performance

In the previous chapter, we learned how useMemo is designed and how to use useMemo to conditionally reuse the last value. In this chapter, we will talk about how to propagate changes to cover an area update. We will introduce what an area update is and how React context is used to share a value within that area. Then, we will walk through the data structure and source code behind useContext to consume the shared value. And finally, we'll provide two practical examples of applying contexts to the theme and the table. The chapter also includes two bonus topics in the Appendix section: Propagating a context and Context scope and value .

Use Context to Cover an Area

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.

Use Ref to Hide Stuff

In the previous chapter, we learned how the useRef hook is designed and how to use a ref for a state without updating the screen. In this chapter, we will gather all the hooks we have learned about so far and see how to create a custom hook for our own needs. We will introduce what a custom hook is and then write some custom hooks step by step, including useToggle , useWindow , useAsync , useDebounced , useClickOutside , useCurrent , and useProxy .

Use Custom Hooks to Reuse Logic

In this last chapter of this book, we will talk about React in general, especially the role that React plays in web development. We will approach this topic from three aspects to see how React puts resources together to build a site. First, we will take a look at how React embraces new JavaScript ES6 features, such as arrow function and template strings. Then, we will walk through how a component can be styled using a CSS-in-JS approach via libraries such as styled-JSX and styled-components . Last, but not least, we will also get to know JSX code and how it is used to transform the HTML -like lines into JavaScript expressions.

Designing React Hooks the Right Way

About the course

Author

Course Outline

Reviews