Chapter 5: Use Effect to Handle Side Effects

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.

We will cover the following topics in this chapter:

• What is a side effect?
• Understanding useEffect design
• Creating effects
• Test driving useEffect
• useEffect examples
...