chapter four

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 clean-up 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’s really good at efficiently deciding what should update and scheduling any changes. Sometimes, however, we need our components to reach outside of this data flow process and directly interact with other APIs. An action that impinges on the outside world in some way is called a side effect. Common side effects include:

  • Setting the page title imperatively
  • Working with timers like setInterval or setTimeout
  • Measuring the width or height or position of elements in the DOM
  • Logging messages to the console or other service
  • Setting or getting values in local storage
  • Fetching data or subscribing and unsubscribing to services

4.1       Exploring the useEffect API with simple examples

4.1.1   Running side effects after every render

4.1.2   Running an effect only when a component mounts

4.1.3   Cleaning up side effects by returning a function

4.1.4   Controlling when an effect runs by specifying dependencies

4.1.5   Summarizing the ways to call the useEffect hook

4.1.6   Calling useLayoutEffect to run an effect before the browser repaints

4.2       Fetching data

4.2.1   Creating the new db.json file

4.2.2   Setting up a JSON server

4.2.3   Fetching data within a useEffect hook

4.2.4   Working with async and await

4.3       Fetching data for the BookablesList component

4.3.1   Examining the data-loading process

4.3.2   Updating the reducer to manage loading and error states

4.3.3   Creating a helper function to load data

4.3.4   Loading the bookables

4.4       Summary