A deep dive into React effects

Imagine that for some reason, you’ve decided to create a React component that renders an animated fractal tree. In fact, let’s say that you’re already 90% of the way there — you have a fractal tree component, and now you want to animate it.

import React, { useState } from 'react'
import FractalTreeFrame from './FractalTreeFrame'

// The height and width of the entire window
const { innerHeight, innerWidth } = window

export default function App() {
  const [mousePosition, setMousePosition] = useState({
    x: innerWidth / 2,
    y: innerHeight / 2,
  })

  return (
    <FractalTreeFrame
      mousePosition={mousePosition}
      onMouseMove={({ clientX: x, clientY: y }) =>
        setMousePosition({ x, y })
      }
      time={Date.now()}
    />
  )
}

If you move the mouse around the preview area, you’ll see that the tree is already somewhat animated, due to the onMouseMove handler:

onMouseMove={({ clientX: x, clientY: y }) =>
  setMousePosition({ x, y })
}

Each time the mouse moves over the preview area, React calls this event handler. This in turn updates the component state, triggering a re-render of the component with a new value of the time prop.

time={Date.now()}

As it happens, there’s a pretty obvious way to make this work. Given that updating the state also triggers a re-render, you can store the current time with a useState hook. Then, you can trigger re-render by updating the time in a requestAnimationFrame() callback. To try it out, just uncomment lines 14–17 below:

import React, { useState } from 'react'
import FractalTreeFrame from './FractalTreeFrame'

// The height and width of the entire window
const { innerHeight, innerWidth } = window

export default function App() {
  const [time, setTime] = useState(Date.now())
  const [mousePosition, setMousePosition] = useState({
    x: innerWidth / 2,
    y: innerHeight / 2,
  })

  // window.requestAnimationFrame(() => {
  //   // Update time to trigger a re-render
  //   setTime(Date.now())
  // })

  return (
    <FractalTreeFrame
      mousePosition={mousePosition}
      onMouseMove={({ clientX: x, clientY: y }) =>
        setMousePosition({ x, y })
      }
      time={time}
    />
  )
}

Once you’ve removed the comment above, this animation looks to work pretty well! That is, at least until you try moving the mouse over the tree as well. Go ahead, try quickly moving your mouse over the tree, and see how performance takes a nosedive.

What the hell is going on?

Here’s the problem: if the mouse moves, then React will update the state and re-render the component, thus scheduling another render in addition to the one already scheduled by requestAnimationFrame(). Now you have two scheduled renders, twice the CPU usage, half the frame rate, and everything starts to grind to a halt.

#So… effects?

In the above example, the call to window.requestAnimationFrame() is what’s called a side effect; it’s something that your component does in addition to returning elements.

Side effects are what make your application actually useful. They’re responsible for things like:

• Loading data from the server
• Setting and clearing timers
• Interacting with the DOM

#The useEffect() function

This hook function lets you ask React to do something after the component has finished rendering to the DOM. There are a few ways to use it, so let’s start with the simplest:

useEffect(() => {
  // do stuff after update
})

When useEffect() receives a function as its first and only argument, it’ll call that function on every update. You might use this to, for example, validate usernames in a social network’s onboarding sequence. You can see how I’ve approached this below — go ahead, try typing in a username to test it out!

import React, { useEffect, useState } from 'react'
import getUsernameAvailability from './getUsernameAvailability'

export default function App() {
  const [username, setUsername] = useState('')
  const [availability, setAvailability] = useState({})
  const handleChange = event => setUsername(event.target.value)

  useEffect(() => {
    if (username && username !== availability.username) {
      // The promises returned by getUsernameAvailability
      // will always resolve in the same order as they're created,
      // so we don't have to worry about race conditions here.
      getUsernameAvailability(username).then(
        isAvailable => setAvailability({ username, isAvailable })
      )
    }
  })

  return (
    <div className="nametag">
      <h2>Hello</h2>
      <label>
        <p>my username is</p>
        <div className="field">
          <span className="at">@</span>
          <input value={username} onChange={handleChange} />
          <span className="icon">
            {username && availability.username === username && (
              availability.isAvailable ? "✔️" : "❌"
            )}
          </span>
        </div>
      </label>
    </div>
  )
}

