React Hooks in Action

4 Working with side effects

This chapter covers

• Recognizing types of side effects in components
• Wrapping side effects with the useEffect hook
• Controlling when an effect runs by specifying a dependency list
• Returning a cleanup function from an effect
• Using an effect to fetch data for a component

React transforms our data into UI. Each component plays its part, returning its contribution to the overall user interface. React builds the tree of elements, compares it with what’s already rendered, and commits any necessary changes to the DOM. When the state changes, React goes through the process again to update the UI. React is really good at efficiently deciding what should update and scheduling any changes.

Sometimes, however, we need our components ...