Learning React, 2nd Edition

Chapter 7. Enhancing Components with Hooks

Rendering is the heartbeat of a React application. When something changes (props, state), the component tree rerenders, reflecting the latest data as a user interface. So far, useState has been our workhorse for describing how our components should be rendering. But we can do more. There are more Hooks that define rules about why and when rendering should happen. There are more Hooks that enhance rendering performance. There are always more Hooks to help us out.

In the last chapter, we introduced useState, useRef, and useContext, and we saw that we could compose these Hooks into our own custom Hooks: useInput and useColors. There’s more where that came from, though. React comes with more Hooks out of the box. In this chapter, we’re going to take a closer look at useEffect, useLayoutEffect, and useReducer. All of these are vital when building applications. We’ll also look at useCallback and useMemo, which can help optimize our components for performance.

Introducing useEffect

We now have a good sense of what happens when we render a component. A component is simply a function that renders a user interface. Renders occur when the app first loads and when props and state values change. But what happens when we need to do something after a render? Let’s take a closer look.

Consider a simple component, the Checkbox. We’re using useState to set a checked value and a function to change the value of checked: setChecked. A user can check and ...