In the above example, the effect starts by checking whether validation still needs to be performed for the current username. Then, if validation is still required, it calls getUsernameAvailability() and saves the result to component state.

While it may seem like a minor (and imperfect) optimization, the if statement inside the above effect is actually incredibly important. Do you know why?

Saving the validation result to component state triggers another update, which triggers the effect, which triggers the update, which… yeah, you get the idea.

Effects often need to update component state, and this presents a bit of a problem: if you run these effects in response to every update, you can easily end up with infinite loops. Typically though, you don’t want to run effects in response to every update. You only want them to respond to specific events — and that’s where the second argument of useEffect() comes in.

#Conditional effects

The second argument to useEffect() — called the dependencies array — instructs React to only run the effect if a dependency has changed from its previous value.

useEffect(
  () => {
    // do stuff after specified updates
  },
  [executeWhenThisChanges, orWhenThisChanges]
)

The dependencies array gives you a simple way to create effects that respond to specific events, without running into infinite loops. And with that in mind, let’s revisit the username example with an exercise.

Your task is to refactor the below example with a dependencies array, so that it no longer uses an if statement.

Be careful to add the dependencies array before removing the if statement though — otherwise you’ll end up with an infinite loop!

import React, { useEffect, useState } from 'react'
import getUsernameAvailability from './getUsernameAvailability'

export default function App() {
  const [username, setUsername] = useState('')
  const [availability, setAvailability] = useState({})
  const handleChange = event => setUsername(event.target.value)

  useEffect(() => {
    if (username && username !== availability.username) {
      // The promises returned by getUsernameAvailability
      // will always resolve in the same order as they're created,
      // so we don't have to worry about race conditions here.
      getUsernameAvailability(username).then(
        isAvailable => setAvailability({ username, isAvailable })
      )
    }
  })

  return (
    <div className="nametag">
      <h2>Hello</h2>
      <label>
        <p>my username is</p>
        <div className="field">
          <span className="at">@</span>
          <input value={username} onChange={handleChange} />
          <span className="icon">
            {username && availability.username === username && (
              availability.isAvailable ? "✔️" : "❌"
            )}
          </span>
        </div>
      </label>
    </div>
  )
}

Did you have a go? Great! In that case, if you take a look at the solution for the above exercise, you might notice something interesting. Here’s the original:

useEffect(() => {
  if (username !== availability.username) {
    // ...
  }
})

In contrast, here’s the solution with a dependencies array:

useEffect(() => {
  if (username) {
    // ...
  }
}, [username])

At first, there might not seem to really be any point in making this change. Sure, it saved you a couple characters… but if you look a little closer, there’s something far more exciting going on. Do you know what it is? Have a little think about this before checking the box below.

The key feature of useEffect() is that it lets you specify not just what effect to run, but also when that effect should occur — and it lets you do this declaratively, without relying on component state at all! In fact, it actually takes this one step further: it lets you declare how the effect should end.

#The cleanup function

When you return a function from your useEffect() callback, React will call that function when the effect should no longer have any… effect. lol, sorry not sorry.

useEffect(
  () => {
    // do stuff after specified updates

    return () => {
      // finish doing stuff
    }
  },
  [executeWhenThisChanges, orWhenThisChanges]
)

This function is often called the cleanup function, and there are two situations in which React will call it. Do you know what they are? Have a think about it, and when you’re ready, check your answer below.

The first of these situations is hopefully fairly obvious. But what about the second situation? This is what makes the effect hook so powerful. It lets you declare to React:

Yo React, I want this thing to happen, but only until the next time it happens (or until it no longer can happen).

The cleanup function is particularly important when dealing with data subscriptions — I’ll cover more on this in the routing section of React, Firebase & Bacon. For the moment though, let’s jump back to where we started: the animated tree.

