How to useEffect in React

A detailed look at how React.useEffect works

Introduction

An essential tool to writing bug-free software is to maximize the predictability of your program. One strategy is to minimize and encapsulate side effects. In layman’s terms, a side effect is defined as a procedural change that was not communicated within its scope, otherwise known as a secondary, typically undesirable effect.

Mental Model

React.useEffect can be illustrated as a tiny box living inside a component. The box has a bit of code that runs after React has rendered the components, making it the ideal location to run side-effects.

  • Empty array: the effect runs only after the initial render, for which the return function unmounts
  • An array containing values: the effect runs when the value changes and the return function will run before the new effect

Side Effects in React

Since encapsulation of side effects is extremely crucial, React comes with a built-in hook to do just that — useEffect . As the name suggests, useEffect allows you to perform side effects in functional components. Whenever you want to interact with the world outside of React, whether that is to manually update the DOM or make a network request, you’d reach for useEffect .

Adding an Effect

To add a side effect to your React component, you invoke useEffect and pass it a function that defines your side effect.

Initial Render
numberOfAvocados: 0
Effect (runs after render):
() => document.title = `Number of Avocados: 0`
UI Description: - 0 +
React: updates the DOM
Browser: Re-paints with DOM updates
React invokes Effect:
() => document.title = `Count: 0`
User Christian clicks on the + button
React increments the count by 1, causing a re-render
Next Render
numberOfAvocados: 1
Effect (runs after render):
() => document.title = `Number of Avocados: 1`
UI Description: - 1 +
React: updates the DOM
Browser: Re-paints with DOM updates
React invokes Effect:
() => document.title = `Count: 1`
User Christian clicks on the - button
React decrements the count by 1, causing a re-render
Next Render
numberOfAvocados: 0
Effect (runs after render):
() => document.title = `Number of Avocados: 0`
UI Description: - 0 +
React: updates the DOM
Browser: Re-paints with DOM updates
React invokes Effect:
() => document.title = `Count: 0`
Initial Render
profile: null
Effect (runs after render):
getTwitterProfile('jayacados').then(setProfile)
UI Description: Loading or nonexistent profile
React: updates the DOM
Browser: Re-paints with DOM updates
React invokes Effect:
() => getTwitterProfile('jayacados').then(setProfile)
setProfile invoked
React updates "profile", causing a re-render
Next Render
profile: {login: 'jayacados', name: 'Jay Acados'
Effect (runs after render):
getTwitterProfile('jayacados').then(setProfile)
UI Description: <h1>@jayacados</h1>
React: updates the DOM
Browser: Re-paints with DOM updates
React invokes Effect:
() => getTwitterProfile('jayacados').then(setProfile)
setProfile invoked
React updates "profile", causing a re-render
Next Render
setProfile invoked
React updates "profile", causing a re-render
Next Render
setProfile invoked
React updates "profile", causing a re-render
Next Render
setProfile invoked
React updates "profile", causing a re-render
Next Render
.... repeat infinitely

Skipping Side Effects

Knowing the basic use case for useEffect, let’s now apply the mental model with React’s useEffect hook.

Cleaning Up Side Effects

Imagine dealing with the same Twitter API that we saw earlier, but it’s now using WebSockets. Instead of making a single network request to fetch our data, we set up a listener to get notified when the data changes.

In Summary…

A side effect is a state change that is observed outside of its local environment. The most common examples of side effects are making an API request, updating the DOM, and modifying variables outside of their own scope. By default, useEffect runs on the initial render and subsequent render but can be controlled by adding a second argument to the hook.

--

--

Software developer with a liking to avocados www.jayacados.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store