Be careful with useEffect

We had an interesting bug this week at work. A component would load without an issue, but the second you navigated away, it errored. It had a subtle bug.

import React, { useEffect } from 'react'
import Api form 'helpers/api'

const Teacher = ({ id }) => {
useEffect(() => getTeacher(), [id])

const getTeacher = () => Api.getWithPromise(`/api/teachers/${id}`).then(...)

Can you see the problem? We're returning something in the useEffect hook.

useEffect runs any returned value as a cleanup step during component unmount. It should be a non-promise function or undefined if you wish not to run any cleanup. Here, we're returning the promise because of the implicit return of single-expression arrow functions. Once the component was unmounted, it errored. But this is unintentional. We don't want to run any cleanup. In the end, it's an easy fix.

useEffect(() => {
}, [id])

React will warn you about this in the console, of course, but it's something to keep in mind.