Async Effect Hook

Brownies.jsx

import React from 'react'
import useEffectAsync from './useEffectAsync'

export default function Brownies() {
  const [brownies, setBrownies] = useState('Loading')

  useEffectAsync(
    async didUnmount => {
      const res = await fetch(`https://api.brownies.com`)
      if (!didUnmount) setBrownies(res)
    },
    []
  )

  return <div>{brownies}</div>
}

useEffectAsync.js

import { useEffect } from 'react'

export default function useEffectAsync(asyncFunc, triggers) {
  // avoid side effects from async func after component unmounts
  useEffect(() => {
    let didUnmount = false
    asyncFunc(didUnmount)
    return () => (didUnmount = true)
  }, triggers)
}

This simple, custom hook allows you to perform an asynchronous function and carry out side effects without worrying about race conditions, since you can perform an easy check to see if the component has unmounted.

This is the simplest and most re-usable way of doing this I could come up with. If you have a better way, please comment!