useEffect hook gotchas

you know when you use the useEffect() hook in react, and you need to add dependencies to it to tell it to "watch" them?

let your = 'things that change'
let dependencies = ['some', 'dependency']

useEffect(
  () => {
    // do your stuff when one of your dependencies change
  },
  [your, dependencies]
)

well useEffect uses a very simple comparison method, Object.is(). this comes with some pretty interesting caveats, one of which blew up in our face recently, causing infinite rerenders for this reason.

const someFunction = props => {
  const { dependency1, dependency2, dependency3 = [] } = props

  useEffect(
    () => {
      // do stuff
    },
    [dependency1, dependency2, dependency3]
  )
}

dependency3 has a default prop of [], meaning the function will create an empty array if dependency3 is not supplied.

(TODO: check if if actually also creates an empty array on first render)

this causes useEffect to freak out and think dependency3 is ALWAYS different, causing infinite rerenders (that react fails to catch), leading to memory leaks.