Chapter 4: Use State to Jumpstart Components

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.

We will cover the following topics in this chapter:

• State in React
• useState design
• Dispatching states
• Test driving the useState hook
• useState examples
• Questions and answers
• Appendix