In order to smooth out the tree’s animation, all you need to do is finish off the effect in the demo below. The thing is, there are actually two approaches that you can take. Do you know what they are? If so, try them out in the editor — and then check below to find out which one works best.

import React, { useEffect, useState } from 'react'
import FractalTreeFrame from './FractalTreeFrame'

// The height and width of the entire window
const { innerHeight, innerWidth } = window

export default function App() {
  const [time, setTime] = useState(Date.now())
  const [mousePosition, setMousePosition] = useState({
    x: innerWidth / 2,
    y: innerHeight / 2,
  })

  // useEffect(() => {
  //   window.requestAnimationFrame(() => {
  //     // Update time to trigger a re-render
  //     setTime(Date.now())
  //   })
  // })

  return (
    <FractalTreeFrame
      mousePosition={mousePosition}
      onMouseMove={({ clientX: x, clientY: y }) =>
        setMousePosition({ x, y })
      }
      time={time}
    />
  )
}

Did you find both approaches?

useEffect(() => {
  window.requestAnimationFrame(() => {
    setTime(Date.now())
  })
}, [time])

useEffect(() => {
  const frame = window.requestAnimationFrame(() => {
    setTime(Date.now())
  })
  return () => {
    window.cancelAnimationFrame(frame)
  }
})

#The three rules

Phew, that was a lot of info on effects! It’s okay if you didn’t take it all in — as you keep using effects in your day-to-day (or in my React, Firebase & Bacon course), you’ll gradually build intuition for them. But to start with? All you need to remember is these three rules:

1. useEffect() schedules an update after the DOM has been updated
2. By passing a dependencies array, that update will only occur if a dependency has changed
3. If you return a cleanup function, it’ll be called when the effect should should no longer apply

Got these three rules down? Good. Let’s see if we can’t put 'em all into practice with an exercise.

#Exercise: debounce the username form

If you take a look at the console for this example, you’ll see that as you type, a separate validation request is made for each and every keystroke. Given that at some level you’re going to be charged per request… well, if your app grows large enough, a little debounce could save a lot of bacon.

But what do I mean by debouncing? Simple: instead of validating each and every keystroke, you’ll want to delay validation until the user has stopped typing for a short period. Roughly speaking, here’s how to achieve this:

1. When the user updates the input, you’ll use setTimeout() to schedule a validation to occur a few hundred milliseconds in the future.
2. If the user updates the input again before the previously scheduled validation has occurred, then cancel it with clearTimeout() before scheduling another one.

Your task is to debounce the username input so that validation runs no more than once every 500ms.

You can check your work by opening up the console, and watching how many requests are made as you type. Then, once you’re happy with your work (or if you’re stuck but you’ve given the exercise a solid try), compare your work with my solution by clicking the solution button at the bottom left.

import React, { useEffect, useState } from 'react'
import getUsernameAvailability from './getUsernameAvailability'

export default function App() {
  const [username, setUsername] = useState('')
  const [availability, setAvailability] = useState({})

  useEffect(() => {
    if (username) {
      getUsernameAvailability(username).then(
        isAvailable => setAvailability({ username, isAvailable })
      )
    }
  }, [username])

  return (
    <div className="nametag">
      <h2>Hello</h2>
      <label>
        <p>my username is</p>
        <div className="field">
          <span className="at">@</span>
          <input
            value={username}
            onChange={event => setUsername(event.target.value)}
          />
          <span className="icon">
            {username && availability.username === username && (
              availability.isAvailable ? "✔️" : "❌"
            )}
          </span>
        </div>
      </label>
    </div>
  )
}

This article is based on the useEffect() lesson in React, Firebase & Bacon. If you found this lesson useful, then there’s plenty more demos, exercises and in-depth explanations where it came from. Check it out — I think you’ll love it! 🤓

• Check out the React, Firebase & Bacon course »
• Check out the React Fundamentals course »